Hello, good morning, evening, afternoon… welcome everybody wherever part of the world you are.My name is Miguel Lopez
Going to the point…There are may different definitions of beauty depending of the culture we are considering. In this case I have chosen the one made it by the Royal Academy of Language in Spain, that defines beauty as The Quality of things that makes us love them, instilling spiritual delight and Adds…This quality exists in nature and in artistic and literary pieces“ And yes my friends!, the good news are that we can also consider our web pages design artistic pieces in someway! We all are artists too!
Lets try to translate this definition and thoughts about beauty to our daily work as developers or designers…
Vietnam, July 13th, 2008.- Dayana Mendoza (Miss Venezuela) was crown as the most beautiful woman in the universe in this year edition (2008).
In this Web, all the site has been very carefully designed: Design. Information architecture. Ascetics. Functionality. Goals/Message. Target audience.… they are a reference company in Web design with standards
Mother Teresa of Calcutta has been recognized in the whole world by her goodness, her sacrifice with poor people in India, her charisma… all are inner beauty qualities very appreciated too as part of the whole of beauty
En esta Web se ha cuidado sobremanera:El diseño.La arquitectura de la información.La estética.La funcionalidad.El mensaje.El público objetivo.… son una empresa líder en diseño Web con estándares…
Demo 3: Looking into your soul… not so good-looking Web page!(5’)We will cover…With Microsoft Expression Web, open and see the code of last example.Note the lines of (X)HTML Code. Note about design tags inline with (X)HTML, difficult to maintenance.The worst of all passing validation tools (W3C), more than 1.000 standards errors.
Demo 4: Better design, outer & inner beauty compliance (5’)We will cover…With Microsoft Expression Web, open and see the code of example re-coded with standards...Note the lines of (X)HTML Code. Note about the CSS reference (design).Note about no inline presentational tags, real separation of structure, design and behavior Easy to maintenance.The best of all passing all validation tools (W3C), no compatibility errors.
Demo: Transforming bad code into good Web Standard code 10-12 minutes- Example of well structure of (X)HTML Code.- Example of the use of <div>, Id’s and classes (CSS). Example of Semantic events. Example of testing accessibility guidelines in Microsoft Expression Web.
- Example of dragging & dropping & setting up a XML file into a (X)HTML file using Data Views With Expression Web.- Example of the use of filters with Data Views. Example of XSLT (presentation) of data of XML files.
Demo 6Going further: Dynamic Designsbased on XML with XSLT
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.org Beautiful examples of XHTML/CSS: http://www.cssgarden.com Examples, 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 queenis a thousand times fairer than you ” by Little Snow-White Jacob and Wilhelm Grimm
Thank you allAnd they all lived happily ever after, and thatis the end of the story