Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Jean Carlo Emer

May 07, 2015
Tweet

More Decks by Jean Carlo Emer

Other Decks in Technology

Transcript

  1. Tudo  o  que  a   web   ainda  será podia

     ser uma  análise  de  tecnologias
  2. 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
  3. $_ Linha  de  
 comando x x Aplicações   na?vas

    ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES Web x
  4. 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  
  5. #!/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
  6. #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
  7. <?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
  8. <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"/>
  9. <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>
  10. HTML Canvas Audio
 Video App  
 Cache Input
 types CSS

     2 Transforms AnimaCon Gradient Flexbox Filter SVG Especificações
  11. 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];} }
  12. Apesar  de  ser  uma  linguagem  muito   fácil  de  aprender

     e  escrever,  o   JavaScript  nasceu  com  uma  série  de   deficiências
  13. 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
  14. HTML  &  
 CSS  &   JS As  tecnologias  e

     comunidade   evoluíram,  as  tecnologias  são  uma   óCma  opção
  15. Acesso  a  recursos  de  
 entrada  e  saída   São

     estes  recursos  que  permitem   a  interface  humano  e  máquina
  16. Captura  e  
 geração  de  áudio   Comandos  de  


    voz   Controle  por
 toque   Captura  de  
 imagem NaCvo   Web
  17. Web  Audio  API  &
 getUserMedia() Permitem  capturar,  processar  e  

    sinteCzar  áudio navigator.getUserMedia({ audio: true }, onStream, onStreamError); h"p:/ /webaudioapi.com
  18. 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
  19. 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
  20. 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);
  21. 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
  22. 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
  23. Online  /  Offline  
 Status  e  Events Permitem  checar  e

     monitorar  a   conexão  com  a  Internet
  24. 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
  25. 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() {}); });
  26. Sensores  de
 movimento   Acesso  a
 Fullscreen   Capturar
 luminosidade

      ... h"p:/ /mobilehtml5.org
 h"p:/ /html5please.com NaCvo
 Mobile   Web
  27. Elemento  criado   Adicionado  ou  
 removido  do
 DOM  

    Alteração  nos  
 atributos Custom  
 Elements
  28. Muta?on  Observers  oferece
 maior  poder  e  controle  dos   elementos

     e  atributos  do  DOM h"ps:/ /developer.mozilla.org/en/docs/Web/API/ MutaUonObserver *
  29. Conexão  entre  a  lógica  de   negócio  da  aplicação  e

     sua   interface  de  usuário Data  binding
  30. 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
  31. Os  Service  Workers  poderão   interceptar  chamadas  a  rede  e

      manter  um  cache  permanente  de   requisições Experiência  
 Offline  rica
  32. ENCONTRO LOCAWEB
 
 CONHEÇA OS PALESTRANTES x ENCONTRO LOCAWEB
 


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


    PALESTRANTES x ENCONTRO LOCAWEB
 
 INSCREVA-SE PREENCHENDO SEUS DADOS ABAIXO x SERVICE WORKER CACHE
  34. 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