Curso de ecommerce Prestashop en Córdoba

Archivo del autor

Curso de ecommerce Prestashop en Córdoba

El próximo día ~~9 de marzo (mi cumpleaños )~~ 6 de abril da comienzo un nuevo curso del Instituto Alcántara sobre Prestashop, una de las plataformas de eCommerce más potentes y utilizadas de la red, en el que participaré como docente.

El curso, que se imparte a través del convenio entre Instituto Alcántara y la Confederación de Empresarios de Córdoba (CECO), ocupará 20 horas en las que mostraré como a través de la plataforma de Prestashop se puede crear, gestionar y mantener una tienda online con una inversión mínima y sin necesidad de tener conocimientos de programación. Una solución que sin duda dará un empujón a muchas empresas y empresarios que aún se plantean si entrar en el juego del comercio online.

Si queréis solicitar más información podéis seguir este enlace.

Como es habitual, no sólo repararemos en la instalación y manejo de la herramienta, sino que hablaremos de toda la temática relacionada con la mecánica de la venta online, como el SEO, las tarifas diferenciadas por país, los costes de transportes, etc. Un curso imprescindible para aquellos que busquen crear un negocio en la web.

Valora esta entrada

Rating: 5.5/10 (2 votes cast)

Mejorar carga de audio html5 con sprites

Esta semana estuve jugando con la API de vídeo y audio de HTML5 y descubriendo la increíble cantidad de eventos y propiedades de los objetos del tipo media.

Yo que soy un gamer confeso (y desarrollador de juegos frustrado) en seguida empecé a pensar en cómo se aplicaría la API de audio en un juego desarrollado en HTML5 y encontré un pequeño problema: si los juegos tienen un sonido para, por ejemplo, cada tipo de disparo, para los saltos, pasos, poderes especiales, música de fondo… unos 30 o 40 archivos de sonido, habría que hacer esa misma cantidad de llamadas al servidor para cargarlos.

Entonces pensé que pasa igual en diseño web con las imágenes y que desde hace tiempo los front-end usamos sprites, es decir, unificamos todas las imágenes en una y luego mostramos la parte que nos interesa de este gran mosaico.

Howler.js, la solución

Si algo nos enseña el método empírico, es que tras el hallazgo del problema y la formulación de la hipótesis hay que recopilar información, empezando por aquellos trabajos que similares al que estás dispuesto a emprender. Entonces encontré Howler.js, una ligera (5kb) librería de tratamiento de audio que permite manejar la API de audio HTML5 fácilmente y que permite usar el mismo concepto de Sprite en el audio.

Personalmente os recomiendo (ya lo hice en twitter) usar esta librería en los proyectos donde tengáis que usar audio.

Reproducir un sonido con Howler es sencillo:

var sonido = new Howl({
  //Cargamos los archivos en sus formatos
  urls: ['audio.mp3', 'audio.ogg']
});
//Reproducimos con el método play()
sonido.play();

Ahora bien, para usar los sprites primero los declaramos en el constructor:

var sonido = new Howl({
  //Cargamos los archivos en sus formatos
  urls: ['audio.mp3', 'audio.ogg'],
  //Indicamos el conjunto de Sprites
  sprite: {
     //ding es el nombre (trivial) que le ponemos al sprite
     ding: [0, 1000],
     //El primer valor entre corchetes corresponde con
     //el milisegundo donde comenzará el sprite
     dong: [1000, 1900]
     //El segundo valor entre corchetes corresponde a
     //la cantidad de milisegundos que durará el sprite
  }
});

Por último, para reproducir un sprite en concreto, usamos el método play pasando como valor el nombre del sprite:

sonido.play('ding');

De esta forma mejoraremos el rendimiento de nuestra web, juego o aplicación cuando tengamos que usar una cantidad media o alta de sonidos.

Ver ejemplo

Valora esta entrada

Rating: 8.4/10 (5 votes cast)

Curso WordPress en Córdoba

WordPress se ha afianzado como el gestor de contenidos (o plataforma de blogging) líder del mercado, siendo el motor elegido para soportar cerca del 70% de las páginas webs que hoy día se crean en la red.

Este febrero impartiré en Instituto Alcántara un curso completo de WordPress, donde se explicará desde la instalación y puesta en marcha, hasta la creación de plantillas y de webs personalizadas. Este curso no requerirá conocimientos previos de programación o diseño, aunque serán un valor añadido para que le saquéis el máximo partido. Se dividirá en 4 sesiones temáticas de 5 horas cada una.

Aunque no se note por la inexistente actividad del blog, este año ha empezado con un ritmo trepidante. Esta es la primera de varias acciones formación relacionadas con el mundo de la web que estoy tratando de concertar con el increíble equipo del Grupo Alcántara por un lado y con los cracks de CoSfera por otro.

Os mantendré al día con noticias frescas y se aceptan recomendaciones.

Valora esta entrada

Rating: 10.0/10 (1 vote cast)

Diseño web con tablas, la tendencia del 2013

¿En serio creías que hablaría de maquetar con tablas?

Tal vez en tu país no se celebra el día de los inocentes. Si quieres conocer el por qué de la broma mira aquí

Valora esta entrada

Rating: 10.0/10 (2 votes cast)

Efecto girar foto 360 grados con HTML5 y CSS3

Este tutorial muestra como jugando con la propiedad “background-position”, el tipo de input “range” y un poco de javascript, podemos crear efectos de giro 360º.

Partiendo del mismo concepto buscaremos dos resultados diferentes: por un lado visualizaremos una fotografía panorámica de 360º y por otro crearemos un efecto de giro alrededor de un producto.

Ver ejemplo completo

Efecto panorámica 360º

Para este ejemplo necesitaremos contar con una fotografía de 360º similar a las que usa Google Maps en su Street View.

Seguramente no tendremos a nuestra disposición una cámara que tome este tipo de fotos, así que podemos seguir el manual para hacerlo con Photomerge de Photoshop. El resultado que ofrece Photomerge es bastante bueno si cuidamos la estabilidad y la iluminación durante la toma de fotos.

Una vez tengamos nuestra foto panorámica, creamos un documento HTML5 donde sólo incluiremos un div y un input del tipo ‘range’:

<div id="imagen360"></div>
<input id='rango' type="range" max='100' min='0' value='0'>

Las etiquetas range son similares a un control slider y responde entre otras a las propiedades max, min y value:

max es el valor máximo que puede tomar, cuando arrastramos el manejador al tope derecho.
min es el valor mínimo que puede tomar, cuando arrastramos el manejador al tope izquierdo.
value es el valor predefinido que posicionará el manejador a lo largo de la línea de control.

Hay que tener en cuenta que por ahora Firefox no da soporte a los inputs “range”, que las muestra como tipo “text”. Es curioso que IE10 sí las muestre. Se acerca el apocalipsis.

A la capa le aplicamos el fondo con la imagen panorámica. En mi caso he procurado que el alto del div coincida con el de la imagen. Aplicamos unos estilos básicos:

#imagen360{
 background: url(./img/imagen360.jpg);
 height: 300px;
 width: 300px;
}
#rango{
 width: 300px;
}

Ahora tendremos que relacionar los cambios de estado de nuestro range con la posición del fondo mediante javascript:

var anchoImagen = 4097 - 300;
var incremento = -1 * anchoImagen / 100;

//He usado jQuery por comodidad
$('#rango').on('change', function(e){
 var posicionImagen = $(this).attr('value') * incremento + 'px 0';
 $('#imagen360').css('background-position', posicionImagen);
});

La variable anchoImagen guarda el ancho del fondo quitándole los 300px del ancho del contenedor para que no se repita al llegar al final. incremento divide entre 100 para que corresponda con los pasos (min=’0′ max=’100′) del input.

La función que se dispara cuando hacemos ‘change’ (arrastramos el manejador) va cambiando el background-position del contenedor en función del valor del atributo value.

Efecto giro de 360º alrededor de un producto

Siguiendo la misma metodología, podemos usar range y background-position para crear la ilusión de estar rotando un artículo, por ejemplo, de una tienda online.

En este caso la imagen debería estar compuesta de varias fotos del producto tomadas desde distintos ángulos a modo de secuencia de fotogramas.

El código no sería muy diferente:

#imagengira{
 background: url(./img/imagengiratoria.jpg);
 height: 207px;
 width: 350px;
}
#giro{
 width: 350px;
}

<div id="imagengira"></div>
<input id='giro' type="range" max='18' min='0' value='0'>

var anchoframe = 350;
$('#giro').on('change', function(e){
 var rotacionImagen = -1 * $(this).attr('value') * anchoframe + 'px 0';
 $('#imagengira').css('background-position', rotacionImagen);
 });

En este caso sólo le damos 18 pasos a nuestro range (min=’0′ y max=’18′) que se corresponden con los 18 fotogramas que tiene y le disminuimos el ancho del frame (350) en cada uno.

Ver ejemplo completo

Valora esta entrada

Rating: 10.0/10 (2 votes cast)

Acceder a webcam y micrófono con HTML5

En este artículo te expondré una de las características de HTML5 más potentes: la capacidad de acceder a dispositivos como webcam y micrófono. El ejemplo que usaré es uno de los que expuse en uno de mis seminarios y que forma parte de los ejemplos de HTML5 y CSS3 para descargar aunque explicado en detalle.

Ver ejemplo completo

Funciona 100% en Chrome

El ejemplo pretende que recojamos el audio y vídeo de nuestro dispositivo y los mostremos en un elemento video de HTML5. No es demasiado práctico pero servirá para comprender el funcionamiento. La única estructura necesaria en HTML es la siguiente:


<!DOCTYPE html>
<html>
 <head>
 <title>getUserMedia</title>
 <meta charset="utf8">
 </head>
 <body>
 <!-- En este objeto vídeo reproduciremos lo que vayamos grabando -->
 <video autoplay></video>

</body>

</html>

Acceso a dispositivos con HTML5

HTML5 nos permite acceder, siempre que el navegador lo permita, a dispositivos como webcam y micrófono a través del método getUserMedia. Antes de nada tendremos que comprobar la compatibilidad del navegador:


//Comprobamos la compatibilidad de nuestro navegador con User Media
 if (tieneUserMedia()) {
 console.log("Ok, el navegador soporta UserMedia");
 } else {
 throw new Error('Mala suerte: getUserMedia() no está soportado en tu navegador. ¿Conoces Chrome?');
 }

//Comprueba los diferentes motores que dan soporte
 function tieneUserMedia() {
 return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
 }

Como ves comprobamos que cada motor (webkit, microsoft, gecko) puede tener su propio método getUserMedia. Para evitarnos duplicar código definimos que navigator.getUserMedia sea igual al getUserMedia que exista en este navegador:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
 navigator.mozGetUserMedia || navigator.msGetUserMedia;

Perfecto, ahora pedimos acceso al dispositivo:

</pre>
if (navigator.getUserMedia) {
 //Le pasamos un array con video y/o audio para acceder a webcam y micro respectivamente. Después una
 //función que se ejecutará a modo de callback y otra a modo de fallback.
 navigator.getUserMedia({video: true, audio: true}, exito, error);
 //Llámamos getUserMedia, pedimos acceso a vídeo. Si tenemos éxito llamamos una función y si no lanzamos un error.
 } else {
 error();
 }

Veamos en detalle la estructura de getUserMedia: “navigator.getUserMedia({dispositivo: verdadero o falso}, función en caso de éxito, función en caso de error)”

En caso de éxito la función recibe un parámetro correspondiente al stream de video/audio recibido a través de nuestros dispositivos. Nosotros lo convertiremos en un objeto URL y lo aplicaremos al atributo src de nuestro vídeo para que reproduzca:

window.URL = window.URL || window.webkitURL;

//Si soportamos getUserMedia y damos permiso, nuestro tag de video mostrará el stream que recogemos.
 //esta función recibe un parámetro que es el stream de video y/o audio recogido por los dispositivos.
 function exito(stream) {
 video.src = window.URL.createObjectURL(stream);
 }

//Nuestro error lanza un simple mensaje alert.
 function error(e) {
 throw new Error("No me dejaste mostrarte las maravillas de getUserMedia");
 }

Finalizamos creando la función para el error, ya sea porque algo salga mal o bien el usuario no de permiso a compartir el dispositivo.

Ver ejemplo completo

Funciona 100% en Chrome

Valora esta entrada

Rating: 7.7/10 (6 votes cast)

Importar modelos 3D con Three.js y WebGL

En un artículo anterior hice una breve introducción de Three.js, la librería de Javascript creada por MrDoob que facilita el trabajo con WebGL. Vimos cómo poner a punto nuestro escenario, cámaras, luces e incluso añadimos algunos elementos básicos como cubos o esferas. En esta ocasión comparto con vosotros la forma de importar modelos 3D a nuestro escenario.

Importar modelos 3D

Dentro de los archivos que podemos descargar de Three.js en github encontraremos una serie de loaders (“cargadores”) , que nos permiten importar a nuestra escena diferentes formatos de modelos tridimensionales.

Tal vez por una costumbre heredada de mi época con Away3D, he elegido para este ejemplo el importador de modelos Collada. Collada es un formato, similar a XML al que se pueden exportar modelos creados con Sketchup, Maya o 3DStudio. Para este caso he usado un modelo de la galería 3D de Google.

La explicación de la carga del modelo está incluida en los comentarios del código:

<script type="text/javascript" src='js/jquery-1.8.2.min.js'></script>
 <script type="text/javascript" src='js/threelast.js'></script>

<!--Cargamos el Loader de Collada -->
 <script type="text/javascript" src='js/ColladaLoader.js'></script>
 <script type="text/javascript">

 var grados = 0;

var ancho = 800,
 alto = 600;

var angulo = 30,
 ratio = ancho / alto,
 cerca = 0.1,
 lejos = 10000;

var escenario = $('#escenario');

var miRender = new THREE.WebGLRenderer();

var miCamara = new THREE.PerspectiveCamera(angulo, ratio, cerca, lejos);

var miEscena = new THREE.Scene();

 miRender.shadowMapEnabled = true;

miCamara.position.x = 0;
 miCamara.position.y = 400;
 miCamara.position.z = 400;

miRender.setSize(ancho, alto);

eje = new THREE.AxisHelper();
 eje.scale.set(100,100,100);

escenario.append(miRender.domElement);

var material = new THREE.MeshLambertMaterial({color: 0xebebeb});

/* SUELO */

var suelo = new THREE.Mesh(new THREE.CubeGeometry(400, 20, 400), material);
 suelo.position.x = 0;
 suelo.position.y = 0;
 suelo.position.z = 0;
 suelo.castShadow = suelo.receiveShadow = true;

/* MODELO */
 var modelo;
 //Creamos el objeto ColladaLoader
 var cargador = new THREE.ColladaLoader();
 //ConvertUpAxis corrige la orientación del modelo usando el plano XZ
 //como base, en lugar del XY que por defecto usa Collada.
 cargador.options.convertUpAxis = true;
 //El método load recibe dos parámetros: la url del modelo y una función
 //que hace de callback una vez cargado.
 cargador.load('./models/laevatein.dae',
 function(collada){
 modelo = collada.scene;
 //Ajustamos la escala del elemento.
 modelo.scale.set(0.1,0.1,0.1);
 //Ajustamos la posicion
 modelo.position.set(0,0,0);
 //Lo añadimos a la escena
 miEscena.add(modelo);
 //Enfocamos la cámara hacia él
 miCamara.lookAt(modelo.position);
 $('.cargando').hide();
 //Animamos la cámara
 animar(new Date().getTime());
 });

 /* LUZ */

var luzAmbiental = new THREE.AmbientLight(0x444444);

 var luz = new THREE.SpotLight(0xFFFFFF);

luz.position.x = 0;
 luz.position.y = 400;
 luz.position.z = 400;
 luz.castShadow = true;

 miEscena.add(eje);
 miEscena.add(luz);
 miEscena.add(luzAmbiental);
 miEscena.add(miCamara);

/* Esta función sólo realiza un movimiento de
 rotación de la cámara alrededor de nuestro modelo */
 function animar(t){
 grados += 1;
 rad = grados * Math.PI/180;
 var _x = Math.sin(rad) * 400;
 var _z = Math.cos(rad) * 400;
 miCamara.position.x = _x;
 miCamara.position.z = _z;
 miRender.render(miEscena, miCamara);
 miCamara.lookAt(modelo.position);
 window.requestAnimationFrame(animar, miRender.domElement);
}

 </script>

Ver ejemplo

Valora esta entrada

Rating: 10.0/10 (1 vote cast)

Weekend: Juegos en navegador y experimentos con 3D

Las nuevas características en las capas de presentación, 3D y gráficos de HTML5 son las más impresionantes dentro del nuevo estándar. Son increíbles novedades que permiten aportar a nuestra aplicaciones web un nivel gráfico superior. Esta semana he recogido (pese a tener un catarro severo) 3 páginas para vuestro deleite visual: una web con un estilo similar a Zelda, un juego 3D de carreras y el fabuloso laboratorio de ejemplos del maestro MrDoob.

Silverchip te enseña una web diferente

Silverchip es una empresa de diseño, desarrollo y marketing online que han querido atraer gente a su web e impresionarlos con un uso creativo de canvas, transformando la navegación normal en un juego similar a los antiguos juegos de Zelda.

Enlace: http://preview.silverchip.co.uk/

Autor: SilverChip

Twitter: @silverchipuk

HexGL, un claro ejemplo del potencial de webGL

Uno de los motivos por los que este mes me he propuesto aprender el máximo de WebGL son los cada vez más numerosos ejemplos de su potencia. HexGL es uno de los más vistosos y detrás de él no está Google o un gran equipo profesional, sino un estudiante de ingeniería informática.

Enlace: http://hexgl.bkcore.com/

Autor: Thibaut Despoulain

Twitter: @BKcore

MrDoob, un maestro creador de Three.js

Hace unos días escribí una introducción a Three.js, que nos permite ahorrar cientos (no es exageración) de líneas de código para llevar el 3D a la web. Al poco de escribir ese artículo descubrí los maravillosos trabajos de su creador Ricardo Cabello (afincado en Barcelona) también conocido como MrDoob. Creo que alguien con semejante talento debería inspirarnos a todos.

Enlace: http://mrdoob.com/

Autor: Ricardo Cabello Miguel

Twitter: @mrdoob

Valora esta entrada

Rating: 10.0/10 (1 vote cast)

Qué aprender para ser diseñador y desarrollador web

Mucha gente me pregunta qué debe aprender y dónde puede empezar a formarse para ser diseñadores y desarrolladores web. En este artículo intentaré resumir los perfiles profesionales, los lenguajes, los frameworks y algunos materiales gratuitos para autodidactas.

Los dos grandes perfiles: back-end y front-end

Queda muy lejos la época en la que se hablaba del webmaster como un profesional que hacía una página web de inicio a fin. En la actualidad existen múltiples perfiles que pueden intervenir en el desarrollo de una página o aplicación web, pero nos centraremos en los dos principales: el desarrollador back-end y el desarrollador front-end.

Para entender estos perfiles imaginemos un coche. El back-end se encargaría de construir el motor, la centralita, el sistema de frenos y demás elementos que hacen que el coche haga su trabajo de transportar al conductor. Por otro lado el front-end tendría crearía el chasis, salpicadero, volante, palanca de cambios? es decir, todos aquellos elementos o bien estéticos o bien de interacción por parte del nuestro usuario.

Volviendo a la web, el profesional del back-end es el que crea la lógica interna y el del front-end el que se encarga de la visualización y la interacción del usuario.

Especializarse en uno de estos dos frentes es muy importante. A no ser que seas un auténtico genio, no lograrás ser excelente en ambos y la experiencia me ha enseñado que más vale ser excelente en una cosa que bueno en muchas. Sin embargo el profesional “perfecto” conoce lo suficiente de su “opuesto” para saber las posibles limitaciones técnicas y entenderse bien con el resto del equipo.

Si tienes claro que quieres dedicarte al back-end o al front-end, puedes leer cada uno de los títulos dedicados a ello. Si aún no te decides puedes seguir leyendo con normalidad:

Quiero ser Front-end developer

Quiero ser Back-end developer

Quiero ser Front-end developer

El front-end es un experto maquetador, genio de los estilos visuales y de la interacción.

Sus habilidades primarias son el uso avanzado de semántica HTML, manejo perfecto de CSS y programación fluida con Javascript. Conocen los formatos multimedia y como optimizarlos en este medio.

Entre sus aptitudes secundarias está el diseño o incluso la animación. Tendrán también nociones de usabilidad y de tecnologías de back-end.

Entre las tecnologías recomendables, para llegar a ser un auténtico samurai, encontramos los preprocesadores de CSS como LESS, SASS o Stylus, de HTML como HAML o ZenCode y de Javascript como CoffeeScript.

Por supuesto existen frameworks como jQuery, Mootols o Backbone que nos facilitarán la vida.

Quiero ser Back-end developer

El back-end es una máquina engrasada de crear lógica.

Sus habilidades primarias son el conocimiento de diferentes lenguajes de programación de lado de servidor como PHP, Python, Ruby o incluso Javascript (sí, con javascript puedes hacer back-end con Node.js). Normalmente el desarrollador de Back-end se especializa en uno o dos de ellos. Además, tiene un profundo conocimiento de bases de datos tanto relacionales como mySQL, como no relacionales como MongoDB.

Como características secundarias están HTML y CSS, servidores y programación de lado del cliente.

Es recomendable conocer los CMSs más usados como WordPress, Joomla, Magento, Prestashop y un largo etc. usados a menudo en proyectos pequeños.

Existe un largo número de frameworks para lenguajes de back como Symfony, Zend o CodeIgniter en PHP, Rails en Ruby o Django para Python, entre un enorme etcétera.

Dónde empezar a aprender

Aparte de la enseñanza tradicional y sistematizada de la que me ahorraré mi opinión personal, existen multitud de opciones en la web para autodidactas.

Por un lado están grandes comunidades hispanohablantes de desarrollo como Maestros del Web, Cristalab, Mejorando la Web o Desarrollo Web, repletas de artículos, manuales y aportaciones de usuarios.

También existen webs con tutoriales en inglés ~~como W3Schools donde puedes experimentar tu propio código~~, sitios de gran calidad como dochub.io, MDN o plataformas interactivas como Codecademy.

Por último siempre puedes acudir a la enorme blogosfera repleta de personas que te ayudarán en casos concretos con tutoriales y artículos como este.

Para más dudas y consultas podéis preguntarme en twitter.

Valora esta entrada

Rating: 9.6/10 (10 votes cast)