Modern Mobile Web Development - AGH, March 2015

MODERN MOBILE WEB DEVELOPMENTMichał Płachta

MICHAŁ PŁACHTA

Team LeaderSchibsted Tech Polska

DLACZEGO?

DLACZEGO?

DLACZEGO?

BO NAM KAZALI

DLACZEGO?

Z PASJI

DLA PIENIĘDZY

Luca Bruno / APThe 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 / APSt. Peter's Basilica at the Vatican, on March 13, 2013.

Sources: photoblog.nbcnews.com

Internet connected devices

PC/Laptop

Smartphone

Tablet

Games Console

Smart TV

Smart Watch

Smart Wristband 7%

9%

34%

37%

47%

80%

91%

Sources: globalwebindex.net, smartinsights.com

91%

5%4%

MobileMobile + TabletMobile + Tablet + PC

0

500

1000

1500

2000

2007 2008 2009 2010 2011 2012 2013 2014 2015

PCMobile

RWD VS APP

PLATFORMY

PLATFORMY

PLATFORMY

PLATFORMY

HTML5 W URZĄDZENIACH MOBILNYCH

109 milionów

2,1 miliarda

2010

2016Sources: downgraf.com

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>

MEDIA QUERIES

MEDIA QUERIES - PODSTAWY

MEDIA QUERIES - WARTOŚCI

DEMOhttp://www.webdesignerwall.com/demo/media-queries/

http://mediaqueri.es

1 SEKUNDA OPÓŹNIENIA W ŁADOWANIU STRONY TO

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

DEMOhttp://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

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

DEMOhttp://www.dropzonejs.com

DEMOhttp://www.w3.org/2010/05/video/mediaevents.html

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)

WEB SOCKETS

• Komunikacja z serwerem w czasie rzeczywistym.

• Chaty, xmpp, soap it'd

DEMOhttp://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

CSS 3D DEMOhttp://desandro.github.io/3dtransforms/

WEBGL DEMOhttps://www.chromeexperiments.com/webgl

CANVAS DEMOhttp://codepen.io/suffick/pen/KrAwx

SVG DEMOhttp://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łachtamichal.plachta@schibsted.pl