Slide 1
Slide 1 text
Tudo o que a
web
ainda será
podia ser
uma análise de tecnologias
Slide 2
Slide 2 text
jcemer.com
github.com/jcemer
twi5er.com/jcemer
speakerdeck.com/jcemer
Slide 3
Slide 3 text
porto alegre
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Espaço em que as interações
entre humanos e máquinas
acontecem
Interface de usuário
h"p:/
/en.wikipedia.org/wiki/User_interface
Slide 7
Slide 7 text
$_
Linha de
comando
Slide 8
Slide 8 text
$_
Linha de
comando
x
x
Aplicações
na?vas
Slide 9
Slide 9 text
$_
Linha de
comando
x
x
Aplicações
na?vas
ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
Web
x
Slide 10
Slide 10 text
1. Tecnologias para
criação de interfaces
2. Evolução e situação
das tecnologias web
3. NaCvo vs Web
4. PerspecCvas futuras
da web
Slide 11
Slide 11 text
Tecnologias para
criação de interfaces
de linha de comando
Slide 12
Slide 12 text
#!/usr/bin/env bash
set -e
issue_number="$1"
usage() {
echo "git test "
}
if [ -z "$issue_number" ]; then
usage
exit 1
fi
git fetch --prune
remote_branch="$(git branch -a | grep remotes | grep $issue_number | cat)"
if [ -z "$remote_branch" ]; then
echo "Issue $issue_number not found"
exit 1
fi
remote_branch="${remote_branch##*/}"
git checkout ${remote_branch}
h"ps:/
/github.com/juanibiapina/git-‐flow
Slide 13
Slide 13 text
Tecnologias para
criação de interfaces
naCvas
Slide 14
Slide 14 text
#include
static void
activate (GtkApplication *app,
gpointer user_data) {
GtkWidget *window;
GtkWidget *button;
GtkWidget *button_box;
window = gtk_application_window_new (app);
gtk_window_set_title (GTK_WINDOW (window), "Window");
gtk_window_set_default_size (GTK_WINDOW (window), 200, 200);
button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
gtk_container_add (GTK_CONTAINER (window), button_box);
button = gtk_button_new_with_label ("Hello World");
g_signal_connect (button, "clicked", G_CALLBACK (print_hello), NULL);
g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy)
, window);
gtk_container_add (GTK_CONTAINER (button_box), button);
gtk_widget_show_all (window);
}
int
main (int argc, char **argv) {
/* ... */
}
h"ps:/
/developer.gnome.org/gtk3/stable/gtk-‐
ge@ng-‐started.html
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Programadores que não entendem
Cobol são arrastadores de objetos
h"ps:/
/www.youtube.com/watch?v=EK49T77VQOQ
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Tecnologias atuais
para criação de
interfaces
naCvas
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Slide 26
Slide 26 text
Linguagens de programação
maduras mas com uma definição
de interface engessada
uClizando XML
Slide 27
Slide 27 text
Tecnologias web
atuais para criação
de interfaces
Slide 28
Slide 28 text
HTML & CSS
(& SVG)
Slide 29
Slide 29 text
ActiveReports Document
@page{size: 8.5in 11in;margin-top:0.2in;margin-left:0.8in;margin-right:
0.4in;margin-bottom:0.2in;}
Nils Ericsonsgymnasiet
span>
FP1AMA1201
Nr
span>
Slide 30
Slide 30 text
HTML Canvas Audio
Video
App
Cache
Input
types
CSS 2 Transforms AnimaCon Gradient Flexbox Filter
SVG
Especificações
Slide 31
Slide 31 text
Responsive
Design
Sistemas de
escrita de CSS
WAI-‐ARIA
Microformats
Padrões
Slide 32
Slide 32 text
HTML & CSS
(& SVG)
As tecnologias evoluíram e são
uma óCma opção
Slide 33
Slide 33 text
JavaScript
Slide 34
Slide 34 text
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
Slide 35
Slide 35 text
Apesar de ser uma linguagem muito
fácil de aprender e escrever, o
JavaScript nasceu com uma série de
deficiências
Slide 36
Slide 36 text
1995
Slide 37
Slide 37 text
2008
Slide 38
Slide 38 text
JS Object
properCes
Array
manipulaCon
Arrow
funcCons
Block
scoping
Classes Default
parameter
values
Destructuring
Assignments
Iterators
Generators Modules Rest
parameters
Spread
operator
Template
strings
Especificações
Slide 39
Slide 39 text
JavaScript
A tecnologia evoluiu e
atualmente é uma boa opção
Slide 40
Slide 40 text
DHTML jQuery Backbone.js AngularJS
Ember.js D3.js
QUnit React JSBlocks
Bibliotecas e
frameworks
Slide 41
Slide 41 text
JavaScript
A comunidade evoluiu a
maneira de uClizar a tecnologia
Slide 42
Slide 42 text
jQuery
plugins
Twiier
Bootstrap
Zurb
FoundaCon
AngularJS
DirecCves
jQueryUI
Componentes
de interface
Slide 43
Slide 43 text
HTML &
CSS &
JS
As tecnologias e comunidade
evoluíram, as tecnologias são uma
óCma opção
Slide 44
Slide 44 text
NaCvo vs
Web
Slide 45
Slide 45 text
Acesso a recursos de
entrada e saída
São estes recursos que permitem
a interface humano e máquina
Slide 46
Slide 46 text
HTML 5
JavaScript APIs
Slide 47
Slide 47 text
JavaScript em
2011 + APIs
JavaScript
em 2008
Slide 48
Slide 48 text
Captura e
geração de áudio
Comandos de
voz
Controle por
toque
Captura de
imagem
NaCvo
Web
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Web Audio API &
getUserMedia()
Permitem capturar, processar e
sinteCzar áudio
Slide 51
Slide 51 text
Web Audio API &
getUserMedia()
Permitem capturar, processar e
sinteCzar áudio
navigator.getUserMedia({ audio: true },
onStream,
onStreamError);
h"p:/
/webaudioapi.com
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Web Speech API
Ainda bem incipiente mas uma
óCma promessa
h"p:/
/updates.html5rocks.com/2013/01/Voice-‐Driven-‐
Web-‐Apps-‐IntroducUon-‐to-‐the-‐Web-‐Speech-‐API
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
getUserMedia()
Permite capturar e processar
imagens e vídeos
Slide 56
Slide 56 text
getUserMedia()
Permite capturar e processar
imagens e vídeos
navigator.getUserMedia({ video: true },
function (stream) {
video.src = window.URL.createObjectURL(stream);
}
);
h"p:/
/www.html5rocks.com/en/tutorials/getusermedia/intro
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Controle por
toque
Geolocalização
Controle de
vibração
NaCvo
Mobile
Web
Slide 59
Slide 59 text
Touch Events
Vetor de eventos gerados através
de toques na interface
Slide 60
Slide 60 text
Touch Events
Vetor de eventos gerados através
de toques na interface
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchleave", handleEnd, false);
el.addEventListener("touchmove", handleMove, false);
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
GeolocaCon API
Acessa a localização através
do GPS, IP e wifi
Slide 63
Slide 63 text
GeolocaCon API
Acessa a localização através
do GPS, IP e wifi
navigator.geolocation.getCurrentPosition(function (position) {
position.coords.latitude;
position.coords.longitude;
});
h"ps:/
/developer.mozilla.org/en-‐US/docs/Web/API/
GeolocaUon/Using_geolocaUon
Slide 64
Slide 64 text
VibraCon API
Permite gerar um feedback táCl
Slide 65
Slide 65 text
VibraCon API
Permite gerar um feedback táCl
navigator.vibrate([50, 100, 150]);
h"p:/
/davidwalsh.name/vibraUon-‐api
Slide 66
Slide 66 text
EmiCr
noCficações
Condição da
conexão
Condição da
bateria
NaCvo
Mobile
Web
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
NoCficaCon API
Permite disparar uma noCficação
para o navegador
Slide 69
Slide 69 text
NoCficaCon API
Permite disparar uma noCficação
para o navegador
var notification = new Notification(title, options);
h"ps:/
/developer.mozilla.org/en/docs/
Web/API/noUficaUon
Slide 70
Slide 70 text
Online / Offline
Status e Events
Permitem checar e monitorar a
conexão com a Internet
Slide 71
Slide 71 text
Online / Offline
Status e Events
Permitem checar e monitorar a
conexão com a Internet
navigator.onLine;
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
h"ps:/
/developer.mozilla.org/en-‐US/docs/
Online_and_offline_events
Slide 72
Slide 72 text
Baiery Status API
Permitem checar e monitorar a
bateria do disposi?vo
Slide 73
Slide 73 text
Baiery Status API
Permitem checar e monitorar a
bateria do disposi?vo
navigator.getBattery().then(function(battery) {
battery.charging;
battery.level;
battery.chargingTime;
battery.dischargingTime;
battery.addEventListener('levelchange', function() {});
});
Slide 74
Slide 74 text
Sensores de
movimento
Acesso a
Fullscreen
Capturar
luminosidade
...
h"p:/
/mobilehtml5.org
h"p:/
/html5please.com
NaCvo
Mobile
Web
Slide 75
Slide 75 text
A maioria dos recursos naCvos estão
disponíveis através de APIs
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
PerspecCvas
futuras
Slide 78
Slide 78 text
Web
Components
Slide 79
Slide 79 text
Permite isolar código HTML o
mantendo livre de interferências
da página
Shadow DOM
Slide 80
Slide 80 text
@jcemer
Slide 81
Slide 81 text
Porto Alegre
Brasil - RS
Brasil - RS
Slide 82
Slide 82 text
Permitem definir e assisCr ao
ciclo de vida de elementos
Custom Elements
Slide 83
Slide 83 text
Slide 84
Slide 84 text
document.querySelector('img').src = 'diego.jpg'
Slide 85
Slide 85 text
Elemento criado
Adicionado ou
removido do
DOM
Alteração nos
atributos
Custom
Elements
Slide 86
Slide 86 text
Muta?on Observers oferece
maior poder e controle dos
elementos e atributos do DOM
h"ps:/
/developer.mozilla.org/en/docs/Web/API/
MutaUonObserver
*
Slide 87
Slide 87 text
h"ps:/
/speakerdeck.com/jcemer/
componentes-‐para-‐a-‐web
Slide 88
Slide 88 text
Data binding
Slide 89
Slide 89 text
Conexão entre a lógica de
negócio da aplicação e sua
interface de usuário
Data binding
Slide 90
Slide 90 text
ESTADOS
CIDADES
Slide 91
Slide 91 text
ESTADOS
CIDADES
JS
SERVER
Slide 92
Slide 92 text
ESTADOS
CIDADES
var model = { cities: [] };
$('#state').on('change', function () {
model.cities = [
'Porto Alegre',
'Canoas'
];
});
Object.observe(model, function () {
// check changes and update cities
});
h"ps:/
/jsfiddle.net/p0857yyt
Slide 93
Slide 93 text
h"p:/
/leobalter.github.io/
data-‐binding-‐slides/output/#1
Slide 94
Slide 94 text
Service
Workers
Slide 95
Slide 95 text
Serviços instalados por uma
página web que são manCdos
pelo navegador
Service workers
Slide 96
Slide 96 text
Os Service Workers poderão
interceptar chamadas a rede e
manter um cache permanente de
requisições
Experiência
Offline rica
Slide 97
Slide 97 text
ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
x
ENCONTRO
LOCAWEB
PALESTRANTES
x
ENCONTRO
LOCAWEB
INSCREVA-SE
PREENCHENDO
SEUS DADOS
ABAIXO
x
SERVICE WORKER
CACHE
Slide 98
Slide 98 text
ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
x
ENCONTRO
LOCAWEB
PALESTRANTES
x
ENCONTRO
LOCAWEB
INSCREVA-SE
PREENCHENDO
SEUS DADOS
ABAIXO
x
SERVICE WORKER
CACHE
Slide 99
Slide 99 text
Service
Workers
Background
Sync
Push
NoCficaCons
Geofencing e
Alarmes
Especificações
de API
Slide 100
Slide 100 text
h"p:/
/www.slideshare.net/
caelumdev/serviceworkers-‐sergio
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
The Web may not be the only way to deliver
so5ware, but it's one that works now and
will con+nue to work for a long +me.
Web-‐based applica
Slide 103
Slide 103 text
Obrigado
Always bet on web!
@jcemer even.tc/rsjs-‐2015/?code=17elw