UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Desarrollo de Desarrollo de Aplicaciones para Aplicaciones para InternetInternet

MSc. Ing. Alexis Cabrera Mondeja

1

Clase 1: Introducción al Desarrollo Web.Clase 1: Introducción al Desarrollo Web.

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

““Me lo Dijeron y se me Me lo Dijeron y se me olvidó,olvidó,

Lo leí y lo entendí,Lo leí y lo entendí,

Lo hice y lo aprendíLo hice y lo aprendí””

ConfucioConfucio2

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Ultimas TendenciasUltimas Tendencias

La tecnología se vuelve más envolvente La tecnología se vuelve más envolvente y los usuarios continúan demandando y los usuarios continúan demandando una gratificación instantáneauna gratificación instantánea. La . La capacidad de atención promedia de capacidad de atención promedia de los visitantes de la web es de los visitantes de la web es de 8 a 10 8 a 10 segundos. En ese corto período de segundos. En ese corto período de tiempo, tenemos que decirles que tiempo, tenemos que decirles que están en el lugar correctoestán en el lugar correcto, y que el , y que el nuestro es más atractivo e innovador nuestro es más atractivo e innovador que el de la competencia.que el de la competencia.

3

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Esquemas de colores simplesEsquemas de colores simplesSimplicidad. No hay nada como impactar como Simplicidad. No hay nada como impactar como

un mensaje claro en un website acogedorun mensaje claro en un website acogedor.  El .  El Silencio puede ser interpretado de diferentes Silencio puede ser interpretado de diferentes maneras. Olvídese de blanco y negro o tonos maneras. Olvídese de blanco y negro o tonos de gris. Piensa en verde, amarillo o incluso de gris. Piensa en verde, amarillo o incluso rojo como su color principal. Sin rojo como su color principal. Sin embargo, limitar la paleta a dos o tres embargo, limitar la paleta a dos o tres colores. Trabajar dentro de los tonos de cada colores. Trabajar dentro de los tonos de cada color para la variedad. Puede ser realmente color para la variedad. Puede ser realmente notable lo que algunos colores pueden hacer notable lo que algunos colores pueden hacer por su mensaje. por su mensaje. 

4

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Efectos 3DEfectos 3DEstá pegando muy fuerte las Está pegando muy fuerte las

sensaciones y efectos ópticos de sensaciones y efectos ópticos de profundidad. Estamos todos para el profundidad. Estamos todos para el uso de capas, sombras, degradados, uso de capas, sombras, degradados, transparencias y texturas para crear transparencias y texturas para crear dimensión. Sólo asegúrese de no dimensión. Sólo asegúrese de no distraer al lector ni de perder la distraer al lector ni de perder la sutileza.sutileza.

Cómo se logra? Cómo se logra? Jquery, CSS3 y HTML5Jquery, CSS3 y HTML5

5

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

6

Ejemplo: Nike historia de las más famosas Ejemplo: Nike historia de las más famosas zapatillaszapatillasNike te lleva a una línea de tiempo Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.en el estilo de un libro pop-up.

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Parallax ScrollingParallax Scrolling• Scroll parallax es una técnica que se Scroll parallax es una técnica que se

ha utilizado en los juegos de vídeo ha utilizado en los juegos de vídeo durante años, y con respecto al durante años, y con respecto al diseño web, consiste en hacer que las diseño web, consiste en hacer que las imágenes de fondo y primer plano se imágenes de fondo y primer plano se mueven o cambian a velocidades mueven o cambian a velocidades diferentes para crear una sensación diferentes para crear una sensación de profundidad. Todo lo que necesitas de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. es imaginación jQuery y CSS3. 

7

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Ejemplo de webEjemplo de web

8

Para llevarlo aún más lejos, los Para llevarlo aún más lejos, los elementos pueden salir o moverse elementos pueden salir o moverse según el usuario se desplaza o se según el usuario se desplaza o se mueve el ratón. Las posibilidades de mueve el ratón. Las posibilidades de hacer una página web creativa e hacer una página web creativa e interesantes se multiplican. Esta interesantes se multiplican. Esta técnica comienza a ser utilizada técnica comienza a ser utilizada también en las aplicaciones móviles y también en las aplicaciones móviles y pega otra vez fuerte en el mundo de los pega otra vez fuerte en el mundo de los videojuegos.videojuegos. EjemploEjemplo:http://community.saucony.com:http://community.saucony.com/kinvara3//kinvara3/ http://www.resolutionim.com/speed

http://www.pojeta.cz/

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

HTML5HTML5No es cuestión de que HTML5, CSS3, Javascript y No es cuestión de que HTML5, CSS3, Javascript y

jQuery ya se estén convirtiendo en norma y jQuery ya se estén convirtiendo en norma y canon de diseño web, pero es muy canon de diseño web, pero es muy aconsejable la utilización de Html5 ya que crea aconsejable la utilización de Html5 ya que crea un código más legible y diseños que ayudan a un código más legible y diseños que ayudan a la estructura de mark-up.  Cada día más y más la estructura de mark-up.  Cada día más y más usuarios inventan con las herramientas de usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a Htm5 nuevas formas de llegar y conquistar a sus clientes, la tipografía, las herramientas sus clientes, la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas.  y nuevas API son tus nuevas armas.  

9

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

CSS3CSS3

Con CSS3 el diseño destacará por sí Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús solo, esquinas redondeadas, menús desplegables, botones animados, desplegables, botones animados, fondos múltiples, aplicaciones web y fondos múltiples, aplicaciones web y tecnología de font-face. Ya tenemos tecnología de font-face. Ya tenemos todo!!!todo!!!

CSS3 sustituye a Photoshop y a CSS3 sustituye a Photoshop y a Ilustrator, más velocidad con código Ilustrator, más velocidad con código que con carga de imágenes.que con carga de imágenes.

10

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Grandes imágenes de backgroundGrandes imágenes de background

Con cámaras de alta definición, una mejor Con cámaras de alta definición, una mejor optimización de la imagen, los métodos más optimización de la imagen, los métodos más inteligentes de carga y las conexiones inteligentes de carga y las conexiones rápidas a Internet, fotos y grandes rápidas a Internet, fotos y grandes ilustraciones intrincadas ya no son tabú en la ilustraciones intrincadas ya no son tabú en la web. Teniendo el fondo de pantalla como web. Teniendo el fondo de pantalla como lienzo, podrás establecer el estado de ánimo, lienzo, podrás establecer el estado de ánimo, tus habilidades y deseos. Mientras que sea tus habilidades y deseos. Mientras que sea relevante y no compita en protagonismo con relevante y no compita en protagonismo con el contenido, una imagen vale más que mil el contenido, una imagen vale más que mil palabras.palabras.

11

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Diseñar para pantallas táctiles, no Diseñar para pantallas táctiles, no para ratonespara ratones

La tecnología se ha vuelto mucho más táctil. La La tecnología se ha vuelto mucho más táctil. La usabilidad es el cambio de lo abstracto a lo usabilidad es el cambio de lo abstracto a lo tangible. Todos los teléfonos inteligentes tangible. Todos los teléfonos inteligentes y tablets utilizan ya pantallas y tablets utilizan ya pantallas táctiles. ¿Tiene cabida en el diseño una buena táctiles. ¿Tiene cabida en el diseño una buena usabilidad táctil?usabilidad táctil?

Como diseñadores, adoramos a los Como diseñadores, adoramos a los ratones. Nuestros enlaces se iluminan cuando ratones. Nuestros enlaces se iluminan cuando el ratón pasa por encima. Sin embargo, no esto el ratón pasa por encima. Sin embargo, no esto no ocurre con la pantalla táctil. ¿De qué no ocurre con la pantalla táctil. ¿De qué manera el diseño debe indicar enlaces a sus manera el diseño debe indicar enlaces a sus visitantes? visitantes? 

12

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

¿Qué pasa con los menús desplegables? Eso ¿Qué pasa con los menús desplegables? Eso también es una pérdida en el diseño también es una pérdida en el diseño de pantalla táctil. Tendremos que reinventar de pantalla táctil. Tendremos que reinventar los estilos de los menús en entornos los estilos de los menús en entornos táctiles.táctiles.

Por último, considere el uso de diseños Por último, considere el uso de diseños “líquido” como parte de su compromiso “líquido” como parte de su compromiso con los avances gráficos. Ya no se establece con los avances gráficos. Ya no se establece un tamaño fijo de pantalla un tamaño fijo de pantalla de resolución. Los visitantes de resolución. Los visitantes pueden cambiar su orientación de pueden cambiar su orientación de visualización de vertical a visualización de vertical a horizontal. Su diseño debe ser flexible horizontal. Su diseño debe ser flexible para afrontar cualquier reto.para afrontar cualquier reto.

13

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

14

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

QR: de respuesta rápidaQR: de respuesta rápida

Seguramente haya visto códigos QR Seguramente haya visto códigos QR apareciendo en tarjetas de visita, revistas o apareciendo en tarjetas de visita, revistas o anuncios, coches, ya sabrá que son una anuncios, coches, ya sabrá que son una tendencia de para el año 2012. ¿Cómo es tendencia de para el año 2012. ¿Cómo es exactamente lo que se traduce en el diseño exactamente lo que se traduce en el diseño web? Sorprendentemente bien, de hecho.web? Sorprendentemente bien, de hecho.

Los códigos de barras QR, abreviatura de Los códigos de barras QR, abreviatura de Quick Response o respuesta rápida. Basta Quick Response o respuesta rápida. Basta con tomar una foto del código de barras con tomar una foto del código de barras único, con su teléfono con cámara. Como la único, con su teléfono con cámara. Como la magia, el teléfono llamará a la página web magia, el teléfono llamará a la página web con código de barras, dijo. con código de barras, dijo. 15

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

16

Lo bonito de QR es que se puede Lo bonito de QR es que se puede utilizar en multitud de formas. De su utilizar en multitud de formas. De su función QR en su sitio web, para que función QR en su sitio web, para que los visitantes del sitio para tener un los visitantes del sitio para tener un acceso directo a su sitio móvil. acceso directo a su sitio móvil. También se puede rastrear a sus También se puede rastrear a sus visitantes a través de QR, mediante la visitantes a través de QR, mediante la colocación de un código de referencia colocación de un código de referencia especial en su URL. especial en su URL.

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Realización de las thumbnail para Realización de las thumbnail para la previsualización de Googlela previsualización de Google

Realización de las thumbnail para la Realización de las thumbnail para la previsualización de Googleprevisualización de Google

Google ha introducido en la búsqueda de Google ha introducido en la búsqueda de resultados la previsualización en miniatura. resultados la previsualización en miniatura. Atrás quedaron los días de hacer clic para Atrás quedaron los días de hacer clic para ver el contenido de un sitio web. En estos ver el contenido de un sitio web. En estos días, basta con hacer clic en la lupa y se días, basta con hacer clic en la lupa y se mostrará (suponiendo que no está en una mostrará (suponiendo que no está en una pantalla táctil). Por arte de magia una pantalla táctil). Por arte de magia una previsualización de lo que el usuario verá al previsualización de lo que el usuario verá al otro lado del click. otro lado del click.

17

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

18

Si su diseño es basado en Flash, va a Si su diseño es basado en Flash, va a ser un problema. La vista previa no ser un problema. La vista previa no mostrará los elementos de su web ni mostrará los elementos de su web ni su comportamiento tan fantástico.su comportamiento tan fantástico.A medida que el usuario medio de A medida que el usuario medio de Internet se vuelve más sabio Internet se vuelve más sabio surfeando, este comportamiento se surfeando, este comportamiento se está extendiendo. La tentación de está extendiendo. La tentación de juzgar a un sitio por su miniatura ya juzgar a un sitio por su miniatura ya está servida. ¿Se arriesgará a ello? está servida. ¿Se arriesgará a ello?

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

19

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Websites de una sola páginaWebsites de una sola página

Dado que el 80% de los visitantes del sitio web Dado que el 80% de los visitantes del sitio web no navega por otras secciones que no sean la no navega por otras secciones que no sean la página de inicio, es tendencia el ajustar todo página de inicio, es tendencia el ajustar todo el contenido en una página web.  De sabor a el contenido en una página web.  De sabor a su vida, HTML5, CSS3 y Javascript puede su vida, HTML5, CSS3 y Javascript puede hacer que esa única página atrape a sus hacer que esa única página atrape a sus visitantes con un dinamismo único,  pestañas, visitantes con un dinamismo único,  pestañas, las animaciones y los pop-ups están a vuestro las animaciones y los pop-ups están a vuestro servicio. Esta tendencia es mejor para los servicio. Esta tendencia es mejor para los sitios con poco contenido, tales como eventos, sitios con poco contenido, tales como eventos, sitios personales, productos y sitios de micro.sitios personales, productos y sitios de micro.

20

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Ejemplo: Interactive día de San DiegoEjemplo: Interactive día de San DiegoHemos tenido un montón de diversión la Hemos tenido un montón de diversión la creación de este sitio de una página para creación de este sitio de una página para el evento de San Diego de conferencias el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza más interactivo. Lo mejor es que no utiliza flash!flash!

21

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Web 2.0 y ….Web 2.0 y ….La web 2.0 se ha caracterizado por la La web 2.0 se ha caracterizado por la

gran cantidad de redes sociales que gran cantidad de redes sociales que contiene y que, además, permiten a contiene y que, además, permiten a los usuarios compartir no solo los usuarios compartir no solo aquello que están haciendo en cada aquello que están haciendo en cada momento sino cualquier otra cosa momento sino cualquier otra cosa gracias al aumento de ancho de gracias al aumento de ancho de banda: imágenes, música, vídeos…banda: imágenes, música, vídeos…

22

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

23

Que viene después…??Que viene después…??

Los expertos en internet auguran que Los expertos en internet auguran que la principal diferencia de la web 3.0 es la principal diferencia de la web 3.0 es que, como consecuencia del constante que, como consecuencia del constante aumento del ancho de banda, se aumento del ancho de banda, se creará una red inteligente que, creará una red inteligente que, además, no estará encadenada a los además, no estará encadenada a los ordenadores y se podrá usar en ordenadores y se podrá usar en cualquier lugar. Esta red inteligente cualquier lugar. Esta red inteligente sabrá detectar las necesidades de los sabrá detectar las necesidades de los internautas.internautas.

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

El norteamericano Tim Berners-Lee fue el El norteamericano Tim Berners-Lee fue el creador de la World Wide Web a principios creador de la World Wide Web a principios de los 90, y es el que ha acuñado ahora el de los 90, y es el que ha acuñado ahora el término de red semántica para definir la término de red semántica para definir la web 3.0. Esto quiere decir que la nueva web 3.0. Esto quiere decir que la nueva internet ya no entregará miles de internet ya no entregará miles de resultados en cada búsqueda, sino que resultados en cada búsqueda, sino que tratará de transformar la información que tratará de transformar la información que proporcione el usuario en conocimiento, proporcione el usuario en conocimiento, ordenar y clasificar los contenidos de la ordenar y clasificar los contenidos de la red para que los ordenadores sean red para que los ordenadores sean capaces de interpretarlos y tomar capaces de interpretarlos y tomar decisiones a través del cruce de datos.decisiones a través del cruce de datos.

24

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Para el Diseñador WebPara el Diseñador Web

25

Diseñar para Diseñar para diferentes diferentes pantallas, entornos pantallas, entornos y ahora para y ahora para móviles!móviles!

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

Lo más usado?Lo más usado? Jquery, Jquerymobile, AJAXJquery, Jquerymobile, AJAX: Javascript que : Javascript que

fue relegado por ser un lenguaje del lado fue relegado por ser un lenguaje del lado del cliente ahora retoma fuerza con el del cliente ahora retoma fuerza con el Framework Jquery; AJAX para hacer Framework Jquery; AJAX para hacer pedidos a bases de datos en el servidor y pedidos a bases de datos en el servidor y Jquerymobile para crear web para móviles. Jquerymobile para crear web para móviles. Adiós FLASH!!!!Adiós FLASH!!!!

CSS3CSS3: Increíble cambio en las prestaciones : Increíble cambio en las prestaciones para dar estilo a nuestras webs. Ahora no para dar estilo a nuestras webs. Ahora no hace falta Photoshop, CSS3 lo hace todo.hace falta Photoshop, CSS3 lo hace todo.

26

UN

IVE

RS

IDA

D T

EC

NO

LÓ

GIC

A E

CO

TE

C. IS

O 9001:2008

HTML5HTML5: HTML dejó de ser un simple HyperText : HTML dejó de ser un simple HyperText Markup Language («lenguaje de marcado de Markup Language («lenguaje de marcado de hipertexto») para convertirse en algo más hipertexto») para convertirse en algo más potente.potente.

PHPPHP: Aunque no todos usan PHP, se puede decir : Aunque no todos usan PHP, se puede decir que el 90 % de la web está basado en este que el 90 % de la web está basado en este potente lenguaje de programación. Casi todas potente lenguaje de programación. Casi todas las redes sociales, blogs y páginas interactivas las redes sociales, blogs y páginas interactivas están desarrolladas en PHP.están desarrolladas en PHP.

Te atreves a entrar a este fascinante mundo??

MUCHAS GRACIAS.

27