SlideShare una empresa de Scribd logo
1 de 75
Descargar para leer sin conexión
MODERN MOBILE WEB DEVELOPMENT
Michał Płachta
MICHAŁ
PŁACHTA
Team Leader
SchibstedTech Polska
DLACZEGO?
DLACZEGO?
DLACZEGO?
BO NAM KAZALI
DLACZEGO?
Z PASJI
DLA PIENIĘDZY
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 URZĄDZENIACH 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>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<figure>
<figcaption>
<img>
<footer>
<ARTICLE> & <SECTION>
<ASIDE> & <NAV>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<figure>
<figcaption>
<img>
<footer>
<DETAILS> & <SUMMARY>
<FIGURE> & <FIGCAPTION>
Sources: html5doctor.com
<HEADER> & <FOOTER>
<header>
<aside>
<nav>
<main>
<article>
<section>
<h1>
<figure>
<figcaption>
<img>
<footer>
<MAIN>
<main>
<article>
<section>
<h1>
<figure>
<figcaption>
<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
- WARTOŚCI
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 ZAMÓWIEŃ!
Sources: html5rocks.com
WYDAJNOŚĆ
• CSS najpierw, JS na koniec
• Kompresuj obrazki, minifikuj CSS, JS, HTML
• Ładuj tylko niezbędne dane, resztę doładuj
później
• Używaj PageSpeed Insights
DEMO
http://www.bbc.com/

http://www.tvn24.pl/
XMLHTTPREQUEST2
• Ustalanie formatu odpowiedzi
XMLHTTPREQUEST2
• Wysyłanie formularzy
XMLHTTPREQUEST2
• Zapytania pomiędzy domenami
lub
WEB WORKERS
• Kod JS, który wykonuje się w tle
i nie obciąża okna przeglądarki
Modern Mobile Web Development - AGH, March 2015
HTML5 APP CACHE
• Pozwala cachować
aplikację tak, że nie
potrzebuje ona dostępu
do internetu żeby
funkcjonować
• Generalnie nie działa,
nie warto
LOCAL STORAGE
• Przechowywanie danych “klucz”:“wartość”
• Wartość może być tylko ciągiem 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 protokołu, działa 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/suffick/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ł Płachta

michal.plachta@schibsted.pl

Más contenido relacionado

Similar a Modern Mobile Web Development - AGH, March 2015

Delphi. Techniki bazodanowe i internetowe
Delphi. Techniki bazodanowe i internetoweDelphi. Techniki bazodanowe i internetowe
Delphi. Techniki bazodanowe i internetoweWydawnictwo Helion
 
Hacking Internet of Things
Hacking Internet of ThingsHacking Internet of Things
Hacking Internet of ThingsSecuRing
 
Interfejs użytkownika w aplikacji mobilnej - LWUIT
Interfejs użytkownika w aplikacji mobilnej - LWUITInterfejs użytkownika w aplikacji mobilnej - LWUIT
Interfejs użytkownika w aplikacji mobilnej - LWUITDariusz Walczak
 
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...ecommerce poland expo
 
Windows phone jak uniknąć błędów przy projektowaniu aplikacji targi mobilne...
Windows phone jak uniknąć błędów przy projektowaniu aplikacji   targi mobilne...Windows phone jak uniknąć błędów przy projektowaniu aplikacji   targi mobilne...
Windows phone jak uniknąć błędów przy projektowaniu aplikacji targi mobilne...Piotr Biegun
 
TI- internet-wyklad
TI- internet-wykladTI- internet-wyklad
TI- internet-wykladEwaB
 
Macromedia Flash 8. Oficjalny podręcznik
Macromedia Flash 8. Oficjalny podręcznikMacromedia Flash 8. Oficjalny podręcznik
Macromedia Flash 8. Oficjalny podręcznikWydawnictwo Helion
 
Kwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiejKwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiejArkadiusz Stęplowski
 
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...Brief
 
Prostota i mozliwosci symfony2
Prostota i mozliwosci symfony2Prostota i mozliwosci symfony2
Prostota i mozliwosci symfony2Natalia Stanko
 
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...Logicaltrust pl
 
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?eTechnologie sp. z o.o.
 
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?PHPCon Poland
 

Similar a Modern Mobile Web Development - AGH, March 2015 (20)

Czym Jest Web 2.0?
Czym Jest Web 2.0?Czym Jest Web 2.0?
Czym Jest Web 2.0?
 
Delphi. Techniki bazodanowe i internetowe
Delphi. Techniki bazodanowe i internetoweDelphi. Techniki bazodanowe i internetowe
Delphi. Techniki bazodanowe i internetowe
 
Otwarta chmura Microsoft
Otwarta chmura MicrosoftOtwarta chmura Microsoft
Otwarta chmura Microsoft
 
Hacking Internet of Things
Hacking Internet of ThingsHacking Internet of Things
Hacking Internet of Things
 
Interfejs użytkownika w aplikacji mobilnej - LWUIT
Interfejs użytkownika w aplikacji mobilnej - LWUITInterfejs użytkownika w aplikacji mobilnej - LWUIT
Interfejs użytkownika w aplikacji mobilnej - LWUIT
 
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...
TARGI MOBILNE, DZIEN I, SALA A, Windows Phone - jak uniknąć błędów przy proje...
 
Windows phone jak uniknąć błędów przy projektowaniu aplikacji targi mobilne...
Windows phone jak uniknąć błędów przy projektowaniu aplikacji   targi mobilne...Windows phone jak uniknąć błędów przy projektowaniu aplikacji   targi mobilne...
Windows phone jak uniknąć błędów przy projektowaniu aplikacji targi mobilne...
 
Prezentacja Eb Devoxx2009
Prezentacja Eb Devoxx2009Prezentacja Eb Devoxx2009
Prezentacja Eb Devoxx2009
 
Jaki framework wybrać
Jaki framework wybraćJaki framework wybrać
Jaki framework wybrać
 
TI- internet-wyklad
TI- internet-wykladTI- internet-wyklad
TI- internet-wyklad
 
Macromedia Flash 8. Oficjalny podręcznik
Macromedia Flash 8. Oficjalny podręcznikMacromedia Flash 8. Oficjalny podręcznik
Macromedia Flash 8. Oficjalny podręcznik
 
Kwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiejKwerenda biblioteczna do pracy licencjackiej
Kwerenda biblioteczna do pracy licencjackiej
 
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...
Czy firmy powinny stawiać na tworzenie własnych aplikacji, czy na wersje mobi...
 
Projektowanie i programowanie aplikacji nowej generacji
Projektowanie i programowanie aplikacji nowej generacjiProjektowanie i programowanie aplikacji nowej generacji
Projektowanie i programowanie aplikacji nowej generacji
 
Flash MX 2004. Biblia
Flash MX 2004. BibliaFlash MX 2004. Biblia
Flash MX 2004. Biblia
 
Prostota i mozliwosci symfony2
Prostota i mozliwosci symfony2Prostota i mozliwosci symfony2
Prostota i mozliwosci symfony2
 
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...
Co z bezpieczeństwem aplikacji mobilnych? - studium przypadków (KrakWhiteHat ...
 
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?
Jak wykorzystać nowe technologie w pracy z uczniem zdolnym?
 
Silverlight i PHP
Silverlight i PHPSilverlight i PHP
Silverlight i PHP
 
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
 

Modern Mobile Web Development - AGH, March 2015