Del papel a la WEB

27/06/2015

¿Quién soy?

@karldeux

karldeux

karldeux@php.net

clizaga

clizaga@hiberus.com, carloslizaga@gmail.comCarlos Lizaga Anadón

Un poco de historia. (lo prometo)

-¿Qué es internet?.

-¿Para qué sirve?.

-Prostitución del término.

-Internet en los ordenadores.

-Internet en los dispositivos móviles.

-Internet de las cosas.

-Sistemas operativos en internet.

Internet del bañador

Un día cualquiera en el trabajo de un diseñador WEB

Navegadores vs buscadores

• Un navegador es una herramienta que corre de forma nativa en una máquina que interpreta y

parsea diferentes fragmentos de código con el fin de mostrar una WEB, PDF, o cualquier otro

archivo completo.

• Un buscador es un servicio WEB que basándose en infinidad de variables muestra una tabla de

enlaces llamados “significados” atribuidos al significante (aquello que el usuario introdujo en la

barra de búsquedas.

Comparativa entre diferentes navegadores

Comparativa entre navegadores 2

Ranking de lenguales de programación en la búsqueda de empleados

Lenguajes de programación WEB

• HTML5, JavaScript, PHP, JSON, Java, Perl, Ruby, Python.

• Podemos comprobar que PHP, JS, Java y Python están muy arriba en la cola.

Tendencias frontend

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

VS

http://www.nike.com/es/es_es/c/nikeid

LESSINDUSTRIES

Código de calidad

• Por lo general, ser desarrollador web, a día de hoy es bastante sencillo, existen muchos y muy buenos IDES

capaces de facilitar la tarea al programador, pero todos ellos dejan un montón de código sobrante que no

sirve de nada y que al final va a quitarnos rendimiento en la máquina donde tengamos alojada la web.

• Hacer un código eficiente empieza desde en análisis de los fragmentos de código que queremos ir

insertando, la creación de clases y de ids necesaria para la gestión gráfica de todos los nodos. Con esto,

evitaremos duplicar códigos o tener que reeditar constantemente un documento WEB para que se ajuste a

nuestras reglas de estilo.

• Si trabajamos con scripts, usar librerías ya creadas como jQuery y jQuery-UI, que son muy eficientes y nos

pueden ahorrar mucho trabajo. Además hay que decir que estas librerías están hechas para usar los

recursos al mínimo y por lo tanto serán mucho más potentes que las que queramos hacer nosotros

manualmente, a no ser de que alguno sea Ingeniero de Software lo desaconsejo.

Usabilidad WEB

• No sirve de nada tener una web potente, y con un buen estilo si luego resulta que no es usable.

• Digamos que algo es usable cuando el usuario que va a navegar por nuestra página web puede

llegar a su meta sin volverse loco o sin elementos que le desconcentren de esa meta. Para ello

usaremos Call to actions estudiados, fragmentos en los que se llame la atención de cliente más

como por ejemplo en el botón “comprar”.

• Es imprescindible saber de marketing para hacer esto, por lo que si no es nuestro área, lo mejor

será acudir a una consultoría de usabilidad o contar con un diseñador gráfico o publicista en la

empresa que sea capaz de decirnos qué gama cromática emplear y cómo distribuir la web para

que sea mucho más funcional para el usuario final.

Optimizado de código

• Las directrices de google cambian. Teniendo en cuenta que cada vez hay más gente que utiliza dispositivos

móviles para acceder a internet, es necesario optimizar las páginas para que los móviles gasten menos

datos y menos energía renderizando la información.

• La nueva directriz de google acerca de los estilos, por ejemplo, es la de usar las etiquetas <style></style>

dentro de cada página para su CSS específico y como mucho usar un CSS global que nunca duplique o

altere las reglas de los atributos dentro de la etiqueta Style. De este modo, con una única llamada al css y

una única llamada a la página web en concreto podemos evitar bloqueos de las web.

• Además, los scripts que utilicemos en nuestra página web, deben ser cargados en última instancia y de

forma asíncrona para evitar estos mismos bloqueos.

• Usar imágenes del tamaño a mostrar y optimizadas para la visualización en una pantalla también es

importante y hay que tener en cuenta todo esto a la hora de realizar media-queries dentro del CSS.

Dudas, WTFs y WTHs.

Preguntad, comentad o insultad.