¿Quién soy?

22 años 114 días 22:44:51

 function pad (num, max) {
   return num < 10 ? 0 + num.toString() : num.toString();
 }
 setInterval(function () {
   var start = new Date(688076100000);
   var now = new Date();
   var diff = (now - start) / 1000;
   var seconds = pad(Math.round(diff % 60));
   diff = Math.floor(diff / 60);
   var minutes = pad(Math.round(diff % 60));
   diff = Math.floor(diff / 60);
   var hours = pad(Math.round(diff % 24));
   diff = Math.floor(diff / 24);
   var days = Math.round(diff % 365.26);
   var years = Math.floor(diff / 365.26);
   document.querySelector('.age').textContent = years + ' años ' + days + ' días ' + hours + ':' + minutes + ':' + seconds;
 }, 1000);

Hobbies

Huelin

I <3 WEB

¿Qué es la web?

La web es un sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet

1989-2014

25 años de

DESASTRE

Shitty semantics

<div id="cabecera">
  <div id="logotipo"><img src="logo.jpg" /></div>
  <div id="menuprincipal">
    <a href="/">Portada</a> | 
    <a href="/productos">Productos</a> | 
    <a href="/servicios">Servicios</a> | 
    <a href="/contacto">Contacto</a> |
    <a href="http://twitter.com/acme">Twitter</a>
  </div>
</div>

PLUGINS

Flash

Java

Silverlight

AIR

ActiveX

Nice styles

HTML5 al rescate

<header>
  <h1><img alt="ACME" src="logo.png" /></h1>
  <nav><ul>
    <li><a href="/">Portada</a></li>
    <li><a href="/productos">Productos</a></li> 
    <li><a href="/servicios">Servicios</a></li>
    <li><a href="/contacto">Contacto</a></li>
    <li><a href="//twitter.com/acme"></a></li>
  </ul></nav>
</header>

Nuevas etiquetas

• <video> y <audio>
• <input type="email" placeholder="foo@bar" required>
• <canvas>
• <header> y <footer>
• <article> y <section>
• <aside>
  
• <output>
• <figure> y <figcaption>
• <progress> y <meter>
• <datalist>
  

CSS3

Selectores

 ul.contacts li[data-status="available"] {
   background-color: #0F4;
 }

 ul.contacts li:not(.group) {
   height: 5rem;
 }

 ul.contacts li:not(:last-child) {
   border-bottom: .1rem solid #444;
 }

CSS3

Unidades

 header h1 img{
   width: calc(100% - 3vmax); //vmin, vmax, vw, vh
 }

 body * {
   font-size: 1.5rem;
 }

CSS3

Animaciones

 code:hover {
   animation: blink .5s infinite alternate;
 }

 @keyframes blink {
   from {
     transform: scale(1.2);
   }
 }

 code {
   transition: all 1s linear;
 }
 code:hover {
   background-color: white;
   color: black;
 }

CSS3

Media queries

 @media (orientation:landscape) {
   body > header {
     display: none;
   }
}

 @media print {
   body > header,
   body > aside {
     visibility: hidden;
   }
 }

Web vs. nativo

Enorme brecha

« La web es la web y el escritorio es el escritorio »

Javascript

La máquina virtual universal

« Sólo sirve para hacer algunas chorradas en el navegador, no vas a ver una aplicación seria en Javascript. »

¿Y si lo arreglamos?

HTML5 APIs

Dotar a Javascript de APIs de sistema

Geolocation

navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});

File API

<input type="file" id="files" name="files[]" multiple />
<script>
  function handleFileSelect(e) {
    var files = e.target.files;
    for (var i = 0, f; f = files[i]; i++) {
      console.log(f.name, f.type, f.size);
    }
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

WebStorage

localStorage

localStorage.setItem('foo', 'bar');
console.log(localStorage.getItem('foo'));

sessionStorage.setItem('foo', 'bar');
console.log(sessionStorage.getItem('foo'));

OpenWebApps

Romper la barrera entre el escritorio y la web

¡Y dar el salto a los smartphones!

¡Y a los tablets!

¡Y a los televisores!

Apps neutrales, por fin

Alarm API

Permite programar eventos futuros

 var alarm;
 var request = navigator.alarms.add(new Date("June 29, 2012 07:30:00"), "honorTimezone", { foo: "bar" });
 request.onsuccess = function (e) { alarm = e.target.result; }; 

 navigator.setMessageHandler("alarm", function (message) { alert("alarm fired: " + JSON.stringify(message)); }); 

Contacts API

 var contact = new contact({name: ["John Doe"], givenName: ["John"], familyName: ["Doe"]}); 

 navigator.contacts.remove(contact); 

 var request = navigator.contacts.find({
   filterBy: ["givenName"],
   filterOp: "equals",
   filterValue: "John",
   sortBy: "familyName",
   sortOrder: "ascending"
 });
 request.onsuccess = function() {
   if(request.result.length > 0) {
     for (var i=0; i<request.result.length; i++) {
       for (var j=0; j<request.result[i].name.length; j++) {
         console.log(request.result[i].name[j]);
       }
     }
   }
 }

Vibration API

 navigator.vibrate(1000);

 navigator.vibrate([50, 100, 150]);

 navigator.vibrate(0);

Battery Status API

 console.log(navigator.battery.level);

 console.log(navigator.battery.charging);

 console.log(navigator.battery.dischargingTime / 60);

 navigator.battery.addEventListener('levelchange', function() {
   console.log(navigator.battery.level);
 }, false);

Web Notifications API

 var n = new Notification("Notificación", {body: "Ola k ase?"});

 n.onclick = function (e) {
  alert("HAS PULSADO LA NOTIFICACIÓN");
 }

Device Proximity

 window.ondeviceproximity = function (e) {
   console.log(e.value, e.min, e.max);
 }

Ambient Light

 window.ondevicelight = function (e) {
   console.log(e.value);
 }

WebTelephony API

 var call = navigator.telephony.call('912692200');

 call.hangUp(); 

 navigator.telephony.onincoming = function (event) {
   event.call.answer();
 }; 

WebRTC

REAL TIME COMMUNICATION

Directamente desde el navegador

Sin plugins

En serio

WebGL

2D/3D rendering

Directamente en el navegador

Sin plugins

En serio

Situación actual

• APIs en proceso de estandarización
• Chrome / Firefox / IE11+
• Android
• iOS
  
• Firefox for Android
• Firefox OS
  

Demo

LoquiIM

Cliente de mensajería HTML5