Front

1. Del papel a la WEB
27/06/2015

2. ¿Quién soy?
@karldeux
karldeux
karldeux@php.net
clizaga
clizaga@hiberus.com, carloslizaga@gmail.com
Carlos Lizaga Anadón

3. 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.

4. Internet del bañador

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

6. 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.

7. Comparativa entre diferentes navegadores

8. Comparativa entre navegadores 2

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

10. 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.

11. Tendencias frontend
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
VS
http://www.nike.com/es/es_es/c/nikeid

12. LESSINDUSTRIES

13. 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.

14. 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.

15. 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.

16. Dudas, WTFs y WTHs.
Preguntad, comentad o insultad.