Turbo boost your Web UI with JavaScript

•

2 j'aime•711 vues

Mohammad Emran Hasan

Boost your web UI with JavaScript patterns and tools. Presented at JSCon 2011 Dhaka by Emran Hasan and M A H Tonu.

Technologie Divertissement et humour

JSCon 2011

Turbo Boost your web UI
with JavaScript

Agenda

1. User Experience (UX) and User Interface (UI)

2. Why bother?

3. Boosting UI Elements

4. Implementing UI Patterns

5. Tools of the trade

“Design is not just what it looks like and
feels like. Design is how it works.”

- Steve Jobs

1. User Experience (UX) and User Interface (UI)

• UX deals with the overall subjective experience
associated with the use of a product or service.

• UI deals with the specific user interface(s) of a
product or service.

2. Why bother about UX/UI?

• Visual impression lasts long

• Information is perceived easily/fully

• Happy users come back

• “Less” becomes “More”

3. Boosting UI Elements

• Date picker
• Modal Dialog
• Autocomplete
• Accordion
• Slider

4. Implementing UI Patterns

http://ui-patterns.com/patterns

4. Implementing UI Patterns - Clarity

• Make things clear for the user to find

• Organize information

4. Implementing UI Patterns – Forgiving the user

• Allow user to cancel critical actions

4. Implementing UI Patterns – Inplace Input/Output

• Allow input wherever you have output

4. Implementing UI Patterns – Live Preview

• Provide the user a preview of the expected output

4. Implementing UI Patterns – Table Sorter

• Allow the user to sort table columns by their need

5. Tools of the trade

• jQuery UI

• jQuery Tools

• Formalize

• GameQuery

• Component Libraries

• Firebug

5. Tools of the trade – Component Libraries

Who we are?

Emran Hasan
CTO, Right Brain Solution
@phpfour
www.phpfour.com

M A Hossain Tonu
Sr. Software Engineer
Somewhere in…
@mahtonu
mahtonu.wordpress.com

Contenu connexe

Similaire à Turbo boost your Web UI with JavaScript

What Makes SharePoint UX Good?What is UX? What defines good UX? Evaluation Criteria for SharePoint UX Key Tips from the Field The Future of SharePoint & Office 365 UXUX is the short for User Experience UX is the experience that the user has while interacting with your X It’s more about how the user feels when they use your X Many different parts compose the UX, no “one things” makes it UX is NOT the interface or design of your X UI is short for User Interface It’s what you see in the browser Help messages, buttons, modals, characters, style, menus, navigation, pages UI is an incredibly important part of UX

What Makes SharePoint UX Good?

Thomas Daly

Full stack conference talk slides

Sameer Al-Sakran

Mai Omar Desouki - SharePoint 2013 What it means for your business

Mai Omar Desouki

#SPSLondon - Session 1 - Building an faq for end users

Paul Hunt

Make SharePoint work for you!

Asif Rehmani

In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade. When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge. After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).

UX design for every screen

Four Kitchens

Confused CMS Presentation - Internet World London 2011 #iwexpo. Delivered on...

✪ Chris Lewis ✪

Subotが考えるBotの可能性 - Thinking about the Bot potential -

Keiko Ando

Driving SharePoint Adoption - webinar presentation

Asif Rehmani

What is share point sps_denver_final

M Allmond

SharePoint is a powerful product and can be many things to its many customers allowing each to customize it for their own unique business needs. Over the past 9 years I've worked with SharePoint, I've learned some valuable lessons and insights into key areas of the product that should come with warning labels to handle with care. Some choices made in SharePoint can have detrimental side effects and end up to costing organizations time, rework and money to resolve. In this talk I'll share a few common ones I've learned and you will benefit by being able to recognize some of these before they become a problem in your own environment.

If SharePoint had Warning Labels

Joanne Klein

Crank up SharePoint Adoption

Asif Rehmani

What drives a great intranet user experience? Are we keeping it simple enough for our employees? Is the intranet user experience engaging enough for them to use it excitedly, and not just to complete the task? Intranets have become more than just branding, graphics, leader messages, or news. Enabling employees to find relevant information is a critical use case for intranet success, so developing a consistent user experience is a vital step in deploying a successful Intranet. A resource-limited user experience team often focuses on the client-facing systems. That leaves the internal designs to evolve slowly, often without care or thought. Over time, this creates costs for the organization, as the intranet becomes inept and inhibits the employees from doing critical functions. Enterprise are looking for intranet UX strategies that increase employee productivity, communication, and satisfaction. In this webinar we will capture some key aspects on what it takes to have amazing UX to the employees by just keeping it simple and follow basic usability guidelines. You will learn how to best support your organization, enable employee communication, and increase employee productivity and satisfaction by improving the intranet’s usability. The webinar discusses the following in details: • Intranet UX: An Introduction • Understanding employees' needs, workflow, and tasks • User-focused intranet design process • Redesigning an intranet and catalysts for redesign • Design Trends & Best Practices

Intranet UX: Keep it Simple. Keep it Interesting.

WinWire Technologies Inc

Agrobazaar - The customer Experience process

Mohd Syaheezam Asyra Yamin

UX Trends

Ergonline

Migrating liverpool.gov.uk to Umbraco

monosnow

Good vs Evil SharePoint Customizing

Stacy Deere

Search UI and Lucidworks View: Presented by Josh Ellinger, Lucidworks

Lucidworks

UI-UX Practical Talking - Mohamed Shehata

Mohamed Shehata

Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...

Paul Hunt

Similaire à Turbo boost your Web UI with JavaScript (20)

What Makes SharePoint UX Good?

Full stack conference talk slides

Mai Omar Desouki - SharePoint 2013 What it means for your business

#SPSLondon - Session 1 - Building an faq for end users

Make SharePoint work for you!

UX design for every screen

Confused CMS Presentation - Internet World London 2011 #iwexpo. Delivered on...

Subotが考えるBotの可能性 - Thinking about the Bot potential -

Driving SharePoint Adoption - webinar presentation

What is share point sps_denver_final

If SharePoint had Warning Labels

Crank up SharePoint Adoption

Intranet UX: Keep it Simple. Keep it Interesting.

Agrobazaar - The customer Experience process

UX Trends

Migrating liverpool.gov.uk to Umbraco

Good vs Evil SharePoint Customizing

Search UI and Lucidworks View: Presented by Josh Ellinger, Lucidworks

UI-UX Practical Talking - Mohamed Shehata

Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...

Plus de Mohammad Emran Hasan

Build social apps for Facebook

Mohammad Emran Hasan

Show me the money

Mohammad Emran Hasan

Developing better PHP projects

Mohammad Emran Hasan

Enterprise PHP

Mohammad Emran Hasan

Facebook Open Stream API - Facebook Developer Garage Dhaka

Mohammad Emran Hasan

Becoming A Php Ninja

Mohammad Emran Hasan

Plus de Mohammad Emran Hasan (6)

Build social apps for Facebook

Show me the money

Developing better PHP projects

Enterprise PHP

Facebook Open Stream API - Facebook Developer Garage Dhaka

Becoming A Php Ninja

Dernier

Presentation on how to chat with PDF using ChatGPT code interpreter

naman860154

In this session, we will delve into strategic approaches for optimizing knowledge management within Microsoft 365, amidst the evolving landscape of Copilot. From leveraging automatic metadata classification and permission governance with SharePoint Premium, to unlocking Viva Engage for the cultivation of knowledge and communities, you will gain actionable insights to bolster your organization's knowledge-sharing initiatives. In this session, we will also explore how to facilitate solutions to enable your employees to find answers and expertise within Microsoft 365. You will leave equipped with practical techniques and a deeper understanding of how there is more to effective knowledge management than just enabling Copilot, but building actual solutions to prepare the knowledge that Copilot and your employees can use.

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Drew Madelung

Enterprise Knowledge’s Urmi Majumder, Principal Data Architecture Consultant, and Fernando Aguilar Islas, Senior Data Science Consultant, presented "Driving Behavioral Change for Information Management through Data-Driven Green Strategy" on March 27, 2024 at Enterprise Data World (EDW) in Orlando, Florida. In this presentation, Urmi and Fernando discussed a case study describing how the information management division in a large supply chain organization drove user behavior change through awareness of the carbon footprint of their duplicated and near-duplicated content, identified via advanced data analytics. Check out their presentation to gain valuable perspectives on utilizing data-driven strategies to influence positive behavioral shifts and support sustainability initiatives within your organization. In this session, participants gained answers to the following questions: - What is a Green Information Management (IM) Strategy, and why should you have one? - How can Artificial Intelligence (AI) and Machine Learning (ML) support your Green IM Strategy through content deduplication? - How can an organization use insights into their data to influence employee behavior for IM? - How can you reap additional benefits from content reduction that go beyond Green IM?

Driving Behavioral Change for Information Management through Data-Driven Gree...

Enterprise Knowledge

BooK Now Call us at +918448380779 to hire a gorgeous and seductive call girl for sex. Take a Delhi Escort Service. The help of our escort agency is mostly meant for men who want sexual Indian Escorts In Delhi NCR. It should be noted that any impersonator will get 100 attention from our Young Girls Escorts in Delhi. They will assume the position of reliable allies. VIP Call Girl With Original Photos Book Tonight +918448380779 Our Cheap Price 1 Hour not available 2 Hours 5000 Full Night 8000 TAG: Call Girls in Delhi, Noida, Gurgaon, Ghaziabad, Connaught Place, Greater Kailash Delhi, Lajpat Nagar Delhi, Mayur Vihar Delhi, Chanakyapuri Delhi, New Friends Colony Delhi, Majnu Ka Tilla, Karol Bagh, Malviya Nagar, Saket, Khan Market, Noida Sector 18, Noida Sector 76, Noida Sector 51, Gurgaon Mg Road, Iffco Chowk Gurgaon, Rajiv Chowk Gurgaon All Delhi Ncr Free Home Deliver

08448380779 Call Girls In Civil Lines Women Seeking Men

Delhi Call girls

Handwritten Text Recognition for manuscripts and early printed texts

Maria Levchenko

Slack Application Development 101 Slides

praypatel2

The presentation explores the development and application of artificial intelligence (AI) from its inception to its current status in the modern world. The term "artificial intelligence" was first coined by John McCarthy in 1956 to describe efforts to develop computer programs capable of performing tasks that typically require human intelligence. This concept was first introduced at a conference held at Dartmouth College, where programs demonstrated capabilities such as playing chess, proving theorems, and interpreting texts. In the early stages, Alan Turing contributed to the field by defining intelligence as the ability of a being to respond to certain questions intelligently, proposing what is now known as the Turing Test to evaluate the presence of intelligent behavior in machines. As the decades progressed, AI evolved significantly. The 1980s focused on machine learning, teaching computers to learn from data, leading to the development of models that could improve their performance based on their experiences. The 1990s and 2000s saw further advances in algorithms and computational power, which allowed for more sophisticated data analysis techniques, including data mining. By the 2010s, the proliferation of big data and the refinement of deep learning techniques enabled AI to become mainstream. Notable milestones included the success of Google's AlphaGo and advancements in autonomous vehicles by companies like Tesla and Waymo. A major theme of the presentation is the application of generative AI, which has been used for tasks such as natural language text generation, translation, and question answering. Generative AI uses large datasets to train models that can then produce new, coherent pieces of text or other media. The presentation also discusses the ethical implications and the need for regulation in AI, highlighting issues such as privacy, bias, and the potential for misuse. These concerns have prompted calls for comprehensive regulations to ensure the safe and equitable use of AI technologies. Artificial intelligence has also played a significant role in healthcare, particularly highlighted during the COVID-19 pandemic, where it was used in drug discovery, vaccine development, and analyzing the spread of the virus. The capabilities of AI in healthcare are vast, ranging from medical diagnostics to personalized medicine, demonstrating the technology's potential to revolutionize fields beyond just technical or consumer applications. In conclusion, AI continues to be a rapidly evolving field with significant implications for various aspects of society. The development from theoretical concepts to real-world applications illustrates both the potential benefits and the challenges that come with integrating advanced technologies into everyday life. The ongoing discussion about AI ethics and regulation underscores the importance of managing these technologies responsibly to maximize their their benefits while minimizing potential harms.

Artificial Intelligence: Facts and Myths

Joaquim Jorge

Microsoft's Threat Matrix for Kubernetes helps organizations understand the attack surface a Kubernetes deployment introduces to their environments. This ensures that adequate detections and mitigations are in place. By covering over 40 different attacker techniques, defenders can learn about Kubernetes-specific mitigations and controls to deploy to their environments. In this session, we will explore the MS-TA9013 Host Path Mount technique, which is commonly used by attackers to perform privilege escalation in a Kubernetes cluster. Attendees will learn how attackers and defenders can: * Escape the container's host volume mount to gain persistence on an underlying node * Move laterally from the underlying node into the customer's cloud environment * Analyze Kubernetes audit logs to detect pods deployed with a hostPath mount * Deploy an admission controller that prevents new pods from using a hostPath mount

Breaking the Kubernetes Kill Chain: Host Path Mount

Puma Security, LLC

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

Delhi Call girls

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

Delhi Call girls

As privacy and data protection regulations evolve rapidly, organizations operating in multiple jurisdictions face mounting challenges to ensure compliance and safeguard customer data. With state-specific privacy laws coming up in multiple states this year, it is essential to understand what their unique data protection regulations will require clearly. How will data privacy evolve in the US in 2024? How to stay compliant? Our panellists will guide you through the intricacies of these states' specific data privacy laws, clarifying complex legal frameworks and compliance requirements. This webinar will review: - The essential aspects of each state's privacy landscape and the latest updates - Common compliance challenges faced by organizations operating in multiple states and best practices to achieve regulatory adherence - Valuable insights into potential changes to existing regulations and prepare your organization for the evolving landscape

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

A Domino Admins Adventures (Engage 2024)

Gabriella Davis

[2024]Digital Global Overview Report 2024 Meltwater.pdf

hans926745

What are drone anti-jamming systems? The drone anti-jamming systems and anti-spoof technology protect against interference, jamming, and spoofing of the UAVs. To protect their security, countries are beginning to research drone anti-jamming systems, also known as drone strike weapons. The anti-jam and anti-spoof technology protects against interference, jamming and spoofing. A drone strike weapon is a drone attack weapon that can attack and destroy enemy drones. So what is so unique about this amazing system?

What Are The Drone Anti-jamming Systems Technology?

Antenna Manufacturer Coco

This presentations targets students or working professionals. You may know Google for search, YouTube, Android, Chrome, and Gmail, but did you know Google has many developer tools, platforms & APIs? This comprehensive yet still high-level overview outlines the most impactful tools for where to run your code, store & analyze your data. It will also inspire you as to what's possible. This talk is 50 minutes in length.

Powerful Google developer tools for immediate impact! (2023-24 C)

wesley chun

Advantages of Hiring UIUX Design Service Providers for Your Business

Pixlogix Infotech

The Raspberry Pi 5 was announced on October 2023. This new version of the popular embedded device comes with a new iteration of Broadcom’s VideoCore GPU platform, and was released with a fully open source driver stack, developed by Igalia. The presentation will discuss some of the major changes required to support this new Video Core iteration, the challenges we faced in the process and the solutions we provided in order to deliver conformant OpenGL ES and Vulkan drivers. The talk will also cover the next steps for the open source Raspberry Pi 5 graphics stack. (c) Embedded Open Source Summit 2024 April 16-18, 2024 Seattle, Washington (US) https://events.linuxfoundation.org/embedded-open-source-summit/ https://eoss24.sched.com/event/1aBEx

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Igalia

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Neo4j

Histor y of HAM Radio presentation slide

vu2urc

Dernier (20)

Presentation on how to chat with PDF using ChatGPT code interpreter

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Driving Behavioral Change for Information Management through Data-Driven Gree...

08448380779 Call Girls In Civil Lines Women Seeking Men

Handwritten Text Recognition for manuscripts and early printed texts

Slack Application Development 101 Slides

Artificial Intelligence: Facts and Myths

Breaking the Kubernetes Kill Chain: Host Path Mount

08448380779 Call Girls In Diplomatic Enclave Women Seeking Men

08448380779 Call Girls In Greater Kailash - I Women Seeking Men

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

Boost Fertility New Invention Ups Success Rates.pdf

A Domino Admins Adventures (Engage 2024)

[2024]Digital Global Overview Report 2024 Meltwater.pdf

What Are The Drone Anti-jamming Systems Technology?

Powerful Google developer tools for immediate impact! (2023-24 C)

Advantages of Hiring UIUX Design Service Providers for Your Business

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Histor y of HAM Radio presentation slide

Turbo boost your Web UI with JavaScript

1. JSCon 2011 Turbo Boost your web UI with JavaScript

2. Agenda 1. User Experience (UX) and User Interface (UI) 2. Why bother? 3. Boosting UI Elements 4. Implementing UI Patterns 5. Tools of the trade

3. “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

5. 1. User Experience (UX) and User Interface (UI) • UX deals with the overall subjective experience associated with the use of a product or service. • UI deals with the specific user interface(s) of a product or service.

6. 2. Why bother about UX/UI? • Visual impression lasts long • Information is perceived easily/fully • Happy users come back • “Less” becomes “More”

8. 3. Boosting UI Elements • Date picker • Modal Dialog • Autocomplete • Accordion • Slider

9. 3. Boosting UI Elements - Date picker

10. 3. Boosting UI Elements - Modal Dialog

11. 3. Boosting UI Elements - Autocomplete

12. 3. Boosting UI Elements - Accordion

13. 3. Boosting UI Elements - Slider

14. 4. Implementing UI Patterns http://ui-patterns.com/patterns

15. 4. Implementing UI Patterns - Clarity • Make things clear for the user to find • Organize information

16. 4. Implementing UI Patterns – Forgiving the user • Allow user to cancel critical actions

17. 4. Implementing UI Patterns – Inplace Input/Output • Allow input wherever you have output

18. 4. Implementing UI Patterns – Inplace Input/Output • Allow input wherever you have output

19. 4. Implementing UI Patterns – Inplace Input/Output • Allow input wherever you have output

20. 4. Implementing UI Patterns – Inplace Input/Output • Allow input wherever you have output

21. 4. Implementing UI Patterns – Live Preview • Provide the user a preview of the expected output

22. 4. Implementing UI Patterns – Table Sorter • Allow the user to sort table columns by their need

23. 5. Tools of the trade • jQuery UI • jQuery Tools • Formalize • GameQuery • Component Libraries • Firebug

24. 5. Tools of the trade – jQuery UI

25. 5. Tools of the trade – jQuery Tools

26. 5. Tools of the trade - Formalize

27.

28. 5. Tools of the trade - GameQuery

29. 5. Tools of the trade – Component Libraries

30. 5. Tools of the trade – Firebug

31. 6. Keep eyes on… +

32. Must read…

33. Who we are? Emran Hasan CTO, Right Brain Solution @phpfour www.phpfour.com M A Hossain Tonu Sr. Software Engineer Somewhere in… @mahtonu mahtonu.wordpress.com

34. Thank You

Turbo boost your Web UI with JavaScript

Recommandé

Recommandé

Contenu connexe

Similaire à Turbo boost your Web UI with JavaScript

Similaire à Turbo boost your Web UI with JavaScript (20)

Plus de Mohammad Emran Hasan

Plus de Mohammad Emran Hasan (6)

Dernier

Dernier (20)

Turbo boost your Web UI with JavaScript