Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche HTML5, CSS3 e Javascript, gli UX design patterns e le ottimizzazioni necessarie a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, autore del libro HTML5 Solutions ed Essential CSS3 tecniques (Apress) condividerà le esperienze reali, fatte durante la gestione dei progetti di Comtaste degli ultimi due anni.
Slides of the talk Giuseppe Dongu gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013.
Speaker: Giuseppe Dongu (Smyrtle Cyber Security)
Abstract:
WebRTC si sta imponendo come una delle più interessanti novità degli ultimi anni, giocando il ruolo di ponte tra due mondi fino a poco tempo fa considerati separati: il web e l'ip communication. In questa chiacchierata, daremo un'occhiata a come questo ponte esista, implementato ed integrato in HTML5.
Slides of the talk Giuseppe Dongu gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013.
Speaker: Giuseppe Dongu (Smyrtle Cyber Security)
Abstract:
WebRTC si sta imponendo come una delle più interessanti novità degli ultimi anni, giocando il ruolo di ponte tra due mondi fino a poco tempo fa considerati separati: il web e l'ip communication. In questa chiacchierata, daremo un'occhiata a come questo ponte esista, implementato ed integrato in HTML5.
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.
HTML5 CI SIAMO!
6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica
In questa presentazione condivido la mia "esperienza sul campo" nel prendere un sito web (www.nosqlday.it) inizialmente realizzato in HTML5+CSS3 ma con il solo target "desktop", e renderlo non solo compatibile o ottimizzato, ma addirittura "speciale" per la visualizzazione su dispositivi mobili.
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!
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
HTML5 cross-platform and device development: web app per tutti gli schermimarcocasario
Non esiste il mobile web, il tablet web o il desktop web. E' sempre lo stesso web solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario. Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche, gli UX design patterns e i linguaggi necessari a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, CTO di Comtaste, autore del libro HTML5 Solutions e docente del corso Rich Web Apps con HTML5 presenterà un talk interamente dedicato a questo argomento, condividendo le esperienze reali, fatte durante la gestione dei progetti degli ultimi due anni.
#SEOUX Revolution: Cosa Cambia in GoogleALE AGOSTINI
La UX Sposa il SEO
A partire dalla Primavera 2021, il SEO e la UX “convolano a nozze”: #Google ha infatti annunciato che il suo metodo di calcolo (algoritmo) integrerà NUOVI indicatori UX come fattori di ranking e posizionamento per la SEO.
Google si affiderà a dati veri, reali, generati dalle sessioni vere raccolte dal browser Chrome (non da tool)
Chi si occupa di SEO ( IL o LA SEO?!) capisce la portata della rivoluzione: ci sono quindi poche settimane per ottimizzare la #UX del sito se si vuole mantenere o crescere il posizionamenti su Google.
Ecco la parte 1 del ciclo formativo rivolto ai responsabili marketing e digital in collaborazione con NETCOMM Italia
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.
HTML5 CI SIAMO!
6 demo in 30 minuti ricchi di azione! Una panoramica di impatto sugli aspetti più divertenti della specifica, tutti da mettere in pratica
In questa presentazione condivido la mia "esperienza sul campo" nel prendere un sito web (www.nosqlday.it) inizialmente realizzato in HTML5+CSS3 ma con il solo target "desktop", e renderlo non solo compatibile o ottimizzato, ma addirittura "speciale" per la visualizzazione su dispositivi mobili.
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!
SMConnect 2022 - Con lo sviluppo del web, delle nuove tecnologie e web API, i motori di ricerca hanno iniziato ad utilizzare veri e propri browser per il rendering delle pagine web, creare un Web Rendering Service per il rendering su larga scala nasconde però molte insidie. In questo talk parliamo della session isolation nel rendering delle pagine web, da parte di motori di ricerca e tool, e di come questa può influenzare i dati di crawling.
HTML5 cross-platform and device development: web app per tutti gli schermimarcocasario
Non esiste il mobile web, il tablet web o il desktop web. E' sempre lo stesso web solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario. Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche, gli UX design patterns e i linguaggi necessari a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, CTO di Comtaste, autore del libro HTML5 Solutions e docente del corso Rich Web Apps con HTML5 presenterà un talk interamente dedicato a questo argomento, condividendo le esperienze reali, fatte durante la gestione dei progetti degli ultimi due anni.
#SEOUX Revolution: Cosa Cambia in GoogleALE AGOSTINI
La UX Sposa il SEO
A partire dalla Primavera 2021, il SEO e la UX “convolano a nozze”: #Google ha infatti annunciato che il suo metodo di calcolo (algoritmo) integrerà NUOVI indicatori UX come fattori di ranking e posizionamento per la SEO.
Google si affiderà a dati veri, reali, generati dalle sessioni vere raccolte dal browser Chrome (non da tool)
Chi si occupa di SEO ( IL o LA SEO?!) capisce la portata della rivoluzione: ci sono quindi poche settimane per ottimizzare la #UX del sito se si vuole mantenere o crescere il posizionamenti su Google.
Ecco la parte 1 del ciclo formativo rivolto ai responsabili marketing e digital in collaborazione con NETCOMM Italia
Sometimes you want to do Domain-Driven Design, but the bad guys are against you. Sometimes you need tobe the bad guy. This is Domain-Driven Design in a bloody brownfield scenario.
Slides dalle lezioni del corso "Strumenti e applicazioni del Web" per il corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13
Lezione 4 del 12 e 13 marzo 2013
MageDay 2013 - Magento e TYPO3: una soluzione integrataMauro Lorenzutti
Il modulo CMS per la gestione dei contenuti integrato in Magento è piuttosto limitato e richiede un minimo di competenze per un suo utilizzo efficace. Se comparato poi con altri prodotti dedicati espressamente alla gestione di contenuti, bisogna ammettere che non è altrettanto facile e ricco di funzionalità. Proprio per questi motivi abbiamo deciso di sopperire alle mancanze di Magento integrando un CMS Open Source (TYPO3 nel nostro caso) che permettesse di gestire in modo semplice ed efficace tutta la parte di comunicazione che in un sito di ecommerce è ormai fondamentale. Durante il talk andremo quindi ad analizzare il modulo CMS di Magento e le ragioni che ci hanno spinto a realizzare questa integrazione. Quindi approfondiremo come è stata realizzata l'integrazione tra le due piattaforme, analizzando le modalità di integrazione del layout e di utilizzo delle API di Magento per l'inclusione delle sue componenti. Esperienza questa che può essere estesa ad altri CMS.
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!
Every millisecond counts: Techniques, strategies, and tools for a Web Perform...Codemotion
Developers, Designers, and Project Managers love to promise high performance for their web apps. But they know they're lying. In fact most of the websites fail from a performance point of view. In this talk I focus on every aspect and strategy that you have to consider to to fulfill the promise: performance metrics, measurements and monitoring strategy, optimization best practices, the paradox of third-party content, image rendering, browser performance tools. With one goal in mind: finding small changes that led to some of the biggest performance gains.
Larus: Il forte impatto della Graph Technology: l'esperienza di LARUS e numer...Neo4j
Anna Stevanato, Head of Marketing, Larus Business Automation
Lorenzo Speranzoni, CEO, Larus Business Automation
LARUS Business Automation, prima realtà italiana a credere in Neo4j, presenterà importanti use case di successo realizzati in ambiti quali la pubblica amministrazione, la logistica e i settori bancario, finanziario e assicurativo. Oltre alla duratura e solida partnership con Neo4j, LARUS vanta ormai quasi 15 anni di esperienza con i Grafi durante i quali ha costruito sul campo forti competenze. Nasce così Galileo.XAI, l’Insight Graph Data Platform che, incorporando il Graph DB di Neo4j, la Graph Visualization e l’Intelligenza Artificiale Spiegabile, si propone di rendere la rivoluzionaria Graph Technology accessibile anche ai profili business.
Viral Marketing & Cloud: come creare una Customer Experience perfettaseeweb
Come il Cloud e la sua scalabilità infinita influiscono sulla fruizione dei contenuti social?
Facebook, Twitter, YouTube, Linkendin: oggi la comunicazione passa quasi solo da qui e se è una comunicazione di successo, la piattaforma tecnologica che c’è dietro è essenziale per reggere il carico rappresentato dagli accessi simultanei e dalle condivisioni.
Nelle slide viene spiegato come la viralità dei contenuti richieda un adeguato supporto dell'infrastruttura Cloud e del sito che li ospita.
Similar to HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario (20)
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Codemotion
Increased complexity makes it very hard and time-consuming to keep your software bug-free and secure. We introduce fuzz-testing as a method for automatically and continuously discovering vulnerabilities hidden in your code. The talk will explain how fuzzing works and how to integrate fuzz-testing into your Software Development Life Cycle to increase your code’s security.
Pompili - From hero to_zero: The FatalNoise neverending storyCodemotion
It was 1993 when we decided to venture in a beat'em up game for Amiga. The Catalypse's success story pushed me and my comrade to create something astonishing for this incredible game machine... but things went harder, assumptions were slightly different, and italian competitors appeared out of nowhere... the project died in 1996. Story ended? Probably not...
Il Commodore 65 è un prototipo di personal computer che Commodore avrebbe dovuto mettere in commercio quale successore del Commodore 64. Purtroppo la sua realizzazione si fermò appunto allo stadio prototipale. Racconterò l'affascinante storia del suo sviluppo ed il perchè della soppressione del progetto ormai ad un passo dalla immissione in commercio.
Rivivere l'ebbrezza di progettare un vecchio computer o una consolle da bar è oggi possibile sfruttando le FPGA, ovvero logiche programmabili che consentono a chiunque di progettare il proprio hardware o di ricrearne uno del passato. In questa sessione si racconta come dal reverse engineering dell'hardware di vecchie glorie come il Commodore 64 e lo ZX Spectrum sia stato possibile farle rivivere attraverso tecnologie oggi alla portata di tutti.
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Codemotion
There's a lot of talk about blockchain, but how does the technology behind it actually work? For developers, getting some hands-on experience is the fastest way to get familiair with new technologies. So let's build a blockchain, then! In this session, we're going to build one in plain old Java, and have it working in 40 minutes. We'll cover key concepts of a blockchain: transactions, blocks, mining, proof-of-work, and reaching consensus in the blockchain network. After this session, you'll have a better understanding of core aspects of blockchain technology.
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Codemotion
When was the last time you were truly lost? Thanks to the maps and location technology in our phones, a whole generation has now grown up in a world where getting lost is truly a thing of the past. Location technology goes far beyond maps in the palm of our hand, however. In this talk, we will explore how a ridesharing app works. How do we discover our destination?How do we find the closest driver? How do we display this information on a map? How do we find the best route?To answer these questions,we will be learning about a variety of location APIs, including Maps, Positioning, Geocoding etc.
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Codemotion
Eward Driehuis, SecureLink's research chief, will guide you through the bumpy ride we call the cyber threat landscape. As the industry has over a decade of experience of dealing with increasingly sophisticated attacks, you might be surprised to hear more attacks slip through the cracks than ever. From analyzing 20.000 of them in 2018, backed by a quarter of a million security events and over ten trillion data points, Eward will outline why this happens, how attacks are changing, and why it doesn't matter how neatly or securely you code.
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 - Codemotion
IoT revolution is ended. Thanks to hardware improvement, building an intelligent ecosystem is easier than never before for both startups and large-scale enterprises. The real challenge is now to connect, process, store and analyze data: in the cloud, but also, at the edge. We’ll give a quick look on frameworks that aggregate dispersed devices data into a single global optimized system allowing to improve operational efficiency, to predict maintenance, to track asset in real-time, to secure cloud-connected devices and much more.
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Codemotion
What if Virtual Reality glasses could transform your environment into a three-dimensional work of art in realtime in the style of a painting from Van Gogh? One of the many interesting developments in the field of Deep Learning is the so called "Style Transfer". It describes a possibility to create a patchwork (or pastiche) from two images. While one of these images defines the the artistic style of the result picture, the other one is used for extracting the image content. A team from TNG Technology Consulting managed to build an AI showcase using OpenCV and Tensorflow to realize such goggles.
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Codemotion
Blockchain (and Cryptocurrency) is an evolution of 20-year old research from scientists like Chaum, Lamport, and Castro & Liskov. Due to the current hype, it's hard to distinguish beneficial aspects of the technology from a desire for a "silver bullet" for device security, verifiable logistics, or "saving democracy". The problem: blockchain introduces new security challenges - and blind adoption without understanding reduces overall security. In this talk, Melanie Rieback and Klaus Kursawe explain the pitfalls and limits of blockchain, so you can avoid making your applications LESS secure.
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Codemotion
Networking is a core part of computing in the digital world we inhabit. But, how well do you know how it works? Do you understand all the moving parts of the OSI stack inside your computer, and how the network is actually put together? How can this ever work? This guided safari of layers, standards, protocols, and happenstance will bring us close to the copper wire, and up through the layers of CDMA/CD, ARP, routing and HTTP. We will make a few excursions through patchworks that still work forty years later, and cleverly designed mechanisms that show that simplicity is the only way to last.
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Codemotion
Performance tests are not only an important instrument for understanding a system and its runtime environment. It is also essential in order to check stability and scalability – non-functional requirements that might be decisive for success. But won't my cloud hosting service scale for me as long as I can afford it? Yes, but… It only operates and scales resources. It won't automatically make your system fast, stable and scalable. This talk shows how such and comparable questions can be clarified with performance tests and how DevOps teams benefit from regular test practise.
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Codemotion
Sascha will demonstrate the opportunities and challenges of Conversational AI learned from the practice. Both Technology and User Experience will be covered introducing a process finding micro-moments, writing happy paths, gathering intents, designing the conversational flow, and finally publishing on almost all channels including Voice Services and Chatbots. Valuable for enterprises, developers, and designers. All live on stage in just minutes and with almost no code.
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Codemotion
A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Codemotion
Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...Codemotion
Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Codemotion
Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Codemotion
The design space has exploded in size within the last few years and Sketch is one of the most important milestones to represent the phenomenon. But behind the scenes of this growing reality there is a remote team that revolutionizes the design space all without leaving the home office. This talk will present how Sketch has grown to become a modern, product designer's tool.
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Codemotion
Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Codemotion
What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
1. HTML5, CSS3 e JavaScript
Web app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - m.casario@comtaste.com
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
2. Chi sono
Copyright 2013 www.marcocasario.com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
3. I miei ultimi libri
Copyright 2013 www.marcocasario.com 3
sabato 23 marzo 13
4. I miei corsi
Copyright 2013 www.marcocasario.com 3
Rich Web Apps con HTML5
Responsive Design con HTML5 e
CSS3
sabato 23 marzo 13
6. Il web è cambiato
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
7. Smartphones superano i PC
Leggi: www.businessweek.com/technology/content/apr2011/
tc20110418_512247.htm
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
8. Il Web è uscito dal desktop
Copyright 2013 www.marcocasario.com 29
sabato 23 marzo 13
9. Dove gli utenti usano il mobile
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
10. RESPONSIVE
Copyright 2013 www.marcocasario.com - CONFIDENZIALE - 15
Le opzioni
OTTIMIZZATO
NATIVO
IBRIDO
WEB STORE
Retail
Search
Software As a Service
Siti d’informazione e blogs
Portfolio
Magazine
Softwares
Videogiochi
Finanza
Softwares
Videogiochi
Multimedia
sabato 23 marzo 13
11. Versioni ottimizzate per mobile
Che succede se il link è condiviso sui social
network ?
Copyright 2013 www.marcocasario.com 30
sabato 23 marzo 13
12. Responsive Web Design
Il movimento del Responsive Web Design risale ad un
articolo del 2010 di Ethan Marcotte scritto per A List
Apart titled “Responsive Web Design.” in cui dichiarava:
responsive design is not about “designing for mobile.”
But it’s not about “designing for the desktop,” either.
Rather, it’s about adopting a more flexible, device-
agnostic approach to designing for the web
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
15. Difficult to see. Always in
motion is the future.
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
16. Non si compete con la tecnologia
Copyright 2013 www.marcocasario.com 31
Non possiamo creare una versione
ottimizzata per ogni dispositivo che uscirà
sul mercato.
sabato 23 marzo 13
18. Quando sarà finito HTML5
Il W3C ha presentato un piano secondo il quale le
specifiche di HTML5 saranno finali e consolidate a fine
2014
Le specifiche HTML 5.1 saranno invece finalizzate per il
2016.
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
20. Top 5 HTML5 Mobile Features
Geolocation
Offline Application
CSS3 Media Queries
Video and Audio
Canvas and WebGL
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
23. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Gli utenti che navigano il web dai dispositivi
mobili hanno bisogno dello stesso contenuto di
quelli che usano il web browser dal desktop ?
sabato 23 marzo 13
24. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
sabato 23 marzo 13
25. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
E’ corretto pensare che l’utente seduto davanti
al desktop può “digerire” più informazioni,
mentre chi naviga col cellulare è on the move e
quindi non può concentrarsi su troppo
contenuto ?
sabato 23 marzo 13
26. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Non si può rispondere a queste domande
senza conoscere in maniera approfondita
quelli che sono gli obiettivi degli utenti finali.
sabato 23 marzo 13
27. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Cross-screen Web App
Workflow
sabato 23 marzo 13
36. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Testo su dispositivi mobili per valutare
contenuti e application flow
4.
sabato 23 marzo 13
37. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Ciclo di revisione e creazione dei
visuals e style guide
5.
sabato 23 marzo 13
38. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Markup dei visuals con stili grafici
6.
sabato 23 marzo 13
45. Ingredienti per il RWD
Copyright 2013 www.marcocasario.com 33
★Flexible Grid-based layout
★Flexible images and media
★Media Queries
sabato 23 marzo 13
46. Copyright 2013 www.marcocasario.com 36
Creare griglie flessibili
Libro: Ordering Disorder: Grid Principles for Web Design,
sabato 23 marzo 13
47. Adaptive Images - W3C
Copyright 2013 www.marcocasario.com 47
Esistono già diverse soluzioni ed approcci al problema,
anche se sono articolate e non sempre risolvono
interamente il problema.
Esiste un progetto standard del W3C ma che ancora non
è supportato dai browser (dati di Novembre 2012)
www.responsiveimages.org
sabato 23 marzo 13
50. Media Queries
Copyright 2013 www.marcocasario.com 36
Sintassi della media query:
@media screen and (min-width: 960px) {
body {
font-family: 'Merriweather Sans', sans-serif;
font-weight:300;
font-style:normal;
}
}
Se il browser risponde alle due query, allora viene
caricato il css definito al suo interno.
sabato 23 marzo 13
51. Caricamento dei Media Queries
Copyright 2013 www.marcocasario.com 36
Le media queries possono essere embeddate nello
stylesheet:
@media screen and (min-width: 960px) {
body{
font-size: 16px;
}
}
o importate nel documento come foglio esterno:
<link href="style.css" media="only screen and (min-
width: 960px)" />
sabato 23 marzo 13
52. Caricamento dei Media Queries
Copyright 2013 www.marcocasario.com 36
Media queries embeddate nello stylesheet
★vengono caricate dal browser anche se non utilizzate,
ma effettuano una sola chiamata HTTP.
Media queries importate come foglio esterno
★vengono caricate tutte :/ con l’aggravante che le
chiamate HTTP sono tante quanti i fogli di sitle da
caricare !
sabato 23 marzo 13
53. Media Queries
Copyright 2013 www.marcocasario.com 36
Se hai un layout fisso, convertilo in fluido
prima di iniziare a scrivere le media queries.
sabato 23 marzo 13
55. Strumenti per i test
Copyright 2013 www.marcocasario.com 36
http://responsive.victorcoulon.fr
Responsive Design Bookmarklet
sabato 23 marzo 13
56. Approccio per creare le MQ
Copyright 2013 www.marcocasario.com 36
Lasciarsi guidare dal contenuto
DEMO: Lanciare il mediaQuery Bookmarklet
sabato 23 marzo 13
57. CSS Frameworks
Copyright 2013 www.marcocasario.com 36
Sono un insieme di CSS files che
contengono delle regole.
Queste regole determinano il layout ed il
contenuto di una pagina html
sabato 23 marzo 13
58. Scegliere un framework
Copyright 2013 www.marcocasario.com 36
Esistono centinaia di framework.
I framework possono essere riassunti in 3 tipi:
★UI Frameworks (Bootstrap)
★Framework omnicomprensivi (Foundation4, Gumby,
YAML, )
★Framework minimali (es. Skeleton, Base, Kube, Goldilocks)
sabato 23 marzo 13
60. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Scegliere un framework significa usare l’approccio allo
sviluppo di qualcun’altro.
Scegliere un framework significa ridurre i tempi di
sviluppo (il più delle volte)
Scegliere un framework significa non dover reinventare
la ruota ogni volta (consistenza tra i browsers, hacks ..)
Scegliere un framework significa usare uno standard e
delle convenzioni nello sviluppo.
sabato 23 marzo 13
61. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Il mio consiglio ?
Fatevi una lista degli obiettivi del vostro progetto:
compatibilità tra browser, velocità di sviluppo, aiuto sul layout,
etc.
Provate tanti framework, capite quali soluzioni sono state
trovate e come sono state implementate.
Imparate dalle loro best practice.
Depurate il codice che non usate ma che è incluso nel
framework
sabato 23 marzo 13
62. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Il mio consiglio ?
Infine scegliete quello che è più vicino al vostro approccio
considerando anche aspetti di diffusione e di community.
Se proprio non riuscite, allora createvi il vostro framework !
Leggete bene il licensing.
sabato 23 marzo 13
64. Copyright 2013 www.marcocasario.com 36
RESS: Responsive Server
Tecnica che usa il server per
generare il codice a seconda
del dispositivo intercettato.
sabato 23 marzo 13
68. Copyright 2013 www.marcocasario.com 36
Performance
Da studi di ricerca del settore
si evince che gli utent si
aspettano di vedere la pagina
caricata entro 2 secondi.
Dopo il 3 secondo il 40% degli
utenti abbandona il sito.
sabato 23 marzo 13
69. Copyright 2013 www.marcocasario.com 36
Performance
Amazon ha dichiarato che ogni
100ms di tempo aggiunto al
caricamento di una pagina fa
decrementare le vendite del
1%
sabato 23 marzo 13
70. Copyright 2013 www.marcocasario.com 36
Performance
Il RWD se approcciato male può
drammaticamente impattare sulle
performance e sui tempi di caricamento
delle pagine.
sabato 23 marzo 13
73. Copyright 2013 www.marcocasario.com 36
Performance
Rimuovi dai CSS gli statement orfani.
Usa tool appositi www.sitepoint.com/dustmeselectors/
sabato 23 marzo 13
74. Copyright 2013 www.marcocasario.com 36
Performance
Misura le performance dei CSS3
http://andy.edinborough.org/CSS-Stress-Testing-and-
Performance-Profiling
sabato 23 marzo 13
75. Copyright 2013 www.marcocasario.com 36
Performance
CSS minification
http://www.csscompressor.com/
PS: Usa il <link> invece del @import per permettere il download
parallello
sabato 23 marzo 13
76. Copyright 2013 www.marcocasario.com 36
Performance
Ottimizzare l’uso delle immagini.
Usare gli Sprites
http://alistapart.com/article/sprites
http://spriteme.org/
sabato 23 marzo 13
77. Copyright 2013 www.marcocasario.com 36
Performance
Usare la tecnica del Data URIs
.embeddedImg {
background-image: url("data:image/
png;base64,iVBORw0KGgoAAAANS ...
UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");
}
http://software.hixie.ch/utilities/cgi/data/data
http://www.motobit.com/util/base64-decoder-encoder.asp
sabato 23 marzo 13
79. Copyright 2013 www.marcocasario.com 36
Performance
Comprimi le immagini.
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/
sabato 23 marzo 13
80. Copyright 2013 www.marcocasario.com 36
Performance
Ottimizza la sintassi JavaScript
Evita l’uso dell’eval()
Fai attenzione all’uso di with
Evita il try..catch (se sai che un errore si verificherà
sicuramente)
sabato 23 marzo 13
81. Copyright 2013 www.marcocasario.com 36
Performance
Pubblica i file Javascript e CSS su un
subdomain diverso dal markup.
Questo permette il caricamento parallelo
delle risorse.
sabato 23 marzo 13
84. Connessione – Detect client side
Copyright 2013 www.marcocasario.com 53
W3C Network Information API
Usa la proprietà navigator.connection.type che ritorna
WIFI, CELL_2G, CELL_3G
if
(navigator.connection.type==navigator.connection.WIFI)
{ }
sabato 23 marzo 13
87. Redirect – Do not !
Copyright 2013 www.marcocasario.com 56
Evitare i redirect
Il sito sarà più SEO-friendly
Alcuni browser mobile possono presentare dei problemi
sabato 23 marzo 13
88. Gestures – Touch not Click
Copyright 2013 www.marcocasario.com 57
I device touch hanno un ritardo nel click tra i 300 e i
500 ms prima di essere eseguiti !
Utilizza l’evento onTouchEvent (datatype ACTION_UP)
Attenzione all’evento onTouchStart perchè a volte il tap
risulta troppo responsive ma causa lo scrolling ad essere
inusabile.
sabato 23 marzo 13
89. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 58
Parsare Javascript richiede tempo
(anche 100ms per 1Kb)
sabato 23 marzo 13
90. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 59
Ti serve veramente un
framework ?
Jquery impiega 6 secondi ad essere parsato
su alcuni dispositivi.
sabato 23 marzo 13
91. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 60
Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.
sabato 23 marzo 13
92. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 61
Usa micro frameworks o creati le tue mini
libraries
★ XUI
★ zepto.js
★ microjs
sabato 23 marzo 13
93. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 62
Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()
sabato 23 marzo 13
94. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 63
Usare HTML5 Application Cache
<html manifest="example.appcache“>
sabato 23 marzo 13
95. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 64
Usare HTML5 Local Storage
Ricorda che lo storage di stringhe è 2 volte più veloce
dello storage di oggetti
Su mobile puoi considerare fino a 2 Mb.
sabato 23 marzo 13
96. Persistent Cache Size by Browser
Copyright 2013 www.marcocasario.com 64
sabato 23 marzo 13
103. Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura client
Questa potrebbe essere una lista dei moduli JS che il
client deve gestire:
★Navigation
★Remote Data Access
★Authentication/Authorization
★Decouple View from Application Model (MVC pattern)
★Modularization/Packaging
★Dependency Management
★Logging/Tracing
★Exception Handling
sabato 23 marzo 13
104. Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura client
Questa potrebbe essere una lista dei moduli JS che il
client deve gestire:
★Backbone.js – Javascript MVC/Navigation framework
★Require.js – AMD based module organization and
library dependency management
★_Underscore.js – Provide functional programming
features to Javascript
★Jquery Mobile – Document Object Model(DOM) access
and manipulation
★Zepto.js - MVC framework compatibile Jquery
★XUI.js, Flight by Twitter
sabato 23 marzo 13
106. Emulatori
Copyright 2013 www.marcocasario.com 51
Ne esistono tantissimi, molti dei quali gratuiti.
Sono utili come prima fase di testing e non possono
essere considerati affidabili al 100%
http://www.mobilexweb.com/emulators
sabato 23 marzo 13
107. HTML5, CSS3 e JavaScript
Web app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - m.casario@comtaste.com
www.linkedin.com/in/marcocasario
sabato 23 marzo 13