Developing For The Web

67 %
33 %
Information about Developing For The Web

Published on July 28, 2008

Author: aleemb

Source: slideshare.net

Description

Developing for the Web: Presented by Aleem Bawany at PASHA Career Expo 2008.

Developing for the Web Aleem Bawany July 20, 2008 P@SHA Career Expo, Marriot Karachi [email_address]

Outline Development Methodologies Always beta; Iterative design; Top down design; Tools & APIs. AJAX Intro; Selling points; Good practices Performance Caching; GZIP; Images etc Usability Basic usability guidelines to adhere to

Development Methodologies

Always beta; Iterative design; Top down design; Tools & APIs.

AJAX

Intro; Selling points; Good practices

Performance

Caching; GZIP; Images etc

Usability

Basic usability guidelines to adhere to

Development Methodologies: Always Beta Develop early Deploy early Fail fast and cheap Get early feedback Benchmark performance

Develop early

Deploy early

Fail fast and cheap

Get early feedback

Benchmark performance

Develop Early… Don’t go out building a ship, build a boat first. Web dev is cheap . Cheaper to fix bugs, cheaper to deploy, cheaper to prototype, cheaper to test. Bigger community, more tools, more source code. If windows finds a bug, it has to ship a patch to millions of PCs. It’s cheaper to spend a month testing the hell out of it than to find a bug later. Hence the waterfall cycle and release scheduling. Gmail has fixed bugs in under 24 hours! That’s fast turnaround . Simplicity is beauty. Occam’s razor : Everything should be made as simple as possible, but not simpler.

Don’t go out building a ship, build a boat first.

Web dev is cheap . Cheaper to fix bugs, cheaper to deploy, cheaper to prototype, cheaper to test. Bigger community, more tools, more source code.

If windows finds a bug, it has to ship a patch to millions of PCs. It’s cheaper to spend a month testing the hell out of it than to find a bug later. Hence the waterfall cycle and release scheduling.

Gmail has fixed bugs in under 24 hours! That’s fast turnaround .

Simplicity is beauty. Occam’s razor : Everything should be made as simple as possible, but not simpler.

… and Deploy Early Doesn’t mean you deploy a half baked design. Target a quicker launch. Features can come later. Deliver a strong core product now. You get early feedback . User feedback is a great motivator and provides insight. You can measure conversions & metrics early. Fail fast . Failing fast is failing cheaply. If your drag and drop widget layout gets a poor response, focus on higher yield features. If it gets a good response, offer more customization features.

Doesn’t mean you deploy a half baked design.

Target a quicker launch. Features can come later. Deliver a strong core product now.

You get early feedback . User feedback is a great motivator and provides insight.

You can measure conversions & metrics early.

Fail fast . Failing fast is failing cheaply. If your drag and drop widget layout gets a poor response, focus on higher yield features. If it gets a good response, offer more customization features.

DE & DE: Wrap-up Get things done economically . Don’t neglect scale and performance. What if initial design can’t scale? It’s a sign of success. Good problem to have. Continually outgrow yourself. Besides, designing for a million daily hits is diff from designing for 10K. Exceeding personal expectations is healthy . Realizing time spent was not worth it is a bummer.

Get things done economically .

Don’t neglect scale and performance.

What if initial design can’t scale? It’s a sign of success. Good problem to have. Continually outgrow yourself. Besides, designing for a million daily hits is diff from designing for 10K.

Exceeding personal expectations is healthy . Realizing time spent was not worth it is a bummer.

User Centric Design Developers like to focus on the architecture and neglect the user. Developers aren’t user friendly. Linux is developer oriented. Great for students & techies but lousy for everyone else (lawyers, chemists, parents, accountants) Apple, Microsoft spend millions on usability studies (v-buffer, icon shadows, infinite edges etc). Users first, databases later. Not a stipulation but please be considerate . “ Any sufficiently advanced technology is indistinguishable from magic.” – Arthur C. Clark

Developers like to focus on the architecture and neglect the user.

Developers aren’t user friendly.

Linux is developer oriented. Great for students & techies but lousy for everyone else (lawyers, chemists, parents, accountants)

Apple, Microsoft spend millions on usability studies (v-buffer, icon shadows, infinite edges etc). Users first, databases later.

Not a stipulation but please be considerate .

“ Any sufficiently advanced technology is indistinguishable from magic.” – Arthur C. Clark

Why AJAX The web has been longing for it. Why refresh/repaint the whole interface if the user wants to delete a single line (e.g. delete mail in GMail). A synchronous overcomes the screen refresh problem . JA vascript over comes screen repaint problem . DOM updates small bits of UI on the fly. JS also facilitates async plumbing. X ML enables data interchange. Being taken over by JSON (more later)

The web has been longing for it. Why refresh/repaint the whole interface if the user wants to delete a single line (e.g. delete mail in GMail).

A synchronous overcomes the screen refresh problem .

JA vascript over comes screen repaint problem . DOM updates small bits of UI on the fly. JS also facilitates async plumbing.

X ML enables data interchange. Being taken over by JSON (more later)

AJAX History Netscape introduced LiveScript later named JavaScript (SUN + NS) XMLHttpRequest was released as part of IE 5 (Mar, 1999). Originally developed for Outlook Web Access 2000: var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); Freed JS to talk to the outside world GMail and Google Maps brought this to the masses Came to be labelled as AJAX and gained notoriety and gave rise to a new breed of web apps Neat hacks prior to XMLHttpRequest: Progressively rendered GIF/iFrames to achieve similar affect?

Netscape introduced LiveScript later named JavaScript (SUN + NS)

XMLHttpRequest was released as part of IE 5 (Mar, 1999). Originally developed for Outlook Web Access 2000: var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

Freed JS to talk to the outside world

GMail and Google Maps brought this to the masses

Came to be labelled as AJAX and gained notoriety and gave rise to a new breed of web apps

Neat hacks prior to XMLHttpRequest: Progressively rendered GIF/iFrames to achieve similar affect?

The X in AJAX XML used as data interchange XML to manage and manipulate data Early demos used JS to render XML as HTML formatted pages XHTML allowed the DOM to be predictable and proper JSON is now preferred for many scenarios JSON is intuitive and fast. Can pass objects between PHP/ASP/etc and JS XML has overheads: parsing, validating, converting to object, updating in-memory XML Tree and converting back to XML string Working with Person object simpler than an XML representation

XML used as data interchange

XML to manage and manipulate data

Early demos used JS to render XML as HTML formatted pages

XHTML allowed the DOM to be predictable and proper

JSON is now preferred for many scenarios

JSON is intuitive and fast. Can pass objects between PHP/ASP/etc and JS

XML has overheads: parsing, validating, converting to object, updating in-memory XML Tree and converting back to XML string

Working with Person object simpler than an XML representation

AJAX is fast AJAX requests are small. Can updates a single line instead of the whole page. Granular updates . The bigger the page, higher the performance gain.

AJAX requests are small. Can updates a single line instead of the whole page. Granular updates .

The bigger the page, higher the performance gain.

Leads to better design Leads to better design. Server/Client decoupling . Web Services model. RESTful architecture simply works ( GET/POST/PUT over HTTP ). No firewall issues etc. Promotes good API design . GMail has a great web API. Works cross-platform : to GTalk (Desktop client), Google ig (Web), iPhone (OS X gadget), etc. Has led to a lot of cross-browser libraries/APIs: Prototype, JQuery, MooTools, Dojo, Scriptaculous (use transitions/animations sparingly). Fewer HTTP connections to server to download js/css only once.

Leads to better design. Server/Client decoupling . Web Services model.

RESTful architecture simply works ( GET/POST/PUT over HTTP ). No firewall issues etc.

Promotes good API design . GMail has a great web API. Works cross-platform : to GTalk (Desktop client), Google ig (Web), iPhone (OS X gadget), etc.

Has led to a lot of cross-browser libraries/APIs: Prototype, JQuery, MooTools, Dojo, Scriptaculous (use transitions/animations sparingly).

Fewer HTTP connections to server to download js/css only once.

Limitations AJAX request limited to current domain (just like cookies) to avoid security hacks Dynamically rendered/updated pages have no browser history or bookmarking . Can be worked around using URL fragments # which update URL without refreshing the page) Web Crawlers cannot get to content (neither can email harvesters)

AJAX request limited to current domain (just like cookies) to avoid security hacks

Dynamically rendered/updated pages have no browser history or bookmarking . Can be worked around using URL fragments # which update URL without refreshing the page)

Web Crawlers cannot get to content (neither can email harvesters)

AJAX Demo Simple server/client (client.php, script.js) JSON (emails.php, scriptc.js) Prototype.js (Protoclient.js)

Simple server/client (client.php, script.js)

JSON (emails.php, scriptc.js)

Prototype.js (Protoclient.js)

Performance (big ones) Use GZIP Compression .htaccess, ASP/PHP The web is mostly text data which is great for compression Smart Caching Leverage client caching (HTTP expires header) Use cached HTML instead of re-rendering ASP/PHP pages If you aren’t doing these two and focusing on other optimizations, you may want to reconsider

Use GZIP Compression

.htaccess, ASP/PHP

The web is mostly text data which is great for compression

Smart Caching

Leverage client caching (HTTP expires header)

Use cached HTML instead of re-rendering ASP/PHP pages

If you aren’t doing these two and focusing on other optimizations, you may want to reconsider

Performance Be wary of JS memory leaks Preloading images in the background (flickr). Performance is client oriented (even though image may never be loaded). Using caching and expiration smartly (set expire 10 years ahead to utilize client caching) Be wary of load order of page elements. Load content first then focus on loading advertisements etc. Again, user-centric design. Optimize Images (JPEG quality, GIF color palette). Use Progressive rendering. Break up large images into multiple images (allows parallel loading)

Be wary of JS memory leaks

Preloading images in the background (flickr). Performance is client oriented (even though image may never be loaded).

Using caching and expiration smartly (set expire 10 years ahead to utilize client caching)

Be wary of load order of page elements. Load content first then focus on loading advertisements etc. Again, user-centric design.

Optimize Images (JPEG quality, GIF color palette). Use Progressive rendering. Break up large images into multiple images (allows parallel loading)

Usability Inverse pyramid writing style. Conclusion of article first, details later Page above screen fold (no scrolling required) is prime real estate Use live bread crumbs (live meaning they can be clicked) Keep the information hierarchical and menus nested (organized navigation will automatically promote organized design) Users should know where they are, how they got there and where they can go from here. Give users context . Be wary of fonts faces, good use of white space, long lines User friendly errors (users don’t understand .NET or SQL errors)

Inverse pyramid writing style. Conclusion of article first, details later

Page above screen fold (no scrolling required) is prime real estate

Use live bread crumbs (live meaning they can be clicked)

Keep the information hierarchical and menus nested (organized navigation will automatically promote organized design)

Users should know where they are, how they got there and where they can go from here. Give users context .

Be wary of fonts faces, good use of white space, long lines

User friendly errors (users don’t understand .NET or SQL errors)

Wrap Up Rethink the way you are developing web apps and target quick a launch Design should be user-centric Start using AJAX Evaluate and adopt a library (prototype.js). Build APIs Start using compression ( GZIP ) Use smarter Caching

Rethink the way you are developing web apps and target quick a launch

Design should be user-centric

Start using AJAX

Evaluate and adopt a library (prototype.js). Build APIs

Start using compression ( GZIP )

Use smarter Caching

Thank you Contact me at [email_address] Slides will be sent via email Please provide your email addresses. We won’t send more than 2 emails to you asking you if you are interested in continuing the discussion

Contact me at [email_address]

Slides will be sent via email

Please provide your email addresses. We won’t send more than 2 emails to you asking you if you are interested in continuing the discussion

Add a comment

Related presentations

Related pages

Web Design, Brisbane Southside specialists - Developing Web

Web design brisbane southside and northside areas, Developing web focuses on website development, website design, website seo and website applications.
Read more

Developing Web SDK applications for Skype for Business ...

This section shows how to develop a Skype Web SDK client application for Skype for Business Online. As a prerequisite, you will need to have a ...
Read more

Developing TheWeb.com

Reliable & efficient web hosting, specialising in Moodle hosting
Read more

Web development - Wikipedia

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network).
Read more

Developing Web Apps with SAPUI5 - | openSAP

Thilo is a UI5 developer focusing on developer experience and rollout activities. He has been developing for the Web for more than 10 years, and is ...
Read more

Developing Web Components: ebook jetzt bei weltbild.de

eBook Shop: Developing Web Components als Download. Jetzt eBook sicher bei Weltbild runterladen & bequem mit Ihrem Tablet oder eBook Reader lesen.
Read more

Web Developing - B2K Media - Webdesign Berlin | Agentur ...

Über uns. Professionelles Webdesign für Unternehmen und Unternehmer. Wir als Internetagentur gestalten und programmieren Internetseiten und sorgen für ...
Read more

Course 10264A: Developing Web Applications with Microsoft ...

This course is intended for professional Web developers who use Microsoft Visual Studio in a team-based, medium-sized to large development environment.
Read more

Compass: A Lesson in the Pen Tool in Illustrator 10

Web DW-Main DW-Photoshop : RSS Newsfeed for your site: DW News: Calendar: DW Forum ... Developing Webs Group Copyright © 2001-2016 All Rights Reserved
Read more

Microsoft Web Platform – free tools for creating websites

The Microsoft® Web Platform offers the right tools for the right task. Design, build, debug, and deploy websites with Visual Studio Community 2015.
Read more