際際滷

際際滷Share a Scribd company logo
MODERN MOBILE WEB DEVELOPMENT
Micha Pachta
MICHA
PACHTA
Team Leader
SchibstedTech Polska
DLACZEGO?
DLACZEGO?
DLACZEGO?
BO NAM KAZALI
DLACZEGO?
Z PASJI
DLA PIENIDZY
Luca Bruno / AP
The faithful gather in 2005 near St. Peter's to witness Pope John Paul
II's body being carried into the Basilica for public viewing.
Sources: photoblog.nbcnews.com
Michael Sohn / AP
St. Peter's Basilica at theVatican, on March 13, 2013.
Sources: photoblog.nbcnews.com
Internet connected devices
PC/Laptop
Smartphone
Tablet
Games Console
SmartTV
Smart Watch
Smart Wristband 7%
9%
34%
37%
47%
80%
91%
Sources: globalwebindex.net, smartinsights.com
91%
5%
4%
Mobile
Mobile +Tablet
Mobile +Tablet + PC
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
PC
Mobile
RWDVS APP
PLATFORMY
PLATFORMY
PLATFORMY
PLATFORMY
HTML5
W URZDZENIACH MOBILNYCH
109
milion坦w
2,1
miliarda
2010
2016
Sources: downgraf.com
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
HTML5 - SEMANTYKA
 <article>
 <aside>
 <details>
 <鍖gcaption>
 <鍖gure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<鍖gure>
<鍖gcaption>
<img>
<footer>
<ARTICLE> & <SECTION>
<ASIDE> & <NAV>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<鍖gure>
<鍖gcaption>
<img>
<footer>
<DETAILS> & <SUMMARY>
<FIGURE> & <FIGCAPTION>
Sources: html5doctor.com
<HEADER> & <FOOTER>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<鍖gure>
<鍖gcaption>
<img>
<footer>
<MAIN>
<main>
<article>
<section>
<h1>
<鍖gure>
<鍖gcaption>
<img>
<header>
<aside>
<nav>
<footer>
<MARK>
I want to draw more here.attention
<TIME>
Modern Mobile Web Development - AGH, March 2015
MEDIA QUERIES
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
Modern Mobile Web Development - AGH, March 2015
MEDIA QUERIES - PODSTAWY
MEDIA QUERIES
- WARTOCI
DEMO
http://www.webdesignerwall.com/demo/media-queries/
http://mediaqueri.es
Modern Mobile Web Development - AGH, March 2015
1 SEKUNDA OP店NIENIA W
ADOWANIU STRONYTO
NAWET 7% MNIEJ ZAMWIE!
Sources: html5rocks.com
WYDAJNO
 CSS najpierw, JS na koniec
 Kompresuj obrazki, mini鍖kuj CSS, JS, HTML
 aduj tylko niezbdne dane, reszt doaduj
p坦添niej
 U甜ywaj PageSpeed Insights
DEMO
http://www.bbc.com/

http://www.tvn24.pl/
XMLHTTPREQUEST2
 Ustalanie formatu odpowiedzi
XMLHTTPREQUEST2
 Wysyanie formularzy
XMLHTTPREQUEST2
 Zapytania pomidzy domenami
lub
WEB WORKERS
 Kod JS, kt坦ry wykonuje si w tle
i nie obci甜a okna przegldarki
Modern Mobile Web Development - AGH, March 2015
HTML5 APP CACHE
 Pozwala cachowa
aplikacj tak, 甜e nie
potrzebuje ona dostpu
do internetu 甜eby
funkcjonowa
 Generalnie nie dziaa,
nie warto
LOCAL STORAGE
 Przechowywanie danych klucz:warto
 Warto mo甜e by tylko cigiem znak坦w.
WEBSQL
 Lokalna baza danych SQLite
FILE API
 Odczytywanie plik坦w z dysku u甜ytkownika
 http://www.dropzonejs.com
DEMO
http://www.dropzonejs.com
Modern Mobile Web Development - AGH, March 2015
DEMO
http://www.w3.org/2010/05/video/mediaevents.html
Modern Mobile Web Development - AGH, March 2015
GEOLOKALIZACJA
Sources: blog.teamtreehouse.com
MOTION & ORIENTATION
Sources: blog.teamtreehouse.com
CAMERA & STREAMS
Sources: blog.teamtreehouse.com
VIBRATION
Sources: blog.teamtreehouse.com
INNE
 Flashlight/Ambient light
 Proximity
 Battery status
 Contacts (development)
 Messages (development)
 Telephony (development)
 WebNFC (development)
Modern Mobile Web Development - AGH, March 2015
WEB SOCKETS
 Komunikacja z serwerem w czasie rzeczywistym.
 Chaty, xmpp, soap it'd
DEMO
http://www.socket.io/
SERVER SIDE EVENTS
 Starsze i prostsze ni甜 web sockets.
 Komunikacja tylko w jedn stron: serwer - klient
 Nie wymaga specjalnego protokou, dziaa z
u甜yciem HTTP
Modern Mobile Web Development - AGH, March 2015
CSS 3D DEMO
http://desandro.github.io/3dtransforms/
WEBGL DEMO
https://www.chromeexperiments.com/webgl
CANVAS DEMO
http://codepen.io/su鍖ck/pen/KrAwx
SVG DEMO
http://snapsvg.io/demos/
PYTANIA?
INFORMACJE DODATKOWE
 Google Page Insights
 https://developers.google.com/speed/pagespeed/
insights/
 https://www.google.com/webmasters/tools/mobile-
friendly/
GOOGLE PAGE INSIGHTS
KONTAKT
 Aleksandra Niemyska:
aleksandra.niemyska@schibsted.pl
 Micha Pachta
michal.plachta@schibsted.pl

More Related Content

Modern Mobile Web Development - AGH, March 2015