DOCSLIB.ORG

Bulletproof Web Design

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Bulletproof Web Design Bulletproof Web Design Web Bulletproof Bulletproof Improving flexibility and protecting against Web worst-case scenarios with HTML5 and CSS3 Design THIRD EDITION No matter how visually appealing or content packed a web site may be, Dan Cederholm is if it doesn’t reach the widest possible audience, it isn’t truly successful. a designer, author, speaker, husband, Bulletproof In Bulletproof Web Design, Third Edition, bestselling author and web and father living designer Dan Cederholm outlines standards-based strategies for building in Massachusetts. designs that can accommodate the myriad ways users choose to view He’s the Founder and Principal of SimpleBits LLC, a the content. Each chapter starts out with an example of an unbulletproof tiny design studio. A recognized worst-case scenarios with HTML5 and CSS3 with HTML5 scenarios worst-case against and protecting flexibility Improving approach—one that employs traditional HTML-based techniques—which expert in the field of standards- Dan deconstructs, pointing out its limitations. He then gives the example based web design, Dan has worked Web with YouTube, Microsoft, Google, a makeover using HTML and CSS, so you can learn to replace bloated code MTV, ESPN, Electronic Arts, Blogger, with lean markup and CSS for fast-loading sites that are accessible to all Fast Company, Inc. Magazine, and users. Finally, he assembles all of the page components discussed in prior others. Dan is co-founder and designer of Dribbble, a vibrant chapters into a single-page template. This fully revised and updated third community for sharing screenshots of your work. His other bestselling Design edition introduces CSS3 and HTML5 methods and features redesigned case studies including new responsive design examples. books include CSS3 For Web Designers and Handcrafted CSS: Size text using keywords, percentages, and ems to allow more user control. More Bulletproof Web Design. He’s currently an aspiring clawhammer Improving flexibility and protecting Plan for vertical expansion of horizontal page components. banjoist and occasionally wears a baseball cap. Use floats to achieve grid-like results. against worst-case scenarios E THIR D Ensure that content is still readable in the absence of images or CSS. I T ION D Strip the presentation from data tables, and rebuild with CSS. with HTML5 and CSS3 Progressively enhance your designs using HTML5 and CSS3. Cederholm THIRD EDITION Visit the companion website at simplebits.com/bulletproof to download finished files, additional resources, and book updates. Dan Cederholm US $44.99 CAN $46.99 ISBN-13: 978-0-321-80835-6 ISBN-10: 0-321-80835-5 www.newriders.com 54499 Book Level: Intermediate / Advanced Computer Book Shelf Category: Web Design / Web Development / Scripting 9 780321 808356 Covers: CSS and HTML scripting on Windows, Mac OS, and Unix and Dan Cederholm Design: Mimi Heft Cover Bulletproof Web Design Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 Third Edition Dan Cederholm Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3, Third Edition Dan Cederholm New Riders 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the web at: www.newriders.com To report errors, please send a note to: [email protected] New Riders is an imprint of Peachpit, a division of Pearson Education. Copyright © 2012 by Daniel Cederholm Editor: Rebecca Gulick Copy Editor: Liz Merfeld Technical Reviewer: Patrick H. Lauke Proofreader: Patricia Pane Production Coordinator and Compositor: Danielle Foster Indexer: Valerie Haynes Perry Cover Designers: Mimi Heft and Dan Cederholm Interior Designers: Charlene Will and Maureen Forys Notice of Rights All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact [email protected]. Notice of Liability The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it. Trademarks Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book. ISBN-13: 978-0-321-80835-6 ISBN-10: 0-321-80835-5 9 8 7 6 5 4 3 2 1 Printed and bound in the United States of America For Jack & Tenley. Acknowledgments To Michael Nolan for connecting me with New Riders as well as helping me solidify the concept of the book early on. Similarly, big thanks also go to the late, great Marjorie Baer for her guidance at the beginning of the project. To Dave Roberts for stealing second. To everyone at Peachpit who was involved in this book in some way, but especially Rebecca Gulick for steering the entire project, making the entire process as smooth as possible. To Ethan Marcotte for being an excellent technical editor on the first edition. It was great to work with Ethan on this, and his comments and insight were invaluable. Thanks also to Virginia DeBolt for tech-editing the second edition and Patrick H. Lauke for tech-editing the third edition. To my colleagues who continue to provide inspiration, sharing their tech- niques and knowledge, on and off line. This book wouldn’t have been written if it weren’t for the previous work of the following (as well as many more who I’m forgetting to mention here): John Allsopp, Dan Benjamin, Holly Bergevin, Douglas Bowman, Andy Budd, Tantek Çelik, Joe Clark, Andy Clarke, Mike Davidson, Todd Dominey, Jason Fried, John Gallant, Patrick Griffiths, Jon Hicks, Molly Holzschlag, Shaun Inman, Ryan Irelan, Richard Ishida, Roger Johansson, Jeremy Keith, Ian Lloyd, Drew McLellan, Eric Meyer, Cameron Moll, Matt Mullenweg, Mark Newhouse, Dunstan Orchard, Veerle Pieters, D. Keith Robinson, Richard Rutter, Jason Santa Maria, Christopher Schmitt, Dave Shea, Ryan Sims, Greg Storey, Jeffrey Veen, Josh Williams, and Jeffrey Zeldman. Special thanks to Jon Hicks for creating the original 3D CSS Box Model Illustration (www.hicksdesign.co.uk/3dboxmodel/), which inspired those found in the book. To the readers and clients of SimpleBits, you’ve made it possible for me to work on things I love. To the Greater Beverly Adult Dodgeball league, for providing a necessary escape every Tuesday evening at 7:30. To my always amazingly supportive parents, my brother Matt and his family, and the rest of my extended family and friends. And as always, to my partner in crime, Kerry, for being the rock star wife that she is. Lastly, thank you for reading. Contents Introduction. xiii CHAPTERONE Flexible Text. .1 Size text using keywords and percentages or ems to allow user control and maximum flexibility.. 2 A Common Approach . 3 Why it’s not bulletproof. 4 Weighing Our Options . 6 Length units . 6 Relative-size keywords . 6 Percentages. 7 Absolute-size keywords . 7 A Bulletproof Approach. 8 Keywords explained. 8 Letting go of “pixel precision” . 9 Why It’s Bulletproof . 10 A Flexible Base. Now What? . 10 Set it and forget it . 10 Use percentages to stray from the base. .11 Working with Keywords and Percentages . 15 Setting an in-between keyword base. 15 Be careful when nesting percentages . 17 Experiment with percentage values for consistency. 18 Flexible Text Using Ems . 20 The rem unit . 22 Summary . 23 vi Contents CHAPTERTWO Scalable Navigation. 25 Provide site navigation that scales to any text size or content amount. 26 A Common Approach . 27 Strong tabs. 27 Common rollovers . 28 Why It’s Not Bulletproof . 29 Mountains of code. 29 Inaccessibility issues . 29 Scalability issues . 30 Lack of flexibility . 30 A Bulletproof Approach. 30 Sans style . 31 Two tiny images . 31 Applying style. 32 Float to fix. 33 Making the tabs take shape . 34 Aligning the background images . 35 Adding the bottom border . 37 Hovering swap . 38 Selected state. 38 Why It’s Bulletproof . 39 An Imageless Variation Using CSS3 Gradients . 40 A Variation Using Ems . 44 Additional Examples . 46 Mozilla.org . 46 Slants . 46 ESPN.com Search. 47 Summary . 49 Contents vii CHAPTERTHREE Expandable Rows. .51 Resist specifying height and plan for vertical expansion of horizontal page components. 52 A Common Approach . 53 Why It’s Not Bulletproof . 54 Nonessential graphics. 54 Thinking in fixed height. 55 Code bloat . 55 A Bulletproof Approach. 56 The markup structure . 56 Identifying the pieces . 57 Sans style . 57 Adding background. 58 Positioning the content. 59 Missing background . 60 Adding the details . 62 Four rounded corners . 64 Text and link details. 65 The final step . 67 A fix for IE7 . 69 Why It’s Bulletproof . 70 Separation of structure and design . 70 No more fixed heights . 71 A variation using border-radius . 72 Another Example of Expanding. 74 The markup . 75 Creating the two images . 76 Applying the CSS . 77 Expand-o-matic . 79 Summary . 79 viii Contents CHAPTERFOUR Creative Floating. 81 Use floats to achieve grid-like results.. 82 A Common Approach . 83 Why It’s Not Bulletproof .
Load more

Recommended publications
  • John Athayde and Bruce Williams — «The Rails View
    What readers are saying about The Rails View This is a must-read for Rails developers looking to juice up their skills for a world of web apps that increasingly includes mobile browsers and a lot more JavaScript. ➤ Yehuda Katz Driving force behind Rails 3.0 and Co-founder, Tilde In the past several years, I’ve been privileged to work with some of the world’s leading Rails developers. If asked to name the best view-layer Rails developer I’ve met, I’d have a hard time picking between two names: Bruce Williams and John Athayde. This book is a rare opportunity to look into the minds of two of the leading experts on an area that receives far too little attention. Read, apply, and reread. ➤ Chad Fowler VP Engineering, LivingSocial Finally! An authoritative and up-to-date guide to everything view-related in Rails 3. If you’re stabbing in the dark when putting together your Rails apps’ views, The Rails View provides a big confidence boost and shows how to get things done the right way. ➤ Peter Cooper Editor, Ruby Inside and Ruby Weekly The Rails view layer has always been a morass, but this book reins it in with details of how to build views as software, not just as markup. This book represents the wisdom gained from years’ worth of building maintainable interfaces by two of the best and brightest minds in our business. I have been writing Ruby code for over a decade and Rails code since its inception, and out of all the Ruby books I’ve read, I value this one the most.
    [Show full text]
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work This version: http://www.w3.org/TR/2011/REC-CSS2-20110607 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/PR-CSS2-20110412 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Latest editor's draft: http://dev.w3.org/csswg/css2/ Editors: Bert Bos <BERT @w3.org> Tantek Çelik <TANTEK @cs.stanford.edu> Ian Hickson <IAN @hixie.ch> Håkon Wium Lie <HOWCOME @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C LIABILITY, TRADEMARK AND DOCUMENT USE rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spac- ing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] p. 284 which builds on CSS1 [CSS1] p. 283. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also sup- ports content positioning, table layout, features for internationalization and some properties related to user interface.
    [Show full text]
  • Longwick Cum Ilmer Parish Council Accessibility Statement
    Longwick cum Ilmer Parish Council Accessibility Statement Reviewed and adopted October 2020 The Parish Council is committed to ensuring digital accessibility for people with disabilities in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018. We are continually improving the user experience for everyone, and applying the relevant accessibility standards. Measures to support accessibility The Parish Council takes the following measures to ensure accessibility of the Parish Council’s website: Accessibility Help – Change the way this website looks – Using tools on your computer You can control the look and functionality of this website, depending on your computer settings. Most computers will have accessibility settings you can change including the way the screen looks (e.g. changing; fonts, sizes, colours, etc), the way the keyboard or mouse works and possibly speaking and listening to commands as well as a range of other features. If you’re a regular computer user in Windows – click on the ‘Start’ button, then ‘Settings’, then ‘Ease of Access’. As several organisations have already produced lots of very good content about how to make computers and websites more accessible, we have linked to these sites rather than duplicate their content. My Web My Way produced by the BBC is a comprehensive site with loads of useful information and a wealth of accessibility links. AbilityNet has advice on making your device easier to use if you have a disability. Your browser will usually have controls which you can use to enlarge the text on your screen. The Web Content Accessibility Guidelines (WCAG) defines requirements for designers and developers to improve accessibility for people with disabilities.
    [Show full text]
  • Foundation Website Creation with HTML5, CSS3, and Javascript
    Foundation Website Creation with HTML5, CSS3, and JavaScript Jonathan Lane, Tom Barker, Joseph R. Lewis, and Meitar Moscovitz FOUNDATION WEBSITE CREATION WITH HTML5, CSS3, AND JAVASCRIPT Copyright © 2012 by Jonathan Lane, Tom Barker, Joseph R. Lewis, and Meitar Moscovitz This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher's location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN 978-1-4302-3789-1 ISBN 978-1-4302-3790-7 (eBook) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
    [Show full text]
  • The Zen of CSS Design: Visual Enlightenment for the Web by Dave Shea and Molly E
    The Zen of CSS Design: Visual Enlightenment for the Web by Dave Shea and Molly E. Holzschlag Reviewed by John Davey Almost any list of references to websites about cascading style sheets (CSS), including the resources page of the PACS CSS Workshop, http://www.jadavey.net/PACS_CSS/, will include a link to css Zen Garden: The Beauty in CSS Design, http://www.csszengarden.com/. The premise of the site is simple. Webmaster Dave Shea posted a plain HTML document and challenged users to style it without changing any of the tags. The execution of that idea was not simple, though--it took a fine sense of web design concepts and a lot of forethought to tag the page with the hooks that designers would need. The result was stunning. The site quickly developed into a varied collection of creative designs that stretch the envelope of CSS, but within the bounds of valid coding. As of this writing, there are 645 submissions in the site's archive, an outstanding example of creativity and online collaboration. The project has yielded so much material that it is difficult to take it all in. And it takes a keen eye to parse the stylesheets and understand how the designs were created. Dave Shea and co-author Molly Holzschlag have performed a fine service to the web design community by compiling a review of thirty-six of the submissions into a well-organized guide to advanced design techniques. The Zen of CSS Design is divided into seven chapters. The first is a brief but informed review of the development of web standards, leading to the idea of the Zen Garden site.
    [Show full text]
  • Guides/Useraccessand Control/Addinganddeletinguser
    10/31/2016 Fastly Help Guides These service guides reflect the current version of the Fastly web interface. Service guides for the next web interface can be accessed at × docs­next.fastly.com (https://docs­next.fastly.com). For more information see our announcement (/changes/2016/07/20/special). Generated: Mon, 31 Oct 2016 19:31:31 +0000 Fastly Help Guides • Guides (/guides/) > Account management (/guides/accounts) > User access and control (/guides/user­access­and­control/) § Adding and deleting user accounts (/guides/user­access­and­ control/adding­and­deleting­user­accounts) Fastly allows you to add users to your account and assign them different roles (/guides/user­access­and­control/user­roles­and­how­to­change­ them), delete user accounts when you no longer want them to have access, or add existing users to existing accounts. IMPORTANT: You must be assigned the role of super user (/guides/user­access­and­control/user­roles­and­how­to­change­them) in order to add or delete user accounts. Adding new account users TIP: Adding a new user to make them the billing contact for your account? Follow our billing contact instructions (/guides/account­types­and­ billing/who­receives­your­bill#changing­who­receives­your­bill) instead. To add a user to your account, send them an invitation to join following the steps below: 1. Log in to the Fastly application. 2. Click the account tab to access your Account Settings. 3. In the User Invitations area, click the Invite button. The Invite User window appears. 4. In the Email field, type the email address of the user you'd like to invite.
    [Show full text]
  • An Interview with Dave Shea, CSS Zen Gardener
    Interview with Dave Shea Bruce Lawson An interview with Dave Shea, CSS Zen gardener. You might not recognize the name, but if you're a serious web professional, you'll know the site: CSS Zen Garden. It's a simple idea; provide the mark-up and allow people to submit various CSS designs to style the page. It immediately mirrored the zeitgeist, and has attracted some top graphic designers and inspired hundreds of web professionals to learn CSS. Why? now we can see what artists and graphic designers can do with CSS, rather than the early, rather boxy designs that the mark-up freaks were using. Thus, The ZenGarden is both gallery and manifesto. Dave writes, "There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation." So, who is Dave Shea? DMXzone's Bruce Lawson caught up with him over the weekend.. It's uncommon for CSS freaks to be designers. Why are you a 'CSS evangelist'? Like Doug, Todd, Kris, and Paul, I recognize that CSS-based design is not inherently ugly. It's just that the right people don't understand it yet. Look at the fundamental difference between creating a prepress file (or vector illustration or Quicktime movie or whatever) and creating CSS. Everything a designer does on a computer is GUI-driven; we need WYSIWYG to function. But CSS is code. It's a whole different world, and that's why it isn't catching on: you have to be half-geek to get it.
    [Show full text]
  • Foundation Website Creation with CSS, XHTML, and Javascript
    Foundation Website Creation with CSS, XHTML, and JavaScript Jonathan Lane Meitar Moscovitz Joseph R. Lewis Foundation Website Creation with CSS, XHTML, and JavaScript Copyright © 2008 by Jonathan Lane, Meitar Moscovitz, Joseph R. Lewis All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-0991-1 ISBN-13 (electronic): 978-1-4302-0992-8 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected], or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected], or visit www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles.
    [Show full text]
  • Adaptive Web Design: Crafting Rich Experiences with Progressive
    ADAPTIVE WEB DESIGN Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson Chattanooga, Tennessee ADAPTIVE WEB DESIGN Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson Easy Readers, LLC PO Box 4370 Chattanooga, Tennessee 37405 USA http://easy-readers.net Please send errors to [email protected] Editor: Krista Stevens Project Manager: Kelly McCarthy Interior Layout: Jessi Taylor Cover Design: Veerle Pieters Technical Editors: Craig Cook and Derek Featherstone Indexer: Jessica Martin Copyright © 2011 Aaron Gustafson All rights reserved ISBN 978-0-9835895-2-5 Library of Congress Control Number: 2011929159 First Edition Printed and bound in the United States of America For Kelly v ACKNOWLEDGEMENTS Without the mentorship and assistance of so many of my friends and colleagues in this industry, not only would this book have never been written, but I would not have been in a position to write it. I’d like to take a moment to extend them my sincerest gratitude: To Molly Holzschlag and Jeffrey Zeldman for taking me under their wings and helping hone my skills as both a speaker and writer. And to the numerous conference organizers and publications who’ve given me the opportunity to apply those skills. To Carolyn Wood for helping shape some of my early drafts and to Krista Stevens for finding the crux of my arguments, streamlining my prose, and taming my inner wiseass. To Craig Cook and Derek Featherstone for keeping my code on the straight and narrow and to the handful of early reviewers for giving me thoughtful advice (and corrections): Dan Cederholm, Simon Collison, Kristina Halvorson, Christian Heilmann, Whitney Hess, Jeremy Keith, Dan Rubin, and Jonathan Snook.
    [Show full text]
  • Dave Shea & Molly Holzschlag
    Dave Shea & Molly Holzschlag © Groupe Eyrolles, 2006, pour la présente édition, ISBN : 2-212-11699-3 00I-0IX debut.indd i 7/10/05 16:42:43 Code source Le web de la fi n des années 1990, c’était la jungle, un nouveau territoire à explorer. On y trouvait de tout, et tout s’y pratiquait. À cette époque, aucun de nous ne savait vraiment dans quelle direction s’orientait le Web. Comme c’est souvent le cas avec un nouveau jouet, nous étions très occupés à en tester les limites. Genèse Nous avons donc poussé les limites, toujours plus loin. Au départ, HTML était un langage simple destiné à baliser des mémoires de recherche. Il ne permettait pas de défi nir la mise en page, c’est pourquoi les graphistes et les éditeurs de navigateurs l’ont d’abord dédaigné. Pour combler ces lacunes de mise en page, des trucs et astuces furent mis au point, notam- ment par l’emploi détourné de balises <FONT> et d’éléments de tableau. Or, ces bidouillages vont à l’encontre de l’objectif premier du HTML qui est un langage structurel. Ainsi, on a utilisé des éléments de base à contre-emploi, tout en en négli- geant d’autres sous prétexte qu’ils « ne rendaient pas bien » à l’écran. Dans la pratique, les effets visuels se sont développés au détriment de la structure des pages web. Les éditeurs de navigateurs n’ont pas aidé, c’est sûr. La situation s’est améliorée ensuite, mais à cette période le développement web s’engageait 0010-04510-045 cch1.inddh1.indd 1100 66/10/05/10/05 110:32:440:32:44 sur une très mauvaise pente.
    [Show full text]
  • CSS Avancées Vers HTML 5 Et CSS 3
    CSS avancées Vers HTML 5 et CSS 3 2e édition Raphaël Goetter Préface de Daniel Glazman © Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13405-6 Préface Au début étaient la pierre, le bois, l’argile, le métal, le papyrus et finalement le papier. Des supports pour lesquels fond et forme sont inextricablement mêlés. Séparer la lettrine de son enluminure ? Imaginer le Talmud sans son formatage si spécial permettant les commentaires ? Impossible ! Pire, les éléments de forme étaient fortement dépendants du support : la typogra- phie ronde était difficile sur pierre et impossible dans l’écorce de bois, tandis que les barres supérieures de certaines graphies avaient pour utilité d’aider l’alignement. La révolution technologique a non seulement séparé fond et forme dès la naissance du télé- gramme, mais elle a également séparé fond et format, les lettres et les chiffres n’étant plus des lettres et des chiffres, mais des signaux de morse transitant dans un fil métallique. Le Web, cette nouvelle révolution dont seuls nos descendants mesureront à sa juste valeur la portée, va encore plus loin et officialise enfin ce vieux leitmotiv des fanatiques de la documentation struc- turée : contenu et présentation sont deux notions quasi orthogonales. Un contenu donné peut être présenté de plusieurs manières différentes, une présentation peut être commune à plusieurs contenus sans rapport entre eux. Lorsque le Web naît au CERN entre 1989 et 1991 sous l’impulsion de Tim Berners-Lee, rien de tout cela n’existe encore. Chaque élément de la lingua franca du Web, le langage HTML, véhicule intrinsèquement sa propre présentation et styler un contenu n’est pas encore une idée en vogue.
    [Show full text]
  • HTML & CSS: the Good Parts
    ,praise.1687 Page i Monday, February 8, 2010 12:03 PM Praise for HTML & CSS: The Good Parts “Ben has an encyclopedic knowledge of web development and makes even the most obtuse-sounding concepts seem eminently approachable. All while writing a book filled with charm, wit, and aplomb. (Yeah, I hate him, too. Great book, though.)” — Ethan Marcotte, coauthor of Designing with Web Standards, Third Edition “HTML & CSS: The Good Parts is essential for those who work building web pages and need to take their understanding and knowledge to the next level. Web developers and designers of all types need to have solid depth of understanding of how HTML and CSS work as well as how they interact with the browser. The difference Ifind between an okay web designer and developer (including those who work with tools that create and manage sites) and a really good one is the depth of understanding they have and use of HTML and CSS. This book provides that depth and understanding. “In my opinion one of the best pieces for me in this book is the inclusion of the proper structuring of pages, sites, and the depth of the discussion for integration is essential for the maintenance, use, and even SEO considerations. This is something that far too often gets missed and is not understood well. Having this knowledge and these skills in your tool belt will only lead to much improved outcomes that are easier to build out, manage, and use.” — Thomas Vander Wal, founder and senior consultant at InfoCloud Solutions “I’ve always said that the beauty (and the frustration) in CSS is that there are so many ways to do things.
    [Show full text]