modern mobile web development - agh, march 2015

Download Modern Mobile Web Development - AGH, March 2015

Post on 18-Jul-2015

62 views

Category:

Internet

5 download

Embed Size (px)

TRANSCRIPT

  • MODERN MOBILE WEB DEVELOPMENTMicha Pachta

  • MICHA PACHTA

    Team LeaderSchibsted Tech Polska

  • DLACZEGO?

  • DLACZEGO?

  • DLACZEGO?

    BO NAM KAZALI

  • DLACZEGO?

    Z PASJI

  • DLA PIENIDZY

  • 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 URZDZENIACH MOBILNYCH

    109 milionw

    2,1 miliarda

    2010

    2016Sources: downgraf.com

  • HTML5 - SEMANTYKA

  • &

  • &

  • &

  • &

    Sources: html5doctor.com

  • &

  • I want to draw more here.attention

  • MEDIA QUERIES

  • MEDIA QUERIES - PODSTAWY

  • MEDIA QUERIES - WARTOCI

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

    http://mediaqueri.es

  • 1 SEKUNDA OPNIENIA W ADOWANIU STRONY TO

    NAWET 7% MNIEJ ZAMWIE!

    Sources: html5rocks.com

  • WYDAJNO

    CSS najpierw, JS na koniec

    Kompresuj obrazki, minifikuj CSS, JS, HTML

    aduj tylko niezbdne dane, reszt doaduj pniej

    Uywaj PageSpeed Insights

  • DEMOhttp://www.bbc.com/

    http://www.tvn24.pl/

  • XMLHTTPREQUEST2 Ustalanie formatu odpowiedzi

  • XMLHTTPREQUEST2 Wysyanie formularzy

  • XMLHTTPREQUEST2 Zapytania pomidzy domenami

    lub

  • WEB WORKERS Kod JS, ktry wykonuje si w tle

    i nie obcia okna przegldarki

  • 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 moe by tylko cigiem znakw.

  • WEBSQL Lokalna baza danych SQLite

  • FILE API

    Odczytywanie plikw z dysku uytkownika

    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 protokou, dziaa z uyciem HTTP

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

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

  • CANVAS DEMOhttp://codepen.io/suck/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 Pachtamichal.plachta@schibsted.pl