De la site-uri mai performante la jocuri web multiplayer

Serban Ghita

Senior Software Engineer

  • 5 ani in Avangate
  • 11 ani in IT & eCommerce
  • 2002 - primul job in IT
  • contribui la proiecte open-source

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Despre mine

Serban Ghita

Senior Software Engineer

In Avangate lucrez in prezent la:

  • Control Panel
  • Shopping Cart
  • Shopping Cart API
Despre mine

Avangate Control Panel

Despre mine

Avangate Shopping Cart

Despre mine

Avangate Shopping Cart

Despre mine

Open-source

https://github.com/serbanghita

Sa ne cunoastem

  • Cati dintre voi au folosit elemente sau atribute HTML5?
  • Cati dintre voi folositi JavaScript sau librarii JavaScript?
  • Cati dintre voi au dezvoltat aplicatii web de tip single-page?

Agenda prezentare

  • Termeni noi utilizati in prezentare – 10 min
  • Ce este HTML5 – 1 min
  • Care sunt noile elemente si atribute (exemple) – 30 min
  • Pauza intrebari – 15 min
  • Care sunt noile API-uri (exemple) – 50 min
  • Pauza intrebari – 15 min
  • Pauza cafea – 20 min
  • Studii de caz – 30 min

Termeni noi

  • Progressive enhancement
  • Mobile first
  • Polyfills
  • Milestones / Legacy
  • Browser compatibility
Termeni noi

Progressive enhancement

Stategie de web design prin care toti vizitatorii site-ului pot experimenta cel putin o versiune de baza functionala. Cei ce au browsere sau conexiuni mult mai capabile vor beneficia de o experienta de navigare imbunatatita.

Alternativa la stategia "Graceful degradation".

Ex: CSS3 border-radius, box-shadow, gradients, etc.

Termeni noi

Mobile first

Strategie de web design prin care este conceput un site destinat dispozitivelor clasice si mobile.

De citit: Desktop-first to Mobile-first with Bootstrap - Mark Otto

Termeni noi

Polyfills

Un cod (de regula JavaScript) ce suplineste o functionalitate indisponibila in browser-ul vizitatorului.

A nu se confunda cu widgets, care de fapt adauga functionalitati noi.

Exemple polyfills: Modernizr Wiki
Exemplu widget: <input type="range"> - implementare jQuery Mobile

Termeni noi

Milestones / Legacy

Un software ce a fost facut acum cativa ani si care este utilizat de clienti in mod activ nu poate fi rescris peste noapte si nici nu poate fi intrerupt pentru un upgrade major.

Un milestone reprezinta un capitol nou in viata unui software ce poate functiona in mod diferit fata de cele anterioare, care devin automat legacy.

Exemplu: Avangate Template Editor

Termeni noi

Browser compatibility

Abilitatea unui browser de a recunoaste o functionalitate noua.

caniuse.com/...

Ce este HTML5?

Ce este HTML5?

Va multumesc

O seara minunata in continuare!

Ce este HTML5

  1. upgrade de la HTML 4.01 si XHTML 1.1
  2. tag-uri si atribute noi
  3. API-uri noi (in majoritate JavaScript)
  4. o abordare diferita in constructia paginilor web
  5. renuntare totala la librarii 3rd party
    (Flash, Silverlight, Java applets, etc)

Noutati importante in HTML5

Elemente si atribute HTML

APIuri

De retinut: Elementele si atributele noi simuleaza
comportamentul unor widget-uri JavaScript populare.

Credits: Sergey Mavrody

Tag-uri si atribute

Reguli de parsare a paginilor mult mai relaxate.

Atat <img src="test.jpg" /> cat si <img src="test.jpg"> sunt acceptate.

Tag-uri si atribute

Elemente noi

<article> <aside> <header> <nav> <footer> <section> <main> <summary> <details> <figure> <figcaption> <time> <datalist>

<canvas> <audio> <track> <video> <embed> <source>

<menu> <menuitem> <keygen> <mark> <meter> <progress>
<rp> <rt> <ruby> <wbr> <bdi> <command> <output> <data>

Tag-uri si atribute

Noi tipuri de campuri pentru formulare

email, number, search, url, range, date, time, tel, color

De retinut: Influenteaza comportamentul browserelor de pe dispozitivele mobile.

Tag-uri si atribute

<input type="text">

Tag-uri si atribute

<input type="email">

Tag-uri si atribute

<input type="number">

Tag-uri si atribute

<input type="url">

Tag-uri si atribute

<input type="date">

Tag-uri si atribute

<input type="time">

Tag-uri si atribute

Atribute noi pentru campuri

placeholder, pattern, required, autofocus, list, min, max, step

Tag-uri si atribute

Atribute noi pentru elemente

  • Atributul type="" este optional pentru <script> si <style>
  • <meta charset="...">
  • <script async src="...">
  • Atributele data-* pot sa contina orice fel de date.
    Ex: <span data-userid="1234">Nume</span> elem.dataset.userid
  • elem.contenteditable si document.designMode
Tag-uri si atribute

Diferente de markup

Urmeaza exemple de cod HTML5.

Tag-uri si atribute

Combatibilitate tag-uri noi HTML5

~9
Tag-uri si atribute

Microdata

  • Ce este microdata?
  • Cum se aplica pe Internet
  • Exemplu live
Tag-uri si atribute

Microdata

Este un set de atribute HTML ce se aplica peste elementele HTML existente in pagina pentru a da textului un inteles semantic specific. (ex. eveniment, review, produs, etc)

Este folosit de motoarele de cautare in afisarea rezultatelor dar si de parserele diverselor servicii social media.

Exista 3 scheme microdata, insa cel mai popular este schema.org.

Tag-uri si atribute

Microdata

Cum este aplicat la Google

  • Article
  • Book Reviews
  • Events
  • Local Businesses
  • Movies
  • Products
  • Restaurants
  • Software Applications
  • TV Episodes

Intrebari

Urmeaza API-uri HTML5

APIuri

Sumar
  • Web Storage
  • Offline Web Applications
  • WebWorkers
  • WebSockets
  • Geolocation
  • Device orientation
  • Touch events
  • Video & Audio
  • Speech input
  • Canvas 2D
  • SVG
  • WebSQL & IndexedDB
APIuri

Device orientation change

APIuri

Device orientation change

APIuri

Video & Audio

APIuri

SVG

Intrebari

Urmeaza studii de caz

Pauza

20 min

Studii de caz

  • Avangate Mobile Shopping Cart
  • Avangate Visitor Web App
  • Chess Web App
  • Cut the Rope
  • Joc multiplayer
Studii de caz

Avangate Mobile Shopping Cart

Demo: live test

Studii de caz

Avangate Mobile Shopping Cart

A trebuit sa alegem o solutie care sa fie disponibila implicit pentru vizitatori.
Solutia trebuia sa fie usor de intretinut si compatibila cu iOS, Android OS si Windows Phone OS.

  • Twitter Bootstrap
  • jQTouch
  • jQuery Mobile
  • De la 0

.v.2.0 - http://getbootstrap.com/2.3.2/

v.3.0 - http://getbootstrap.com

Beta, acum se numeste jQT - http://jqtjs.com

Castigatorul a fost jQuery Mobile - http://jquerymobile.com

Studii de caz

Avangate Visitor Web App

Demo: remote

Studii de caz

Chess Web App

Live Demo: Chess Web Application
Source: GitHub
Studii de caz

Cut the rope

Jocul vine sub forma de aplicatie nativa pentru iOS si Android OS. Pentru dispozitivele clasice s-a folosit HTML5 canvas.

Studii de caz

Joc multiplayer

  • Joculet facut seara tarziu.
  • Introduceti-va numele (cat mai unic).
  • Intrati de pe laptop-uri,tablete,smartphones.
  • Tastatura sau device orientation.
  • game.ghita.org

Multumesc!