Prerequisiti

Questo corso è pensato per web developer e web designer interessati alla progettazione, creazione e deploy di applicazioni web in HTML5. Per fruire del corso in maniera proficua, il partecipante dovrà avere familiarità con l'uso di HTML e JavaScript. Meglio ancora se ha qualche esperienza/conoscenza di XML e Ajax.

 

Overview

HTML5 è il prossimo step di sviluppo in ambito HTML ma non è soltanto un semplice upgrade di linguaggio. E' un grande passo in avanti, secondo le parole di Vic Gundotra (VP of Engineering Google) "...il web non ha mai vissuto un tale livello di veloce trasformazione negli ultimi 10 anni...stiamo scommettendo forte su HTML 5...".

Diverse features di HTML5 sono già supportate dai browser, è tempo quindi di cominciare ad usarlo!

Questo corso su HTML5 è diviso in due moduli: nel primo modulo si imparerà a creare pagine e applicazioni web secondo il markup offerto da HTML 5 e dalle sue API Javascript, nel secondo modulo si affronterà in maniera pratica la parte di HTML5 Communication per applicazioni web real-time, usando strumenti quali WebSocket, Server-Sent Events, Cross-Document Messaging e XMLHttpRequest Level 2. Si imparerà pertanto a creare applicazioni web di nuova generazione.

Con questi nuovi standard, i browser saranno ora capaci di utilizzare applicazioni di network communication che erano per lungo tempo prerogativa delle desktop application. Si imparerà pertanto ad usare questi standard emergenti per realizzare applicazioni web 2.0 scalabili e con importanti obiettivi di comunicazione real-time quali:

 

• Sistemi di trading
• Scomeesse online
• Social Chat
• Monitoraggio di performance
• Applicazioni RFID e GPS
• Broadcasting su Sports and News

 

Il corso è in lingua italiana.

 

Obiettivi formativi

Questo corso guida i discenti in un percorso gradualmente calibrato che affronta l'evoluzione del linguaggio HTML5 partendo dalla creazione di pagine e applicazioni web secondo il markup offerto da HTML5 e dalle sue API Javascript, fino ad affrontare la parte di HTML5 Communication per applicazioni web real-time, usando strumenti quali WebSocket, Server-Sent Events, Cross-Document Messaging e XMLHttpRequest Level 2. Si imparerà pertanto a creare applicazioni web di nuova generazione.

 

Dotazione PC

E’ previsto che ciascun partecipante sia munito di proprio notebook avente i seguenti requisiti minimi per partecipare al corso Next Generation Rich Web Applications con HTML 5:

 

• Intel Pentium Core Duo
• Microsoft Windows 7, Windows Vista, Windows XP with Service Pack 2, Windows XP Professional, Windows 2000 Server, or Windows Server 2003
• 1 GB di RAM
• 300 MB di spazio disponibile su hard disk

 

Coloro che fossero sprovvisti di un notebook con tali caratteristiche, potranno noleggiare un PC per l’intero corso. Si prega in tal caso di informare l’organizzazione con qualche giorno di preavviso.

 

Materiale didattico e docente

L’offerta formativa è completata dal seguente libro di testo che verrà fornito ad ogni alunno:
HTML5 Solutions: Essential Techniques for HTML5 Developers
Editore: Apress

Il docente del corso è Marco Casario autore di molti libri dedicati alle tecnologie delle Rich Interactive Application tra cui HTML5 Solutions, Flex 4 Cookbook, Professional Flash Catalyst, Adobe AIR Cookbook. Potete accedere al profilo completo di Marco Casario su LinkedIn.

 

Programma

Overview of HTML5

HTML timeline

The official guidelines

Web Hypertext Application Technology Working Group (WHATWG)

World Wide Web Consortium (W3C)

Internet Engineering Task Force (IETF)

Browser support matrixes

XHTML o HTML5 ?

Overview CSS3

Javascript APIs

 

Struttura di una pagina HTML5

Using the new DOCTYPES

Replacing the presentational Markup
Avoid with security vulnerabilities with character encoding

Global Values

Structuring the page using:

 

• section
• header
• footer
• nav
• article

 

Using block semantic elements: aside, figure, and dialogue

Detecting if a browser supports a HTML 5 feature

Using the Modernizr open source library

 

HTML5 Markup

The new Horizontal Rule

Using the IFRAME

Using the EMBED tag

Creating empty lists

Linking Heading, paragraphs, blockquotes

Using the AREA tag

Using the media attrbiutes for the A and AREA tags

 

Semantic HTML5 Markup

Understanding Microdata
Using the itemprop and itemscope
Creating a custom vocabulary
Using the microdata with the DOM API
Understanding Link types and relations
The header and hgroup elements
Connecting images with their captions
Using the article element
Date and Times elements
Adding tangent content

 

HTML5 Forms

Understanding the new input types

Using the built-in validation for email input type

Using an url input type

Using a spinner control
Working with the data in your Form
Adding a slider to your Form with the range input type

Sending multiple files

Creating a Google's suggest-like autocomplete with the data list component

Validating form controls

Creating custom input types using regular expressions
Setting placeholder text in an input field
Using the built-in validation for email addresses formats
Creating Date and Time Controls

Create a complete form

Applying CSS to a Form

 

Working with Video and Audio

Embedding a video in a web page
Checking for video format support
Detecting Video support across browser
Creating a video controller
Preloading videos

Creating a custom seekbar for a video
Understanding the Codecs
Encoding videos in different sources
Using multiple source video elements

Opening a video in Fullscreen
Applying CSS to a Video element
Adding a mask to videos

Using the new AUDIO element

 

Understanding the Canvas APIs

Understanding the CANVAS APIs
Detecting the Canvas and Canvas text support
Understanding the standard screen-based coordinate system
Pixel manipulations
Applying shadows and blurring
Animating canvas

 

Drawing with the Canvas 2D APIs
How to draw with HTML 5: Using the Canvas 2D APIs

Using paths and coordinates

Drawing shapes: rectangle and circle
Filling shapes with solid colors
Using gradients to fill shapes
Drawing texts in a canvas
Working with relative font sizes to draw text on a canvas
Saving a shape as a PNG file

 

HTML5 Communication APIs

Understanding the PostMessage API
Checking for postMessagi API browser support
Cross-documents messaging and CORS

Sending messages between windows and iframe

Using the Server-Event technologies for writing real-time web applications
Creating independent pieces of code to communicate directly
Running code in different browsing contexts using Message channels
Uploading files using the XMLHttpRequest Level 2

Checking for the XMLHttpRequest Level 2 cross-origin browser support

 

Working with WebSocket

Understanding the COMET approach

Checking for WebSocket browser support

Establishing a websocket connection

Handling websocket events

Full-duplex messaging between client and server

Parsing and constructing WebSocket URLs

Understanding the data framing

Using the WebSocket Interfae for Javascript programming

Using a WebSocket server with the WebSocket API

 

Using the Geolocation APIs

Understanding the Geolocation APIs
Using the navigator object
Using the position object
Working with coordinates
Handling error with the PositionError
Getting the current position
Using the geo.js open source library

 

Local Storage

Understanding the Occasionally Connected Applications
Checking for HTML5 Storage support

Declaring a Manifest for your page

Using the ApplicationCache object

The ApplicationCache events
Bypassing the cache

 

Accessibility in HTML5

Creating skip links with the nav element
Creating accessible tabular data
Form accessibility
Captioning and annotations using video elements
The Canvas interface elements

Using the ARIA project

 

Quota partecipazione

Il prezzo standard del corso è di 900 euro + iva.

ISCRIVITI AL CORSO Next-Generation Rich Web Application con HTML 5

Per:

• progettazione didattica di corsi ad hoc
• corsi in sede dal cliente
• corsi rivolti a gruppi aziendali

 

RICHIEDI IL PREVENTIVO >>