Uma análise de tecnologias para criação de interfaces.

1. Você precisa
aprender Web
uma análise de tecnologias

2. jcemer.com
github.com/jcemer
twitter.com/jcemer
speakerdeck.com/jcemer

3. porto alegre

6. A Internet conecta computadores,
a Web conecta pessoas
http://www.computerhistory.org/revolution/networking/19/314
Internet e Web

7. JavaScript
Web APIs
HTML
CSS
básico
comunicação
scripting
gráficos
HTTP
TCP/IP
SVG
WebGL

8. JavaScript
Web APIs
HTML
CSS
interface
SVG
WebGL

9. Conjunto de tecnologias para
construir interfaces com o usuário
Web

10. Espaço em que as interações entre
humanos e máquinas acontecem
Interface de usuário
http://en.wikipedia.org/wiki/User_interface

11. $_
Linha de
comando

12. $_
Linha de
comando
x
x
Aplicações
nativas

13. $_
Linha de
comando
x
x
Aplicações
nativas
ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
Web
x

14. Tecnologias para
criação de interfaces
de linha de comando

15. #!/usr/bin/env bash
set -e
issue_number="$1"
usage() {
echo "git test <issue-number>"
}
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}
https://github.com/juanibiapina/git-flow

16. Tecnologias para
criação de interfaces
nativas

17. #include <gtk/gtk.h>
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) {
/* ... */
}
https://developer.gnome.org/gtk3/stable/gtk-
getting-started.html

21. Tecnologias atuais
para criação de
interfaces
nativas

24. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136"
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
</dependencies>
<scenes>
<!--Master-->
<scene sceneID="pY4-Hu-kfo">
<objects>
<navigationController title="Master" id="RMx-3f-FxP" sceneMemberID="viewController">
<navigationBar key="navigationBar" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill"
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<connections>
<segue destination="7bK-jq-Zjz" kind="relationship" relationship="rootViewController" id="tsl-Nk-0bq"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="8fS-aE-onr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-38" y="-630"/>
</scene>
<!--Detail-->
<scene sceneID="yUG-lL-AsK">
<objects>
<viewController title="Detail" id="JEX-9P-axG" customClass="DetailViewController" sceneMemberID="viewController
<layoutGuides>
<viewControllerLayoutGuide type="top" id="SYR-Wa-9uf"/>
<viewControllerLayoutGuide type="bottom" id="GAO-Cl-Wes"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="svH-Pt-448">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" text="Detail view
<rect key="frame" x="20" y="292" width="560" height="17"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<fontDescription key="fontDescription" type="system" size="system"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"
<constraints>
<constraint firstItem="0XM-y9-sOw" firstAttribute="leading" secondItem="svH-Pt-448" secondAttribute
<constraint firstItem="0XM-y9-sOw" firstAttribute="centerY" secondItem="svH-Pt-448" secondAttribute

27. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.embarque.embarque.activities.AccurateFeedback">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="110dp" />
<View
android:id="@+id/layer"
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="@drawable/backbar"/>

28. Linguagens de programação
maduras mas com uma definição
de interface engessada
utilizando XML

29. Tecnologias web
atuais para criação
de interfaces

30. HTML & CSS
(& SVG)

31. <html>
<head>
<title>
ActiveReports Document
</title><meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
</head><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
<style>
@page{size: 8.5in 11in;margin-top:0.2in;margin-left:0.8in;margin-right:
0.4in;margin-bottom:0.2in;}
</style><div style="page-break-inside:avoid;">
<div style="position:relative;width:7.3in;height:10.6in;">
<span style="position:absolute;top:0.7638889in;left:0.06388891in;width:
1.954615in;height:0.2061111in;font-family:Times New Roman;font-size:
10pt;color:#000000;vertical-align:top;"><nobr>Nils Ericsonsgymnasiet</nobr></
span>
<span style="position:absolute;top:0.9838889in;left:0.06388891in;width:
1.560914in;height:0.2461111in;font-family:Times New Roman;font-size:
14pt;color:#000000;vertical-align:top;"><nobr>FP1AMA1201</nobr></span>
<span style="position:absolute;top:1.467736in;left:0.001999974in;width:
7.265717in;height:0.01in;overflow:hidden;background-color:Black;"></span>
<span style="position:absolute;top:1.243889in;left:0.06388891in;width:
0.2861111in;height:0.2061111in;font-family:Times New Roman;font-size:
10pt;color:#000000;font-weight:bold;vertical-align:top;"><nobr>Nr</nobr></
span>
<span style="position:absolute;top:1.467736in;left:0.001999974in;width:
7.265717in;height:0.01in;overflow:hidden;background-color:Black;"></span>
<span style="position:absolute;top:1.243889in;left:0.4638888in;width:</body>
</html>

32. HTML Canvas Audio
Video
App
Cache
Input
types
CSS 2 Transforms Animation Gradient Flexbox Filter
SVG
Especificações

33. Responsive
Design
Sistemas de
escrita de CSS
WAI-ARIAMicroformats
Padrões

34. HTML & CSS
(& SVG)
As tecnologias evoluíram e são
uma ótima opção

35. JavaScript

36. function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function MM_preloadImages() { //
v3.0document.getElementById('navcontainer').style.visibility = 'hidden';
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&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<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}

37. Apesar de ser uma linguagem muito fácil
de aprender e escrever, o JavaScript
nasceu com uma série de deficiências

38. 1995

39. 2008

40. JS Object
properties
Array
manipulation
Arrow
functions
Block
scoping
Classes Default
parameter
values
Destructuring
Assignments
Iterators
Generators Modules Rest
parameters
Spread
operator
Template
strings
Especificações

41. JavaScriptA tecnologia evoluiu e
atualmente é uma boa opção

42. DHTML jQuery Backbone.js AngularJS
Ember.js D3.jsQUnit React JSBlocks
Bibliotecas e
frameworks

43. JavaScriptA comunidade evoluiu a
maneira de utilizar a tecnologia

44. jQuery
plugins
Twitter
Bootstrap
Zurb
Foundation
AngularJS
Directives
jQueryUI
Componentes
de interface

45. HTML &
CSS &
JSAs tecnologias e comunidade
evoluíram, as tecnologias são uma
ótima opção

46. Nativo vs
Web

48. Deepest engagement for the
longest period of time happens in
apps, so apps matter, and they
matter desperately for brands who
want to connect to customers.
http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-
is-2x-bigger-than-app-traffic-and-growing-faster/

49. [...] no-one is going to install an app
for each company, service, or site
he or she interacts with, your
mobile web experience has to be
good, and it has to be strong.
http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-
is-2x-bigger-than-app-traffic-and-growing-faster/

50. http://electron.atom.io

51. Acesso a recursos de
entrada e saída
São estes recursos que permitem
a interface humano e máquina

52. HTML 5
JavaScript APIs

53. JavaScript em
2011 + APIs
JavaScript
em 2008

54. Captura e
geração de áudio
Comandos de
voz
Controle por
toque
Captura de
imagem
Nativo
Web

56. Web Audio API &
getUserMedia()
Permitem capturar, processar e
sintetizar áudio

57. Web Audio API &
getUserMedia()
Permitem capturar, processar e
sintetizar áudio
navigator.getUserMedia({ audio: true },
onStream,
onStreamError);
http://webaudioapi.com

59. Web Speech API
Ainda bem incipiente mas uma
ótima promessa
http://updates.html5rocks.com/2013/01/Voice-Driven-
Web-Apps-Introduction-to-the-Web-Speech-API

61. getUserMedia()
Permite capturar e processar
imagens e vídeos

62. getUserMedia()
Permite capturar e processar
imagens e vídeos
navigator.getUserMedia({ video: true },
function (stream) {
video.src = window.URL.createObjectURL(stream);
}
);
http://www.html5rocks.com/en/tutorials/getusermedia/intro

64. Controle por
toque
Geolocalização
Controle de
vibração
Nativo
Mobile
Web

65. Touch Events
Vetor de eventos gerados através
de toques na interface

66. 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);

68. Geolocation API
Acessa a localização através
do GPS, IP e wifi

69. Geolocation API
Acessa a localização através
do GPS, IP e wifi
navigator.geolocation.getCurrentPosition(function (position) {
position.coords.latitude;
position.coords.longitude;
});
https://developer.mozilla.org/en-US/docs/Web/API/
Geolocation/Using_geolocation

70. Vibration API
Permite gerar um feedback tátil

71. Vibration API
Permite gerar um feedback tátil
navigator.vibrate([50, 100, 150]);
http://davidwalsh.name/vibration-api

72. Emitir
notificações
Condição da
conexão
Condição da
bateria
Nativo
Mobile
Web

74. Notification API
Permite disparar uma notificação
para o navegador

75. Notification API
Permite disparar uma notificação
para o navegador
var notification = new Notification(title, options);
https://developer.mozilla.org/en/docs/
Web/API/notification

76. Online / Offline
Status e Events
Permitem checar e monitorar a
conexão com a Internet

77. 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);
https://developer.mozilla.org/en-US/docs/
Online_and_offline_events

78. Battery Status API
Permitem checar e monitorar a
bateria do dispositivo

79. Battery Status API
Permitem checar e monitorar a
bateria do dispositivo
navigator.getBattery().then(function(battery) {
battery.charging;
battery.level;
battery.chargingTime;
battery.dischargingTime;
battery.addEventListener('levelchange', function() {});
});

80. http://mobilehtml5.org

81. http://html5please.com

82. A maioria dos recursos nativos estão
disponíveis através de APIs

84. Perspectivas
futuras

85. Web
Components

86. Permite isolar código HTML o
mantendo livre de interferências
da página
Shadow DOM

87. <div twitter-user=“jcemer”></div>
@jcemer

88. <div gmaps-locale="Porto Alegre">
<div data-address-modal>
Porto Alegre<br> Brasil - RS
</div>
</div>
Porto Alegre
Brasil - RS

89. Permitem definir e assistir ao
ciclo de vida de elementos
Custom Elements

90. <img src="jcemer.jpg" alt="Tableless Guy">

91. <img src="diego.jpg" alt="Tableless Guy">
<script>
document.querySelector('img').src = 'diego.jpg'
</script>

92. Elemento criado
Adicionado ou
removido do
DOM
Alteração nos
atributos
Custom
Elements

93. https://speakerdeck.com/jcemer/
componentes-para-a-web

94. Service
Workers

95. Serviços instalados por uma
página web que são mantidos
pelo navegador
Service workers

96. Os Service Workers poderão
interceptar chamadas a rede e
manter um cache permanente de
requisições
Experiência
Offline rica

97. ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
x
ENCONTRO
LOCAWEB
PALESTRANTES
x
ENCONTRO
LOCAWEB
INSCREVA-SE
PREENCHENDO
SEUS DADOS
ABAIXO
x
SERVICE WORKER
CACHE

98. ENCONTRO
LOCAWEB
CONHEÇA OS
PALESTRANTES
x
ENCONTRO
LOCAWEB
PALESTRANTES
x
ENCONTRO
LOCAWEB
INSCREVA-SE
PREENCHENDO
SEUS DADOS
ABAIXO
x
SERVICE WORKER
CACHE

100. A Web terá suporte a Push
Notifications através dos Service
Workers
https://developers.google.com/web/updates/2015/03/push-
notificatons-on-the-open-web

101. Service
Workers
Background
Sync
Push
Notifications
Geofencing e
Alarmes
Especificações

102. http://www.slideshare.net/
caelumdev/serviceworkers-sergio

104. The Web may not be the only way to deliver
software, but it's one that works now and
will continue to work for a long time.
Web-based applications are cheap to
develop, and easy for even the smallest
startup to deliver.
Paul Graham
Setembro de 2001
http://www.paulgraham.com/road.html

105. ObrigadoAlways bet on web!
@jcemer