Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
-
Upload
miguel-lopez -
Category
Design
-
view
214 -
download
2
description
Transcript of Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Beauty and the BeastA Practical Approach to Standards-Based, Beautiful Web Designs
Miguel LopezSolidQ: www.solidq.comBlog: www.augurarte.com
“ Mirror, mirror, on the wall, Who in
this land is fairest of all? ”
Little Snow-White byJacob and Wilhelm Grimm
Agenda…
Once Upon a Time…Beauty and the BeastOuter BeautyInner BeautyInner Beauty in action Beauty measured: W3C, WCAG, WAIDynamic designs using XML, XSLT, XPath
Once Upon a Time…Introducing the concept & importance of beauty even in a Web developer's/designer's life
“ Once Upon a Time there was
a beautiful girl…”
but…
What is this session about?
1• Idea, problem
2 • Design, solution
3 • Implementation
4 • Deployment
IE is no more the King…
“ In a small village nearby, a beautiful young woman named
Belle…”
but…
(CC) Cuppini (flickr)
Beauty?
In people…
In nature…
quality of things that makes us love them,
instilling spiritual delight
Beauty & the Beast…Identifying beauty & ugly Web interfaces
And what about Web designs…?
What makes a Web Page beautiful?Are they images?Is it text?Is it navigation?Is it composition?Is it blank space?What is it?
A mixture of factors…
Easy of use How?Easy of structure What?Clear understanding of the offer/product/services What?Good and identifiable navigation Where?
… and what’s about usability?
3questions?
Where am I?
What’s here?
Where can I go?
how to fall in love in front of a Web Page…
Demo 1
?
?
?
?
?
?
?
Outer BeautyWhat we see, we evaluate, we like/dislike…
Outer Beauty in Nature…(
aesthetics – façade
)
(CC) Naama in Flickr
Outer Beauty in People(
aesthetic – façade
)
Source: www.ecodiario.es
Source: www.happycog.com (Jeffrey Zeldman)
Outer Beauty in Websites ( Front Page – façade)
Apparently, goodlooking Web Pages…
Demo 2
Inner BeautyGoing further, knowing a little bit more about what we are looking at
Inner Beauty in Nature
(inside –
estructure)
(CC) audreyjm529 on Flickr
Source: swami.blogspace.fr
Inner Beauty in People
(value – charism
)
Source: www.happycog.com (Jeffrey Zeldman)
Inner Beauty in Websites ( Front Page – façade)
Semantic tags,
No tables,
Well indented
Looking into your soul… not so goodlooking Web page!
Demo 3
HTML Incompatibility Detected!
Inner Beauty in ActionGoing further, knowing a little bit more about what we are looking at
Basic principles…
WORDS
• structurePICT
URES
•presentation
CODE
•behavior
(X)HTML
CSS, XSLT
ECMAScript
WEB =
Ʃ (X)HTML + CSS
+ ECMAScript
So remember…
Basic Architecture in three layers:
(X)HTML for structure and basic contents
CSS for presentational issues
(Non-intrusive) JavaScript for behavior
A better desing, outer & inner beauty compliance
Demo 4
Web Beauty MeasuredStandards in Web Design: (X)HTML, CSS, ECMAScript
How we measure beauty?
In design
Greek philosophyEgyptian knowledge
proportion, cannons…
Gestalt…
On the Web…?
JavaScript
CSSW3C
(X)HTML
XML
XSLT
XPath MathMLWSDL
XFormsSOAP
RDF
PNG
DOMOWL
SMIL
Transforming bad code into good Web Standard code
Demo 5
Dynamic design using XML, XSLT, XPathand Microsoft Expression Web XML Authoring tools
design can also be connected to data not only contained in content
documents (HTML) or databases (SQL Server)
eXtensible Markup Language
aka
XML
XMLXSL, XPath
There are also W3C standards!
easy
With Expression Web (data
views)
Going further: Dynamic Designs based on XML with XSLT
Demo 6
&Summing Up…
Beauty is important in Web Design & Development.Designing Web interfaces with standards in mind is a must-to (not avoidable, sorry!).Creating Web interfaces with standards in the first steps of development reduce compatibility issues at the delivery phase.Do a semantic use of the (X)HTML, is the right way.Layouts: Doing it with tables is not easier.
More info & resources…
All standards… http://www.w3.orgBeautiful examples of XHTML/CSS: http://www.cssgarden.comExamples, articles, tutorials… http://expression.microsoft.com/es-es/default(en-us).aspx Basic knowledge about Web Standards… http://www.w3schools.com Web Standards Project: http://www.webstandards.org/ My Weblog: http://www.augurarte.com
Some Interesting books…
Designing with Web standards (J.Zeldmand)Designing Web Usability (J. Nielsen)Don’t Make Me Think (Steve Krug)Guía Práctica Expression Web (Miguel López)
“…You, my queen, are fair; it is true.
But the young queen is a thousand times
fairer than you ”Little Snow-White byJacob and Wilhelm Grimm
Thank you allAnd they all lived happily ever after, and that is the end of the story
Question & Answer
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.