Juan Pablo Fuentes

HTML5 en los navegadores

Los nuevos estándar HTML5 y CSS3 han incorporado una serie de características interesantes pero, por desgracia, no todos los navegadores las han implementado en la misma medida. Y tenemos el problema de los navegadores antiguos.

Para saber si podemos usar una característica HTML5 es conveniente usar la siguiente página:

www.caniuse.com/

Nos indica a partir de que versión de navegador se puede usar y cual es el porcentaje global.

Si queremos asegurarnos que todos los navegadores usan una característica podemos usar Polyfill. Un polyfill es un código que nos permite ‘simular’ una característica HTML5 en navegadores que no la soporten.

Aquí hay una lista muy actualizada:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

La librería modernizr nos permite saber lo que podemos usar en un navegador:

https://modernizr.com/

Hosting para java

http://picodotdev.github.io/blog-bitix/2015/04/nueva-visita-a-5-plus-opciones-de-hosting-para-aplicaciones/

Chat socket io

app.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});
users = [];
io.on('connection', function(socket){
  console.log('A user connected');
  socket.on('setUsername', function(data){
    console.log(data);
    if(users.indexOf(data) > -1){
      socket.emit('userExists', data + ' username is taken! Try some other username.');
    }
    else{
      users.push(data);
      socket.emit('userSet', {username: data});
    }
  });
  socket.on('msg', function(data){
      //Send message to everyone
      io.sockets.emit('newmsg', data);
  })
});
http.listen(3000, function(){
  console.log('listening on localhost:3000');
});

index.html

 <!DOCTYPE html>
<html>
 <head><title>Hello world</title></head>
 <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io();
 function setUsername(){
 socket.emit('setUsername', document.getElementById('name').value);
 };
 var user;
 socket.on('userExists', function(data){
 document.getElementById('error-container').innerHTML = data;
 });
 socket.on('userSet', function(data){
 user = data.username;
 document.body.innerHTML = '<input type="text" id="message">\
 <button type="button" name="button" onclick="sendMessage()">Send</button>\
 <div id="message-container"></div>';
 });
 function sendMessage(){
 var msg = document.getElementById('message').value;
 if(msg){
 socket.emit('msg', {message: msg, user: user});
 }
 }
 socket.on('newmsg', function(data){
 if(user){
 document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>'
 }
 })
 </script>
 <body>
 <div id="error-container"></div>
 <input id="name" type="text" name="name" value="" placeholder="Enter your name!">
 <button type="button" name="button" onclick="setUsername()">Let me chat!</button>
 </body>
</html>

Ejemplo promesa

Ejemplos de ejecuciones asíncronas

https://www.todojs.com/controlar-la-ejecucion-asincrona/

Explicando Promises de JavaScript con un ejemplo simple

Ejemplo de multihilo con node

function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}

function userClicked() {
console.log(‘starting a long operation’);
longRunningOperation(function () {
console.log(‘ending a long operation’);
});
}
// simulate a user action
userClicked();

Cada uno con su closure:

function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}