SlideShare a Scribd company logo
1 of 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.

More Related Content

What's hot

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
Eric Menjivar
 
Desarrollo De Proyectos Con Visual Basic
Desarrollo De Proyectos Con Visual BasicDesarrollo De Proyectos Con Visual Basic
Desarrollo De Proyectos Con Visual Basic
guest01eddce
 
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Juan Carlos Ruiz Pacheco
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
Dylan Caro
 

What's hot (20)

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
 
Dreamwaver cs5
Dreamwaver cs5Dreamwaver cs5
Dreamwaver cs5
 
LA WEB
LA WEBLA WEB
LA WEB
 
Arquitectura SEO y Internal linkin
Arquitectura SEO y Internal linkin Arquitectura SEO y Internal linkin
Arquitectura SEO y Internal linkin
 
Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021Optimiza tus webs a bajo costo - WCVenezuela2021
Optimiza tus webs a bajo costo - WCVenezuela2021
 
Caché y WordPress
Caché y WordPressCaché y WordPress
Caché y WordPress
 
Introducción a Responsive Design
Introducción a Responsive DesignIntroducción a Responsive Design
Introducción a Responsive Design
 
Lo mas importante de mi sitios web
Lo mas importante de mi sitios webLo mas importante de mi sitios web
Lo mas importante de mi sitios web
 
Usabilidad para sitios móviles #Devhangout
Usabilidad para sitios móviles   #DevhangoutUsabilidad para sitios móviles   #Devhangout
Usabilidad para sitios móviles #Devhangout
 
Presentacion java scripts
Presentacion java scriptsPresentacion java scripts
Presentacion java scripts
 
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
 
Desarrollo De Proyectos Con Visual Basic
Desarrollo De Proyectos Con Visual BasicDesarrollo De Proyectos Con Visual Basic
Desarrollo De Proyectos Con Visual Basic
 
Cómo emplear un buen diseño web
Cómo emplear un buen diseño webCómo emplear un buen diseño web
Cómo emplear un buen diseño web
 
Front end y Back-end
Front end y Back-end Front end y Back-end
Front end y Back-end
 
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10Como hacer sus sitios web más usables con Internet Explorer 9 y 10
Como hacer sus sitios web más usables con Internet Explorer 9 y 10
 
Front end
Front endFront end
Front end
 
Editores web
Editores webEditores web
Editores web
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
 

Viewers also liked

Viewers also liked (16)

cw15 conoce wordpress
cw15 conoce wordpresscw15 conoce wordpress
cw15 conoce wordpress
 
Cw15 taller sem_anaberges_jesusbaron
Cw15 taller sem_anaberges_jesusbaronCw15 taller sem_anaberges_jesusbaron
Cw15 taller sem_anaberges_jesusbaron
 
Taller Mailing Congreso Web 2015
Taller Mailing Congreso Web 2015Taller Mailing Congreso Web 2015
Taller Mailing Congreso Web 2015
 
Ppt taller scrum v5 no ejercicios
Ppt taller scrum v5 no ejerciciosPpt taller scrum v5 no ejercicios
Ppt taller scrum v5 no ejercicios
 
20150605 omnicanalidad cw15 2
20150605 omnicanalidad cw15 220150605 omnicanalidad cw15 2
20150605 omnicanalidad cw15 2
 
Blogs de-cero-a-heroe-150609100042-lva1-app6891
Blogs de-cero-a-heroe-150609100042-lva1-app6891Blogs de-cero-a-heroe-150609100042-lva1-app6891
Blogs de-cero-a-heroe-150609100042-lva1-app6891
 
Cw15 conoce drupal_v28
Cw15 conoce drupal_v28Cw15 conoce drupal_v28
Cw15 conoce drupal_v28
 
Landing page-150608071946-lva1-app6891
Landing page-150608071946-lva1-app6891Landing page-150608071946-lva1-app6891
Landing page-150608071946-lva1-app6891
 
Magento
MagentoMagento
Magento
 
Inciación a Drupal 8
Inciación a Drupal 8Inciación a Drupal 8
Inciación a Drupal 8
 
Marketing con video #cw16
Marketing con video #cw16Marketing con video #cw16
Marketing con video #cw16
 
Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal  Cómo configurar el seo de tu drupal
Cómo configurar el seo de tu drupal
 
Siete problemas que ya han resuelto los ecommerce de referencia
Siete problemas que ya han resuelto los ecommerce de referenciaSiete problemas que ya han resuelto los ecommerce de referencia
Siete problemas que ya han resuelto los ecommerce de referencia
 
Charla congreso web introducción programación funcional en JavaScript
Charla congreso web introducción programación funcional en JavaScriptCharla congreso web introducción programación funcional en JavaScript
Charla congreso web introducción programación funcional en JavaScript
 
Buenas y malas prácticas de accesibilidad en documentos electrónicos
Buenas y malas prácticas de accesibilidad en documentos electrónicosBuenas y malas prácticas de accesibilidad en documentos electrónicos
Buenas y malas prácticas de accesibilidad en documentos electrónicos
 
Solved Cbse Class 12 Accountancy Full Project(Comprehensive Project, Ratio An...
Solved Cbse Class 12 Accountancy Full Project(Comprehensive Project, Ratio An...Solved Cbse Class 12 Accountancy Full Project(Comprehensive Project, Ratio An...
Solved Cbse Class 12 Accountancy Full Project(Comprehensive Project, Ratio An...
 

Similar to Front

Estandares de creacion de paginas web
Estandares de creacion de paginas webEstandares de creacion de paginas web
Estandares de creacion de paginas web
yetni
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
8vivi8
 

Similar to Front (20)

Dinamicas
DinamicasDinamicas
Dinamicas
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
APPSWEBI4.0.pptx
APPSWEBI4.0.pptxAPPSWEBI4.0.pptx
APPSWEBI4.0.pptx
 
Consejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender MásConsejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender Más
 
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fasesIntroduccion a las tecnologias Tecnologías Web en sus diferentes fases
Introduccion a las tecnologias Tecnologías Web en sus diferentes fases
 
Modulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.pptModulo1-Presentaciones-parte01.1.ppt
Modulo1-Presentaciones-parte01.1.ppt
 
Capitulo 13 sfdsgfg
Capitulo 13  sfdsgfgCapitulo 13  sfdsgfg
Capitulo 13 sfdsgfg
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
Estandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y UsabilidadEstandares Web, Accesibilidad y Usabilidad
Estandares Web, Accesibilidad y Usabilidad
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Trabajo escrito
Trabajo escritoTrabajo escrito
Trabajo escrito
 
Estandares de creacion de paginas web
Estandares de creacion de paginas webEstandares de creacion de paginas web
Estandares de creacion de paginas web
 
Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)
 
U2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdfU2_Aplicaciones Web.pdf
U2_Aplicaciones Web.pdf
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
Actualizamos Tu Sitio Web
Actualizamos Tu Sitio Web
Actualizamos Tu Sitio Web
Actualizamos Tu Sitio Web
 

Recently uploaded

EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Recently uploaded (11)

Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 

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.