Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...Roberto Ellero
L’utilizzo dell’elemento Html5 Video libera dall’utilizzo di plugin esterni basati su tecnologie proprietarie.
Esempi di video erogati utilizzando Player Flash-based e Player built-in nel browser.
A confronto vantaggi e vantaggi dei diversi markup, per accessibilità, praticità d’uso e qualità video.
Il confronto riguarderà anche i diversi codec che si possono utilizzare nei due scenari: H.264/AVC/MPEG-4 Part 10 per i Flash Player, Ogg Theora per i Player built-in nei diversi browser che supportano l’elemento Html5 Video.
Al termine, i due scenari verranno uniti con una tecnica di Fallback: se l’utente utilizza un browser che attualmente non supporta l’elemento Video con Player built-in (ad esempio Internet Explorer 8), viene servito il video eseguito da un Player basato su Flash.
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15
SMAU 2009 - Scenari futuri del Video-on-the-Web in HTML 5 - Roberto Ellero, ...Roberto Ellero
L’utilizzo dell’elemento Html5 Video libera dall’utilizzo di plugin esterni basati su tecnologie proprietarie.
Esempi di video erogati utilizzando Player Flash-based e Player built-in nel browser.
A confronto vantaggi e vantaggi dei diversi markup, per accessibilità, praticità d’uso e qualità video.
Il confronto riguarderà anche i diversi codec che si possono utilizzare nei due scenari: H.264/AVC/MPEG-4 Part 10 per i Flash Player, Ogg Theora per i Player built-in nei diversi browser che supportano l’elemento Html5 Video.
Al termine, i due scenari verranno uniti con una tecnica di Fallback: se l’utente utilizza un browser che attualmente non supporta l’elemento Video con Player built-in (ad esempio Internet Explorer 8), viene servito il video eseguito da un Player basato su Flash.
HTML5 è lo standard futuro per lo sviluppo di applicazioni web e mobile che aggiunge molte funzionalità e potenzialità rispetto l'(X)HTML tradizionale. Se per gli sviluppatori sono aumentate le possibilità, In ambito Security aumenta la superficie attaccabile in particolare per gli attacchi lato client. Il talk si pone l'obiettivo di descrivere i nuovi vettori di attacco che insistono sulle API e funzionalità di HTML5.
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
The document discusses various CSS3 properties for styling text and backgrounds, including text-shadow, gradients, multiple backgrounds, and border-image. It provides examples of how to use these properties, such as applying multiple drop shadows to text, creating linear and radial gradients, layering images as backgrounds, and slicing images for borders. It also notes browser prefixes and fallback options needed for cross-browser support.
Il racconto a posteriori (questa presentazione fa seguito a quella tenuta poco più di un anno fa, sempre in occasione della UGIALT.net Conference) di quello che è stato effettivamente lo sviluppo e l'adozione di questo linguaggio, che ormai molti indicano come la vera piattaforma di sviluppo del futuro, il rischio che si intravede di una nuova buzzword stile "web 2.0", alcune esperienze dirette e le lezioni che ne ho potuto trarre.
The document discusses using Phaser.io, Socket.io, and Arduino together to create an HTML5 game that can be controlled from an Arduino board. It provides code examples for setting up a Phaser game state and loading assets, connecting the game to a Socket.io server, reading input from an Arduino button to trigger actions over the socket, and blinking LEDs on the Arduino in response to game events. The document serves as a tutorial for building an HTML5-Arduino web game using these technologies.
Con questa presentazione verrete a conoscenza dei nuovi elementi da usare nei vostri form che aumenteranno la velocita' e la semanticita' delle vostre pagine.
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript
Responsive web design spiegato sempliceLucio Vacchi
WordPress Meetup Bologna 19-10-2017
Lucio Vacchi
info@luciovacchi.it
https://luciovacchi.it/responsive-web-design-spiegato-semplice/
Responsive web design spiegato semplice
Come funziona, vantaggi, limiti e nuove sfide
HTML5 è lo standard futuro per lo sviluppo di applicazioni web e mobile che aggiunge molte funzionalità e potenzialità rispetto l'(X)HTML tradizionale. Se per gli sviluppatori sono aumentate le possibilità, In ambito Security aumenta la superficie attaccabile in particolare per gli attacchi lato client. Il talk si pone l'obiettivo di descrivere i nuovi vettori di attacco che insistono sulle API e funzionalità di HTML5.
HTML5 e Css3 - 4 | WebMaster & WebDesignerMatteo Magni
The document discusses various CSS3 properties for styling text and backgrounds, including text-shadow, gradients, multiple backgrounds, and border-image. It provides examples of how to use these properties, such as applying multiple drop shadows to text, creating linear and radial gradients, layering images as backgrounds, and slicing images for borders. It also notes browser prefixes and fallback options needed for cross-browser support.
Il racconto a posteriori (questa presentazione fa seguito a quella tenuta poco più di un anno fa, sempre in occasione della UGIALT.net Conference) di quello che è stato effettivamente lo sviluppo e l'adozione di questo linguaggio, che ormai molti indicano come la vera piattaforma di sviluppo del futuro, il rischio che si intravede di una nuova buzzword stile "web 2.0", alcune esperienze dirette e le lezioni che ne ho potuto trarre.
The document discusses using Phaser.io, Socket.io, and Arduino together to create an HTML5 game that can be controlled from an Arduino board. It provides code examples for setting up a Phaser game state and loading assets, connecting the game to a Socket.io server, reading input from an Arduino button to trigger actions over the socket, and blinking LEDs on the Arduino in response to game events. The document serves as a tutorial for building an HTML5-Arduino web game using these technologies.
Con questa presentazione verrete a conoscenza dei nuovi elementi da usare nei vostri form che aumenteranno la velocita' e la semanticita' delle vostre pagine.
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeomarcocasario
Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!
Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript
Responsive web design spiegato sempliceLucio Vacchi
WordPress Meetup Bologna 19-10-2017
Lucio Vacchi
info@luciovacchi.it
https://luciovacchi.it/responsive-web-design-spiegato-semplice/
Responsive web design spiegato semplice
Come funziona, vantaggi, limiti e nuove sfide
Introduzione al Responsive Design: I vantaggi di Sketch nel
disegnare su diversi viewport.
2. Scoprire ed utilizzare i plugin di Sketch: Sketch, con i superpoteri. Guida e introduzioni alle maggiori risorse esterne a Sketch.
3. Prototipazione con Sketch: Come creare e gestire un prototipo condiviso (Introduzione a Craft e a Invision).
4. Esercizi per ogni modulo teorico
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLDDotNetCampus
La recente affermazione in ambito web delle applicazioni rich basate su HTML5 e Javascript è diventato sorgente di una serie di librerie innovative e di strumenti che, se usati correttamente, possono semplificare enormemente lo sviluppo. In questa sessione sarà illustrato come sfruttare Typescript, in concomitanza con Angular e Bootstrap per realizzare applicazioni che sfruttino al massimo le possibilità dei browser e diano un feedback il più possibile simile alle applicazioni desktop.
Un approccio Frameworkless per sviluppare la tua Single Page Applicationextrategy
Il talk racconta l'esperienza del Frameworkless Movement dal punto di vista dello sviluppatore UI. Partendo dalle basi 'cosa sono i framework e perché li utilizziamo? quali insidie nascondono?' saranno illustrati gli strumenti utili a scegliere consapevolmente il miglior framework per il nostro contesto, come ad esempio i Design System, valutando anche l'opzione "no-framework".
Praticamente... AWS - Amazon Web ServicesSpeck&Tech
ABSTRACT: Il cloud non è una novità e l'offerta di servizi di AWS è molto ampia. Ma come sono usati nella pratica? Presentiamo in questo intervento due casi d'uso per una multinazionale ed i ragionamenti collegati alla complessità, architettura e convenienza, in un contesto complesso e distribuito.
BIO: Alberto Martinelli è laureato presso l'università di Trento in Informatica ed ha lavorato per alcune realtà locali trentine per clienti provinciali, nazionali ed internazionali. Esperto di architetture software su diverse scale, attualmente lavora presso Fincons come Manager e Solution Architect.
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformGabriele Gaggi
Cordova è la chiave di volta che consente agli sviluppatori web un ingresso rapido ed indolore negli store delle diverse piattaforme mobili. Vedremo come utilizzare questa chiave di volta sfruttando la potenza e semplicità del framework MVC di Google AngularJs in collaborazione con le caratteristiche responsive offerte dal framework di Twitter Bootstrap.
In questa sessione faremo una panoramica a 360 gradi su Blazor, la nuovissima tecnologia Microsoft nata da una (geniale :-) idea di Steve Sanderson per lo sviluppo di applicazioni Web client basate su WebAssembly.
Nell'introduzione parlemermo brevemente di WebAssembly, spiegando di cosa si tratta e del perché questa tecnologia abbia tutte le premesse per portare uno dei più grandi "disruptive changes" nel modo di sviluppare applicazioni Web client. Passeremo poi a Blazor esaminandone prima gli aspetti architetturali e procedendo con un behind the scenes per svelare in che modo avviene la "magia" dell'interazione con il browser. Verranno poi presentate le feature che questa tecnologia offre (template project su VS, components, layouts, binding, dependency injection, hosting) sia attraverso slides che, di pari passo, con delle demo di un'applicazione funzionante realizzata in Blazor. Vedremo poi quali sono le problematiche legate a performance, deployment e distribuzione parlando delle possibili future ottimizzazioni. Infine chiuderemo con un confronto tra Blazor e i maggiori framework ora in uso per lo sviluppo di applicazioni Web client (Angular, Vue, Knockout, ecc.) e con alcune considerazioni sull'impatto che Blazor e tecnologie simili potrebbe avere a cascata per lo sviluppo Web futuro, in una sorta di "butterfly effect" nel mondo Web client.
FAST è una raccolta di tecnologie, basate su Web Components e su Web Standards moderni, che ci aiuta ad affrontare in modo efficiente alcune delle sfide più comuni nella progettazione e nello sviluppo di siti ed applicazioni Web.”
FAST ci aiuta a creare interfacce si adattano facilmente a qualunque Design System e che possono essere utilizzate con qualsiasi framework!
2. Responsive design: definizione
• Utilizzato nell’articolo
http://alistapart.com/article/responsive-web-
design di Ethan Marcotte
• «Responsive architecture»
• Approccio non più «device-based» ma «future-
proof»
• Imprescindibile l’uso di HTML 5 + CSS 3
3. Responsive design: cos’è?
• Contenuto adattabile all’area visibile del browser
(«viewport»)
• 3 tecniche: layout a griglia fluida, dimensione
immagini flessibile e media queries
• Differenti (ed adeguate!) esperienze d’uso a
seconda del dispositivo utilizzato
• http://d.alistapart.com/responsive-web-
design/ex/ex-site-FINAL.html
• ATTENZIONE! NON SIAMO SU CARTA STAMPATA!
4. HTML5 & CSS3: pro e contro
PRO
• Adattabilità alle diverse risoluzioni video
• Codice più snello e manutenibile
• Minore uso di tecnologie alternative per singoli
compiti (Adobe Flash, Javascript, ecc..)
• RESPONSIVE DESIGN POSSIBILE
CONTRO
• Compatibilità browser
• Livello qualitativo dei contenuti
7. E’ la scelta giusta?
• Le versioni mobile / desktop sono simili nel contenuto /
logica / dinamica di navigazione?
• Il sito deve risultare identico su ogni browser, incluso
IE8 e precedenti?
• Graceful degradation VS progressive enhancement
• Mobile -> Desktop
• SEO?
• Progettazione di più layout differenti (breakpoint)
• Contenuto a supporto del design responsive
• BUDGET
