SlideShare una empresa de Scribd logo

Front

•Descargar como PPTX, PDF•
•
Hiberus Tecnologia
Hiberus Tecnologia

El documento resume los conceptos clave de internet y el desarrollo web, incluyendo la historia de internet, navegadores vs buscadores, lenguajes de programación web populares, tendencias frontend, y optimizaciones importantes como código limpio, usabilidad, y optimización para dispositivos móviles. El autor invita a los lectores a hacer preguntas o comentarios.

Presentaciones relacionadas

dreamweaver
dreamweaverdreamweaver
dreamweaver
 
Presentación Web 2.0 y Estandares
Presentación Web 2.0 y EstandaresPresentación Web 2.0 y Estandares
Presentación Web 2.0 y Estandares
 
Dreamwaver cs5
Dreamwaver cs5 Dreamwaver cs5
Dreamwaver cs5
 
1 de 16
Del papel a la WEB 27/06/2015
¿Quién soy? @karldeux karldeux karldeux@php.net clizaga clizaga@hiberus.com, carloslizaga@gmail.com Carlos 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.

Más contenido relacionado

Front

  • 1. Del papel a la WEB 27/06/2015
  • 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.
  • 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.
  • 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.
  • 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.