Front
-
Upload
hiberus -
Category
Technology
-
view
108 -
download
2
Transcript of Front
Del papel a la WEB
27/06/2015
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.