1 / 26

WEB DEVELOpment immersive advanced layout, forms, & media

WEB DEVELOpment immersive advanced layout, forms, & media. Topics. Grid Systems Positioning Properties User Forms Embedding Media Image Sprites & Rollovers Front End Frameworks. Popular CSS GRID SYSTEMS. 960 Blueprint SenCSS The Semantic Grid System Twitter Bootstrap (grid included).

kermit-maddox
Download Presentation

WEB DEVELOpment immersive advanced layout, forms, & media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB DEVELOpment immersiveadvanced layout, forms, & media

  2. Topics • Grid Systems • Positioning Properties • User Forms • Embedding Media • Image Sprites & Rollovers • Front End Frameworks WEB DEVELOPMENT IMMERSIVE

  3. Popular CSS GRID SYSTEMS • 960 • Blueprint • SenCSS • The Semantic Grid System • Twitter Bootstrap (grid included) WEB DEVELOPMENT IMMERSIVE

  4. CSS GRID SYSTEMS WEB DEVELOPMENT IMMERSIVE

  5. CSS GRID SYSTEMS WEB DEVELOPMENT IMMERSIVE

  6. relative positioning .box { position:relative; top: 25px; left: 200px; } WEB DEVELOPMENT IMMERSIVE

  7. relative positioning WEB DEVELOPMENT IMMERSIVE

  8. Absolute positioning .box { position:absolute; top: 0; right: 0; } WEB DEVELOPMENT IMMERSIVE

  9. Absolute positioning WEB DEVELOPMENT IMMERSIVE

  10. fixed positioning .box { position:fixed; top: 0; right: 150px; } WEB DEVELOPMENT IMMERSIVE

  11. fixed positioning WEB DEVELOPMENT IMMERSIVE

  12. Z-index (layering) .bluebox { position:relative; top: 125px; left: 125px; z-index:3; } WEB DEVELOPMENT IMMERSIVE

  13. Z-index (layering) WEB DEVELOPMENT IMMERSIVE

  14. Embedding VIDEO with a single source <video src=”movie.???”> <!-- Fallback content here to display if the browser does not support the video element. --> </video> WEB DEVELOPMENT IMMERSIVE

  15. Embedding VIDEO using multiple sources <video> <source src="movie.mp4" type="video/mp4"/> <source src="movie.ogv" type="video/ogg"/> <source src="movie.webm" type="video/webm"/> <!-– fall back content here --> </video> WEB DEVELOPMENT IMMERSIVE

  16. Video element support WEB DEVELOPMENT IMMERSIVE

  17. Video codec type support WEB DEVELOPMENT IMMERSIVE

  18. Custom Video player solutions Reviews & Feature Chart: http://praegnanz.de/html5video/ WEB DEVELOPMENT IMMERSIVE

  19. Image Sprites NO YES WEB DEVELOPMENT IMMERSIVE

  20. Image Sprites Sprites can include 2 states for a single icon or they can contain multiple states for many different menu items. One advantage is quicker loading time. Load navigation images all at once. No waiting during the mouseover event. WEB DEVELOPMENT IMMERSIVE

  21. Single icon, 2 states WEB DEVELOPMENT IMMERSIVE

  22. Multi icon, multi states WEB DEVELOPMENT IMMERSIVE

  23. CSS sprite Rollover WEB DEVELOPMENT IMMERSIVE

  24. front end frameworks html5boilerplate.com html5boilerplate.com/mobile WEB DEVELOPMENT IMMERSIVE

  25. Twitter bootstrap 2 twitter.github.com/bootstrap WEB DEVELOPMENT IMMERSIVE

  26. WEB DEVELOPMENT IMMERSIVE

More Related