HTML 5: UN LINK TRA PASSATO E FUTURO

Slides:



Advertisements
Similar presentations
UNIVERSITÀ DEGLI STUDI DI PAVIA Facoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, Economia Corso di laurea in Comunicazione.
Advertisements

UNIVERSITÀ DEGLI STUDI DI PAVIA FACOLTÀ DI LETTERE E FILOSOFIA, SCIENZE POLITICHE, GIURISPRUDENZA, INGEGNERIA, ECONOMIA CORSO DI LAUREA SPECIALISTICA INTERFACOLTÀ
What is HTML5…?. ”…removes the need for plugins” ”…can handle multimedia directly” ”…enables rich, interactive clients” ”…enables advanced visual designs”
Hypermedia systems Jakub Husár & Tomáš Jurík. Content XHTML 2.0 Definition Short history Differences between 1.0 and 2.0 Usage suitability Improvements.
HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.
Neal Stublen Content Models  Metadata content Data not necessarily presented on the page ○ title, link, meta, style  Flow content.
 A markup language  Structures content on the internet  Commonly used by web browsers.
HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.
Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN,
UNIVERSITÀ DEGLI STUDI DI PAVIA FACOLTÀ DI ECONOMIA, GIURISPRUDENZA, INGEGNERIA, LETTERE E FILOSOFIA, SCIENZE POLITICHE Corso di Laurea Interfacoltà in.
HTML 5 Tutorial Chapter 1 Introduction. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML.
HTML 5 The next generation of web programming. WHERE IT ALL BEGAN.
Bartosz Kowalski Software Developer CERN. Presentation outline -HTML : introduction and history -HTML5 : -History and philosophy -New features -Structure.
Dongseop Kim.  Purpose of HTML 5  Semantic Mark up  Web Form Function  Support Rich Web Application.
Lecture 18. HTML5 and JavaScript Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell Exploring the Internet,
Chapter 14 Introduction to HTML
CS 415 N-Tier Application Development By Umair Ashraf July 16,2013 National University of Computer and Emerging Sciences Lecture # 12 HTML/ XHTML/ HTML5.
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
Relatore: Ing. Marco Porta Correlatore: Ing. Massimo Cellario Tesi di Laurea di: Andrea Marchetti Anno Accademico 2010/2011 UNIVERSITA’ DEGLI STUDI DI.
HTML 5 New Standardization of HTML. I NTRODUCTION HTML5 is The New HTML Standard, New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D.
Director of Computer Center, DaYeh University Ku-Yaw Chang.
IT Engineering I Instructor: Rezvan Shiravi
HTML5 Accessibility Ted Drake, Yahoo! Accessibility Lab Slideshare.net/7mary4.
SIG WEB January 31, 3PM. What is HTML5? What it is: Allows for better intergration of media consumption. A new open standard Provides new APIs.
UNIVERSITÀ DEGLI STUDI DI PAVIA FACOLTÀ DI LETTERE E FILOSOFIA, SCIENZE POLITICHE, GIURISPRUDENZA, INGEGNERIA, ECONOMIA CORSO DI LAUREA MAGISTRALE INTERFACOLTÀ.
Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.
PRO HTML5 PROGRAMMING POWERFUL APIS FOR RICHER INTERNET APPLICATION DEVELOPMENT.
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.
The New Elements © Main Menu Structure Media Canvas Form Click on one of the categories below to view information about the new HTML5 elements in.
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
MTA EXAM HTML5 Application Development Fundamentals.
UPLOAD / DOWNLOAD april  HTML5 is just the next iteration of HTML  Previous version was technically HTML 4.01, which incorporated XHTML 1.0.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML 5 The Future of Web Development. What is HTML5? “HTML5 is a specification of how the web’s core language, HTML, should be formatted and utilized.
(1) HTML5, CSS, Twitter Bootstrap. (2) HTML5 Will be the new standard New features Drag and Drop and Support for local storage,,,, New input types Removed.
Let’s look what flash can do: OK, that wasn’t flash! That was HTML5.
INT222 – Internet Fundamentals Week 8: Using New HTML features 1.
Web Design Principles 5 th Edition Chapter 3 Writing HTML for the Modern Web.
HTML5 Requirement Driven Design David Tarrant Electronics and Computer Science.
1 Company Confidential Skin a Complete DotNetNuke Website Using HTML5 and CSS3 in One Hour Amelia Marschall Partner & Creative Director.
INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Agenda * What is HTML5 -- Its history and motivation * HTML/XHTML as Human / Machine Readable Format * HTML and its related technologies * Brief summary.
HTML Structure & syntax
Chapter 9 HTML 5 Video and Audio
The HTML5 logo was introduced by W3C in 2010
Chapter 17 The Need for HTML 5.
HTML CS 4640 Programming Languages for Web Applications
HTML 5 By Michael Hurley.
Introduction to HTML5.
PPT By:Gaurav Jaiswal Singsys Pte. Ltd.
Chapter 4: HTML5 Media - <video> & <audio>
HTML 5 Tutorial Chapter 1 Introduction.
Lecture 8. HTML. Author: Aleksey Semyonov
Application with Cross-Platform GUI
Code Expert-Web design & Development Product by: Codexoxo Source:
Introduction to HTML5.
HTML 5 Training HTML 5 SYMANTICS [Notes to trainer:
Ground to Roof HTML/HTML5
Introduction to HTML5.
HTML 5 SEMANTIC ELEMENTS.
Giuseppe Attardi Università di Pisa
Creating User Interfaces
Creating a Basic Web Page using HTML
Introduction to HTML5.
HTML CS 4640 Programming Languages for Web Applications
Presentation transcript:

HTML 5: UN LINK TRA PASSATO E FUTURO Università degli Studi di Pavia Facoltà di Economia, Giurisprudenza, Ingegneria, Lettere e filosofia, Scienze Politiche Corso di Laurea Magistrale Interfacoltà in Comunicazione Professionale e Multimedialità HTML 5: UN LINK TRA PASSATO E FUTURO Relatore: Ing. Marco Porta Correlatore: Ing. Massimo Cellario Tesi di Laurea di: Stefano Scotti Anno Accademico 2010/2011

HTML 5 It is the fifth version of the HTML language and is still in a development stage Main purposes of W3C and WHATWG (Web Hypertext Application Technology Working Group): Comprehensibility Compatibility Universality

HTML 5: new structural and semantic elements New tags: Header Footer Nav Aside Section Article

HTML 5: new structural and semantic elements Elements which provide a more precise content description in HTML 5 documents: Heading Title 1 Title 2 Hgroup The creation of the World Wide Web is attributed to Tim Berners-Lee Mark This afternoon I will arrive there at 15:00 Time Progress

HTML 5: Audio and Video <audio> and <video> are the new HTML 5 tags for the inclusion of audio and video The formats supported by <video> are: MP4, WebM e Ogg The formats supported by <audio> are : MP3, Wav e Ogg Introduce improvements and increase usability Replacement for <embed> and <object> Popcorn.js is a JavaScript library that allows to add subtititles to videos and improve accessibilty

JavaScript API: Web Storage Makes it possible to store data on final users’ computers, without using cookies Allows to save up to 5 Mb of data for each website or web document

JavaScript API: Drag and Drop Thanks to HTML 5, Drag and Drop is much better than previous implementations Three main components of Drag and Drop: The object dropped The structure that contains data The object that accepts the drop

HTML 5 and CSS 3 /* 3D shadows (green) */ text-shadow 0 1px 0 #78AF00, 0 2px 0 #8ABF17, 0 3px 0 #9ECF33, 0 4px 0 #B3DF53, 0 5px 0 #C9EF77, 0 6px 0 #D7EFA4, /* “Ordinary” shadows */ text-shadow 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Comparison between HTML 5 and Flash Flash pros: Most browsers have a Flash plugin installed by default Supports both simple and complex animations Easier to learn than HTML 5, CSS and Javascript; High compatibility among browsers

Comparison between HTML 5 and Flash HTML 5 pros: Made up of open standards only Can be used with most of recent browsers Allows webmasters to use a “cleaner” Web code More and more considered to make phone apps faster and universally accessible

Examples of comparisons between HTML 5 and Flash

Elements combination for complex pictures Canvas Virtual canvas where we can draw (our pencil is JavaScript) The picture is made by drawing and combining segments and curves, moving through x and y coordinates to create simple or complex shapes lineTo quadraticCurveTo bezierCurveTo Elements combination for complex pictures

Canvas More complex examples: arc arc + linearGradient arc + radialGradient strokeText Animation with canvas fillText

Complex examples with Canvases

From HTML 4 to HTML 5 div class="spaziosotto" id="article_narticle div id="header" div id="menu" div id="bloccodx" div id="linkcentrale" div class="spaziosotto" id="article_narticle div id="footer"

From HTML 4 to HTML 5 Section Header Nav Section + Canvas Aside Footer Article Header Footer

From HTML 4 to HTML 5 div id="topheader" div id="navigation" div id="news_block" div id="newsletter" div id="eventi" div class="footerWrap" div class="footerSocial"

From HTML 4 to HTML 5 Header Nav Section Section Aside + + Header Footer Section + Header Section + Header Section + Header

From HTML 4 to HTML 5 HTML 4 Code HTML 5 Code <div id="header"> <div id="headersx"> <a href="/site/home.html"> <img longdesc="/site/home.html" title="Università di Pavia" alt="Università di Pavia" src="/contents/instance1/images/header.png" /></a> <span class="hide"> - </span> <a class="hide" href="/site/home.html">D</a> </div> <div id="headerdx"> <div class="cercasx"> <a href="/site/en/home.html" title="Accedi al sito in Inglese">English</a> | </div>   <form method="get" title="Motore di ricerca del sito" class="cercadx" action="/site/search.jsp"> <fieldset> <legend class="hide">Motore di Ricerca del sito</legend> <div class="labelcerca"> <label for="query">Cerca</label> <input value="10" name="hitsPerPage" type="hidden" /> <input value="1" name="instance" type="hidden" /> <input value="1873" name="node" type="hidden" /> <input value="" name="type" type="hidden" /> <input value="6" name="channel" type="hidden" /> <input class="submitcerca" value="Cerca" name="cerca" type="submit" /> <input class="query" value="cerca nel sito" id="query" name="query" type="text" /> </fieldset> </form>  <div class="clear"> </div> <div class="clear"> </div> HTML 5 Code <header> <a id="logo" href="/site/home.html"> <img longdesc="/site/home.html" title="Università di Pavia" alt="Università di Pavia" src="/contents/instance1/images/header.png" /> </a> <p><a href="/site/en/home.html" title="Accedi al sito in Inglese">English</a> | </p> <form method="get" title="Motore di ricerca del sito" class="cercadx" action="/site/search.jsp"> <fieldset> <legend class="hide">Motore di Ricerca del sito</legend> <label for="query">Cerca</label> <input value="10" name="hitsPerPage" type="hidden" /> <input value="1" name="instance" type="hidden" /> <input value="1873" name="node" type="hidden" /> <input value="" name="type" type="hidden" /> <input value="6" name="channel" type="hidden" /> <input class="submitcerca" value="Cerca" name="cerca" type="submit" /> <input class="query" value="cerca nel sito" id="query" name="query" type="text" /> </fieldset> </form> </header>

Conclusions Big development and flexibility potentials for HTML 5: it enables the creation of more usable and accessible websites Easy combination with other languages like CSS 3 and JavaScript Not yet a W3C recommendation Not yet supported by all web browsers