Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 CSS3

    Uploaded by

    Bruno Vitiello
    55 views38 pages
    This document provides an overview of HTML5 and CSS3. It discusses the history and development of HTML5, and describes some of the new features introduced in HTML5 like semantic elements, forms, media elements, canvas, geolocation and offline capabilities. It also covers new CSS3 features like selectors, backgrounds, borders, fonts, transforms, animations and responsive design using media queries. The document includes examples and links to online resources for experimenting with HTML5 and CSS3 features. It concludes with a thank you and contact details for further information.

    Original Description:

    Original Title

    178042958-HTML5-CSS3

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of HTML5 and CSS3. It discusses the history and development of HTML5, and describes some of the new features introduced in HTML5 like semantic elements, forms, media elements, canvas, geolocation and offline capabilities. It also covers new CSS3 features like selectors, backgrounds, borders, fonts, transforms, animations and responsive design using media queries. The document includes examples and links to online resources for experimenting with HTML5 and CSS3 features. It concludes with a thank you and contact details for further information.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    55 views38 pages

    HTML5 CSS3

    Uploaded by

    Bruno Vitiello
    This document provides an overview of HTML5 and CSS3. It discusses the history and development of HTML5, and describes some of the new features introduced in HTML5 like semantic elements, forms, media elements, canvas, geolocation and offline capabilities. It also covers new CSS3 features like selectors, backgrounds, borders, fonts, transforms, animations and responsive design using media queries. The document includes examples and links to online resources for experimenting with HTML5 and CSS3 features. It concludes with a thank you and contact details for further information.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 38

    HTML5 - CSS3

    Taking Web Development to the next level


    HUG Chennai

    How did we get here?


    ! Invention of Web and its Publishing Language ! The Browser standard war ! W3C and WHATWG formation and open standards ! HTML3 in 94, HTML4 in 97-98

    So what is HTML5?
    ! It is the fifth revision of HTML standard.
    ! Rules New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins and more markup to replace scripting Should be device independent and development process should be visible to the public

    Before Start
    ! What is Render Engine/Web Browser Engine ! What is NAMESPACE ! What is ELEMENT/TAG

    5 things you should know about HTML5


    ! Its easy to get started ! Its already works ! Its here to stay ! You dont need to throw anything away ! Its not one big thing

    Minimum HTML5 Document

    <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

    Top New Features ...

    Better Forms
    ! New elements
    ! Progress, Meter, Datalist, Keygen, Output

    ! New Input types


    ! 13 new input types ! Tel, search, url, email, datetime, date, month, week, time, datetime-local, number,
    range, color

    ! Input attributes
    ! Autofocus, placeholder, required, pattern

    http://www.html5rocks.com/en/tutorials/forms/html5forms

    New Semantic Elements


    Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags enabling a more useful, data driven web for both programs and your users. SEO Effect

    New Semantic Elements


    ! ! ! ! ! ! ! !
    <header> <nav> <section> <article> <aside> <figcaption> <figure> <footer>

    Web Storage & Offline


    Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
    Before Cookies, Flash Storage, Internet Explorer User Data, Google Gears Considerations Store dynamic data, Static resources, Store binary data and modify it (e.g. images), Sync data with server, Increase App performance

    Web Storage & Offline


    Web Storage (localStorage/sessionStorage) Store unstructured data and miscellaneous data (user/ game/app preferences) IndexedDB/WebSQL Store structured data and Handle simultaneous data operations (with transactions) Appcache Caches entire web app locally!

    Media Elements
    Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!

    ! Audio

    http://www.w3schools.com/html/tryit.asp?filename=tryhtml_audio_all <audio controls height="100" width="100"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> <embed height="50" width="100" src="horse.mp3"> </audio>

    ! Video
    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

    Canvas

    ! draw graphics, on the fly, via scripting (usually JavaScript) ! it is only a container for graphics
    Create a Canvas
    <canvas id="myCanvas" width="200" height="100"></canvas>

    Draw Onto The Canvas With JavaScript


    <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>

    Device Access
    Beginning with the Geo location API, Web Applications can present rich, deviceaware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.

    Device Access
    ! Orientation, Motion, Geo location ! Calendar ! Camera ! User Interface ( Drag and Drop, beep, vibrate, native application menu etc) ! Application Launcher ! Contacts ! Communication Log, File System, Gallery, Messaging etc

    Connectivity
    More efficient connectivity means more real-\me chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing data between client and server more efficiently than ever before.

    Just That?
    Web Workers, XMLHttpRequest 2, SVG, WebGL much more!

    CSS3

    What is CSS?
    ! CSS is used to control the style and layout of Web pages. ! Selector and Declaration Block ! Usage Inline, In page, as separate file

    div { border:2px solid; border-radius:25px; }

    http://en.wikipedia.org/wiki/Cascading_Style_Sheets

    CSS3
    ! CSS3 is the latest standard for CSS. ! Completely backwards compatible. ! Still under development by W3C and almost done. ! Many of the modern browsers have been implemented it.

    CSS3 Modules
    ! Selectors ! Backgrounds and Borders ! Text Effects ! 2D/3D Transformations ! Animations ! Multiple Column Layout ! User Interface

    Selectors
    ! A lot of new selectors ! http://www.w3schools.com/cssref/css_selectors.asp

    Backgrounds and Borders


    CSS3 Rounded Corners
    div { border:2px solid; border-radius:25px; }

    Backgrounds and Borders


    CSS3 Box Shadow
    div { box-shadow: 10px 10px 5px #888888; }

    Backgrounds and Borders


    CSS3 Box Shadow

    div { border-image:url(border.png) 30 30 round; }

    CSS3 @font-face

    <style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>

    2D Transforms
    translate()
    div { transform: translate(50px,100px); }

    2D Transforms
    rotate()
    div { transform: rotate(30deg); }

    2D Transforms
    scale()
    div { transform: scale(2,4); }

    2D Transforms
    skew()
    div { transform: skew(30deg,20deg); }

    http://localhost/~umesh/srm/css3_transitions.html

    3D Transforms
    rotateX() and rotateY()
    div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ }

    div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari and Chrome */ }

    http://localhost/~umesh/srm/css3_transform.html

    Animations
    @keyframes
    @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

    animate:
    div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari and Chrome */ } http://localhost/~umesh/srm/css3_animations.html

    Responsive Web Design


    ! Media Queries ! In CSS2 ! Print, screen ! In CSS3 ! Width, height, resolution, orientation, aspect-ratio and much more

    Few samples
    http://www.keithclark.co.uk/labs/css3-fps-new/ http://www.satine.org/research/webkit/snowleopard/snowstack.html https://developer.apple.com/safaridemos/showcase/transitions/ http://www.satine.org/research/webkit/snowleopard/snowstack.html https://developer.apple.com/safaridemos/showcase/threesixty/ http://chrome.angrybirds.com/ http://www.chromeweblab.com

    A Small Hands on
    http://localhost/~umesh/srm/sample/index.html

    Thank You!
    Umesh Ganapathy

    Umesh.ganapathy@gmail.com

    You might also like