Arts 155 1nd Edition Lecture 12 Outline of Last Lecture Review of CSS Text Layout Midterm Review Outline of Current Lecture W3C HTML5 CSS3 Current Lecture W3C Olympics London Interesting moment in ceremony where they mention Tim who is one of the founders of the internet Sir Tim Berners Lee In 1989 innovated process for connecting HTTP client and server Beyond people just using their own computers Having them connected with HTML documents and hypertext In 1994 he founded and became director of the world wide web consortium W3C Advocate for open source inter operable technologies and web standards Web took off because there were inter operable concerns Don t have to worry about compatibility issues with hardware W3C Members come from the technology industry Mission is to insure inter operability Draft and publish standards for royalty free web technologies W3C tells what code the browser would accept in rendering engine Standards move through series of stages working draft candidate recommendation proposed recommendation W3C recommendation HTML 5 HTML 5 Exciting Features Enhanced video and audio options including video animation with Canvas Robust support for new APIs Application Programming Interfaces including File API Media API and drag and Drop API Let different software packages speak to each other The end of plug ins as we know them Maybe These notes represent a detailed interpretation of the professor s lecture GradeBuddy is best used as a supplement to your own notes not as a substitute Gradual move to phase out plug ins but we re not totally there yet HTML5 New Elements Allows you to write cleaner better code Easier nav aside article section header footer CSS 3 CSS 3 New Features for Layout Graphic Design Interactivity and Visual Depth Group of new features and new standards that moved through the W3C Summarize with these designing features Box Model Can define areas individually ex Margin top 50px or define all 4 sides at once ex margin 50px 960 pixel grid system Think mathematically Define a width for your body Can divide 960 pixels so many different ways CSS 3 Kokogames CSS3 gone wild A ton of background stuff going on A ton of drop shadows Rounded corners everywhere It s gone to the point where it drives art people crazy Mr Simon Collision Interesting font choices and interactivity Can move mouse and it will light up Background Can modify opacity of just the background colors The background colors overlap Can do that fairly easily color is content color writing background color is the color in the background Hue Saturation Lightness and RGBA shows opacity Background Gradients in CSS3 You say you want a linear gradient and have it move from one color to another 0 0 0 100 is pretty even Greater Background Image Control in CSS3 Manipulating Background Images Repeating Position image Back up with gradients and solid color You can use a fall back in case the browser can t render the image properly Drop Shadows in CSS3 Drop shadows box shadow effect is the sense that there is a shadow It gives sense of depth Text shadows are easy to create in CSS3 but not always so easy to read Box Shadow Horizontal first then Vertical then Blur radius how defined the shadow is then add color Vertical Margin Collapse W3C standards that can catch you by surprise W3P has the assumption that the users want to see as much as they can Want most important content to be there If there are two vertical margins it takes the greater number and drops the other and everything moves up in position Can correct by having top or bottom be 0 and then the other can have the total Rounded Corners Law Suit Apple patented rounded corner of iPhone body and apps However HTML an CSS is fine to do rounded corners border radius it applies evenly define them all as one number You can make it unequal as well CSS3 Animations and Interactivity Styling Links Hyperlink by default appears as blue and underlined Can change color or remove underline text decoration none Effect with hover simple level of interactivity A active moment they click Sprites and Image Rollover This is big with mobile app design Can load multiple images at one time Animations with Keyframes from particular background to new background Watched more of Side by Side