Tudo o que a web (podia ser) ainda será

Transcript

1. Tudo  o  que  a   web   ainda  será podia  ser uma  análise  de  tecnologias
2. jcemer.com   github.com/jcemer   twi5er.com/jcemer   speakerdeck.com/jcemer
3. porto  alegre
6. 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
7. $_ Linha  de  
 comando
8. $_ Linha  de  
 comando x x Aplicações   na?vas
9. $_ Linha  de  
 comando x x Aplicações   na?vas ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES Web x
10. 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  
11. Tecnologias  para   criação  de  interfaces   de  linha  de  comando
12. #!/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} h"ps:/ /github.com/juanibiapina/git-­‐flow
13. Tecnologias  para   criação  de  interfaces   naCvas
14. #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) { /* ... */ } h"ps:/ /developer.gnome.org/gtk3/stable/gtk-­‐ ge@ng-­‐started.html
17. Programadores  que  não  entendem   Cobol  são  arrastadores  de  objetos h"ps:/ /www.youtube.com/watch?v=EK49T77VQOQ
19. Tecnologias  atuais   para  criação  de   interfaces  
 naCvas
22. <?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
25. <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"/>
26. Linguagens  de  programação   maduras  mas  com  uma  definição   de  interface  engessada   uClizando  XML
27. Tecnologias  web   atuais  para  criação   de  interfaces
28. HTML  &  CSS   (&  SVG)
29. <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>
30. HTML Canvas Audio
 Video App  
 Cache Input
 types CSS  2 Transforms AnimaCon Gradient Flexbox Filter SVG Especificações
31. Responsive  
 Design Sistemas  de  
 escrita  de  CSS WAI-­‐ARIA Microformats Padrões
32. HTML  &  CSS   (&  SVG) As  tecnologias  evoluíram  e  são   uma  óCma  opção
33. JavaScript
34. 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];} }
35. Apesar  de  ser  uma  linguagem  muito   fácil  de  aprender  e  escrever,  o   JavaScript  nasceu  com  uma  série  de   deficiências
38. 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
39. JavaScript A  tecnologia  evoluiu  e   atualmente  é  uma  boa  opção
40. DHTML jQuery Backbone.js AngularJS Ember.js D3.js QUnit React JSBlocks Bibliotecas  e   frameworks
41. JavaScript A  comunidade  evoluiu  a   maneira  de  uClizar  a  tecnologia
42. jQuery
 plugins Twiier
 Bootstrap Zurb
 FoundaCon AngularJS
 DirecCves jQueryUI Componentes   de  interface
43. HTML  &  
 CSS  &   JS As  tecnologias  e  comunidade   evoluíram,  as  tecnologias  são  uma   óCma  opção
44. NaCvo  vs
 Web
45. Acesso  a  recursos  de  
 entrada  e  saída   São  estes  recursos  que  permitem   a  interface  humano  e  máquina
46. HTML  5   JavaScript  APIs
47. JavaScript  em  
 2011  +  APIs JavaScript  
 em  2008
48. Captura  e  
 geração  de  áudio   Comandos  de  
 voz   Controle  por
 toque   Captura  de  
 imagem NaCvo   Web
50. Web  Audio  API  &
 getUserMedia() Permitem  capturar,  processar  e   sinteCzar  áudio
51. Web  Audio  API  &
 getUserMedia() Permitem  capturar,  processar  e   sinteCzar  áudio navigator.getUserMedia({ audio: true }, onStream, onStreamError); h"p:/ /webaudioapi.com
53. 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
55. getUserMedia() Permite  capturar  e  processar   imagens  e  vídeos
56. 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
58. Controle  por
 toque   Geolocalização   Controle  de  
 vibração NaCvo
 Mobile   Web
59. Touch  Events Vetor  de  eventos  gerados  através   de  toques  na  interface
60. 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);
62. GeolocaCon  API Acessa  a  localização  através   do  GPS,  IP  e  wifi
63. 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
64. VibraCon  API Permite  gerar  um  feedback  táCl
65. VibraCon  API Permite  gerar  um  feedback  táCl navigator.vibrate([50, 100, 150]); h"p:/ /davidwalsh.name/vibraUon-­‐api
66. EmiCr  
 noCficações   Condição  da  
 conexão   Condição  da  
 bateria NaCvo
 Mobile   Web
68. NoCficaCon  API Permite  disparar  uma  noCficação   para  o  navegador
69. 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
70. Online  /  Offline  
 Status  e  Events Permitem  checar  e  monitorar  a   conexão  com  a  Internet
71. 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
72. Baiery  Status  API Permitem  checar  e  monitorar  a   bateria  do  disposi?vo
73. 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() {}); });
74. Sensores  de
 movimento   Acesso  a
 Fullscreen   Capturar
 luminosidade   ... h"p:/ /mobilehtml5.org
 h"p:/ /html5please.com NaCvo
 Mobile   Web
75. A  maioria  dos  recursos  naCvos  estão   disponíveis  através  de  APIs
77. PerspecCvas   futuras
78. Web   Components
79. Permite  isolar  código  HTML  o   mantendo  livre  de  interferências   da  página Shadow  DOM
80. <div twitter-user=“jcemer”></div> @jcemer
81. <div gmaps-locale="Porto Alegre"> <div data-address-modal> Porto Alegre<br> Brasil - RS </div> </div> Porto Alegre
 Brasil - RS
82. Permitem  definir  e  assisCr  ao   ciclo  de  vida  de  elementos Custom  Elements
83. <img src="jcemer.jpg" alt="Tableless Guy">
84. <img src="diego.jpg" alt="Tableless Guy"> <script> document.querySelector('img').src = 'diego.jpg' </script>
85. Elemento  criado   Adicionado  ou  
 removido  do
 DOM   Alteração  nos  
 atributos Custom  
 Elements
86. Muta?on  Observers  oferece
 maior  poder  e  controle  dos   elementos  e  atributos  do  DOM h"ps:/ /developer.mozilla.org/en/docs/Web/API/ MutaUonObserver *
87. h"ps:/ /speakerdeck.com/jcemer/ componentes-­‐para-­‐a-­‐web
88. Data  binding
89. Conexão  entre  a  lógica  de   negócio  da  aplicação  e  sua   interface  de  usuário Data  binding
90. ESTADOS CIDADES
91. ESTADOS CIDADES JS SERVER
92. 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
93. h"p:/ /leobalter.github.io/
 data-­‐binding-­‐slides/output/#1
94. Service
 Workers
95. Serviços  instalados  por  uma   página  web  que  são  manCdos   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
99. Service
 Workers Background
 Sync Push  
 NoCficaCons Geofencing  e  
 Alarmes Especificações de  API
100. h"p:/ /www.slideshare.net/ caelumdev/serviceworkers-­‐sergio
102. 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<ons  are  cheap  to   develop,  and  easy  for  even  the  smallest   startup  to  deliver.   Paul  Graham Setembro  de  2001 h"p:/ /www.paulgraham.com/road.html
103. Obrigado Always  bet  on  web! @jcemer even.tc/rsjs-­‐2015/?code=17elw