UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Desarrollo de Aplicaciones para Internet MSc. Ing. Alexis Cabrera Mondeja 1 Clase 1: Introducción al Desarrollo.

Presentación del tema: "UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Desarrollo de Aplicaciones para Internet MSc. Ing. Alexis Cabrera Mondeja 1 Clase 1: Introducción al Desarrollo."— Transcripción de la presentación:

1 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Desarrollo de Aplicaciones para Internet MSc. Ing. Alexis Cabrera Mondeja 1 Clase 1: Introducción al Desarrollo Web.

2 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 “Me lo Dijeron y se me olvidó, Lo leí y lo entendí, Lo hice y lo aprendí” Confucio 2

3 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Ultimas Tendencias La tecnología se vuelve más envolvente y los usuarios continúan demandando una gratificación instantánea. La capacidad de atención promedia de los visitantes de la web es de 8 a 10 segundos. En ese corto período de tiempo, tenemos que decirles que están en el lugar correcto, y que el nuestro es más atractivo e innovador que el de la competencia. 3

4 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Esquemas de colores simples Simplicidad. No hay nada como impactar como un mensaje claro en un website acogedor. El Silencio puede ser interpretado de diferentes maneras. Olvídese de blanco y negro o tonos de gris. Piensa en verde, amarillo o incluso rojo como su color principal. Sin embargo, limitar la paleta a dos o tres colores. Trabajar dentro de los tonos de cada color para la variedad. Puede ser realmente notable lo que algunos colores pueden hacer por su mensaje. Simplicidad. No hay nada como impactar como un mensaje claro en un website acogedor. El Silencio puede ser interpretado de diferentes maneras. Olvídese de blanco y negro o tonos de gris. Piensa en verde, amarillo o incluso rojo como su color principal. Sin embargo, limitar la paleta a dos o tres colores. Trabajar dentro de los tonos de cada color para la variedad. Puede ser realmente notable lo que algunos colores pueden hacer por su mensaje. 4

5 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Efectos 3D Está pegando muy fuerte las sensaciones y efectos ópticos de profundidad. Estamos todos para el uso de capas, sombras, degradados, transparencias y texturas para crear dimensión. Sólo asegúrese de no distraer al lector ni de perder la sutileza. Cómo se logra? Jquery, CSS3 y HTML5 5

6 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 6 Ejemplo: Nike historia de las más famosas zapatillas Nike te lleva a una línea de tiempo interactiva de su relación con Michael Jordan en el estilo de un libro pop-up.

7 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Parallax Scrolling Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer que las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. Scroll parallax es una técnica que se ha utilizado en los juegos de vídeo durante años, y con respecto al diseño web, consiste en hacer que las imágenes de fondo y primer plano se mueven o cambian a velocidades diferentes para crear una sensación de profundidad. Todo lo que necesitas es imaginación jQuery y CSS3. 7

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

9 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 HTML5 No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y canon de diseño web, pero es muy aconsejable la utilización de Html5 ya que crea 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 usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes, la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. No es cuestión de que HTML5, CSS3, Javascript y jQuery ya se estén convirtiendo en norma y canon de diseño web, pero es muy aconsejable la utilización de Html5 ya que crea 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 usuarios inventan con las herramientas de Htm5 nuevas formas de llegar y conquistar a sus clientes, la tipografía, las herramientas sociales, la funcionalidad de arrastrar y soltar y nuevas API son tus nuevas armas. 9

10 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 CSS3 Con CSS3 el diseño destacará por sí solo, esquinas redondeadas, menús desplegables, botones animados, fondos múltiples, aplicaciones web y tecnología de font-face. Ya tenemos todo!!! CSS3 sustituye a Photoshop y a Ilustrator, más velocidad con código que con carga de imágenes. 10

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

12 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Diseñar para pantallas táctiles, no para ratones La tecnología se ha vuelto mucho más táctil. La usabilidad es el cambio de lo abstracto a lo tangible. Todos los teléfonos inteligentes y tablets utilizan ya pantallas táctiles. ¿Tiene cabida en el diseño una buena usabilidad táctil? Como diseñadores, adoramos a los ratones. Nuestros enlaces se iluminan cuando el ratón pasa por encima. Sin embargo, no esto no ocurre con la pantalla táctil. ¿De qué manera el diseño debe indicar enlaces a sus visitantes? Como diseñadores, adoramos a los ratones. Nuestros enlaces se iluminan cuando el ratón pasa por encima. Sin embargo, no esto no ocurre con la pantalla táctil. ¿De qué manera el diseño debe indicar enlaces a sus visitantes? 12

13 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 ¿Qué pasa con los menús desplegables? Eso también es una pérdida en el diseño de pantalla táctil. Tendremos que reinventar los estilos de los menús en entornos táctiles. Por último, considere el uso de diseños “líquido” como parte de su compromiso con los avances gráficos. Ya no se establece un tamaño fijo de pantalla de resolución. Los visitantes pueden cambiar su orientación de visualización de vertical a horizontal. Su diseño debe ser flexible para afrontar cualquier reto. 13

14 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 14

15 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 QR: de respuesta rápida Seguramente haya visto códigos QR apareciendo en tarjetas de visita, revistas o anuncios, coches, ya sabrá que son una tendencia de para el año 2012. ¿Cómo es exactamente lo que se traduce en el diseño web? Sorprendentemente bien, de hecho. Los códigos de barras QR, abreviatura de Quick Response o respuesta rápida. Basta con tomar una foto del código de barras único, con su teléfono con cámara. Como la magia, el teléfono llamará a la página web con código de barras, dijo. 15

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

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

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

19 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 19

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

21 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Ejemplo: Interactive día de San Diego Hemos tenido un montón de diversión la creación de este sitio de una página para el evento de San Diego de conferencias más interactivo. Lo mejor es que no utiliza flash! 21

22 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Web 2.0 y …. La web 2.0 se ha caracterizado por la gran cantidad de redes sociales que contiene y que, además, permiten a los usuarios compartir no solo aquello que están haciendo en cada momento sino cualquier otra cosa gracias al aumento de ancho de banda: imágenes, música, vídeos… 22

23 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 23 Que viene después…?? Los expertos en internet auguran que la principal diferencia de la web 3.0 es que, como consecuencia del constante aumento del ancho de banda, se creará una red inteligente que, además, no estará encadenada a los ordenadores y se podrá usar en cualquier lugar. Esta red inteligente sabrá detectar las necesidades de los internautas.

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

25 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Para el Diseñador Web 25 Diseñar para diferentes pantallas, entornos y ahora para móviles!

26 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 Lo más usado? Jquery, Jquerymobile, AJAX: Javascript que fue relegado por ser un lenguaje del lado del cliente ahora retoma fuerza con el Framework Jquery; AJAX para hacer pedidos a bases de datos en el servidor y Jquerymobile para crear web para móviles. Adiós FLASH!!!! Jquery, Jquerymobile, AJAX: Javascript que fue relegado por ser un lenguaje del lado del cliente ahora retoma fuerza con el Framework Jquery; AJAX para hacer pedidos a bases de datos en el servidor y Jquerymobile para crear web para móviles. Adiós FLASH!!!! CSS3: Increíble cambio en las prestaciones para dar estilo a nuestras webs. Ahora no hace falta Photoshop, CSS3 lo hace todo. CSS3: Increíble cambio en las prestaciones para dar estilo a nuestras webs. Ahora no hace falta Photoshop, CSS3 lo hace todo. 26

27 UNIVERSIDAD TECNOLÓGICA ECOTEC. ISO 9001:2008 HTML5: HTML dejó de ser un simple HyperText Markup Language («lenguaje de marcado de hipertexto») para convertirse en algo más potente. PHP: Aunque no todos usan PHP, se puede decir que el 90 % de la web está basado en este potente lenguaje de programación. Casi todas las redes sociales, blogs y páginas interactivas están desarrolladas en PHP. Te atreves a entrar a este fascinante mundo?? MUCHAS GRACIAS. 27