Your SlideShare is downloading. ×
0
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Techdays 2009 beauty_and_thebeast_v1.0_final_audio_1-solid_q

227

Published on

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

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
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
227
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

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

    ×