Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q


Published on

Miguel López's talk in Virtual TechDays 2009, about A Practical Approach to Standards-based, Beautiful Web Designs

Published in: Design, Technology
1 Comment
  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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.
  • Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q

    1. 1. Beauty and the BeastA Practical Approach to Standards-Based, Beautiful Web Designs Miguel Lopez SolidQ: Blog:
    2. 2. “ Mirror, mirror, on the wall, Who inthis land is fairest of all? ” Little Snow-White by Jacob and Wilhelm Grimm
    3. 3. Agenda… Once Upon a Time… Beauty and the Beast Outer Beauty Inner Beauty Inner Beauty in action Beauty measured: W3C, WCAG, WAI Dynamic designs using XML, XSLT, XPath
    4. 4. Once Upon a Time…Introducing the concept & importance of beautyeven in a Web developers/designers life
    5. 5. “ Once Upon a Time there wasa beautiful girl…”
    6. 6. but…
    7. 7. What is this session about? 1 2 3 4
    8. 8. IE is no more the King…
    9. 9. “ In a smallvillage nearby, abeautiful young woman named Belle…”
    10. 10. but…
    11. 11. Beauty?(CC) Cuppini (flickr)
    12. 12. In people…
    13. 13. In nature…
    14. 14. quality of things that makes us love them, instilling spiritual delight
    15. 15. Beauty & the Beast…Identifying beauty & ugly Web interfaces
    16. 16. 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?
    17. 17. 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?
    18. 18. questions
    19. 19. Where am I
    20. 20. What’s here
    21. 21. Where can I go
    22. 22. Demo 1how to fall in love in front ofa Web Page…
    23. 23. Outer BeautyWhat we see, we evaluate, we like/dislike…
    24. 24. Outer Beauty in Nature… ( aesthetics – façade ) (CC) Naama in Flickr
    25. 25. Outer Beauty in People ( aesthetic – façade ) Source:
    26. 26. Outer Beauty in Websites ( Front Page – façade)
    27. 27. Demo 2Apparently, goodlookingWeb Pages…
    28. 28. Inner BeautyGoing further, knowing a little bit more aboutwhat we are looking at
    29. 29. Inner Beauty in Nature ( inside – estructure )(CC) audreyjm529 on Flickr
    30. 30. Inner Beauty in People ( value – charism ) Source:
    31. 31. Inner Beauty in Websites ( Front Page – façade)
    32. 32. Demo 3Looking into your soul… notso goodlooking Web page!
    33. 33. HTML Incompatibility Detected!
    34. 34. Inner Beauty in ActionGoing further, knowing a little bit more aboutwhat we are looking at
    35. 35. Basic principles… WORDS • structure (X)HTML PICTURES • presentation CSS, XSLT CODE • behavior ECMAScript
    36. 36. WEB =Ʃ (X)HTML + CSS + ECMAScript
    37. 37. So remember… Basic Architecture in three layers: (X)HTML  for structure and basic contents CSS  for presentational issues (Non-intrusive) JavaScript  for behavior
    38. 38. Demo 4A better desing, outer &inner beauty compliance
    39. 39. Web Beauty MeasuredStandards in Web Design:(X)HTML, CSS, ECMAScript
    40. 40. How wemeasurebeauty?
    41. 41. In design Greek philosophy Egyptian knowledge proportion, cannons… Gestalt …
    42. 42. On theWeb…?
    44. 44. Demo 5Transforming bad code intogood Web Standard code
    45. 45. Dynamic design usingXML, XSLT, XPathand Microsoft Expression Web XML Authoringtools
    46. 46. design can also beconnected to data notonly contained in content documents (HTML) ordatabases (SQL Server)
    47. 47. eXtensible Markup Language aka XML
    48. 48. XML XSL, XPathThere are also W3C standards!
    49. 49. easyWith ExpressionWeb (data views)
    50. 50. Demo 6Going further: Dynamic Designsbased on XML with XSLT
    51. 51. 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.
    52. 52. More info & resources… All standards… Beautiful examples of XHTML/CSS: Examples, articles, tutorials… us).aspx Basic knowledge about Web Standards… Web Standards Project: My Weblog:
    53. 53. 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)
    54. 54. “…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
    55. 55. Thank you allAnd they all lived happily ever after, and thatis the end of the story
    56. 56. Question & Answer
    57. 57. © 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 marketconditions, 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.