Presentación Clase 3-6-09 Diseño Digital Avanzado

2. Qué es web 2.0?

3. Qué es web 2.0?
La Web 2.0 es la transición que se ha dado de aplicaciones
tradicionales hacia aplicaciones que funcionan a través del web
enfocadas al usuario final.
Se trata de aplicaciones que generen colaboración y de servicios
que reemplacen las aplicaciones de escritorio
El Web 2.0 es una actitud y no precisamente una tecnología.

4. Web 1.0 => Web 2.0
En construcción Beta

5. Web 1.0 => Web 2.0
Double Click AdSense
• Limitado a grandes portales • Cualquier web
• Banners y popups • Anuncios de texto
• Muy intrusivos • Poco intrusivos
• Contextuales

6. Web 1.0 => Web 2.0
Web Personal Blog
• Estática • Dinámica
• Sólo un autor • Fáciles
• Conocimientos de HTML • Retroalimentación
• Sindicación
• Comunidad

7. Web 1.0 => Web 2.0
Categorías Etiquetas
• Más Generales • Más Concretas
• Mejor Agrupación • Facilidad al Buscar
• Preestablecidas • Imágenes y Links

8. Web 1.0 => Web 2.0
Britannica online Wikpedia
• Más Generales • Más Concretas
• Mejor Agrupación • Facilidad al Buscar
• Preestablecidas • Imágenes y Links

11. En Conclusión la Web 2.0 es:

12. En Conclusión la Web 2.0 es:
Son sitios web pequeños que constituyen la mayoría
del contenido de Internet.

13. En Conclusión la Web 2.0 es:

14. En Conclusión la Web 2.0 es:

15. En Conclusión la Web 2.0 es:
Aplicaciones que se basan cada vez más en los datos.

16. En Conclusión la Web 2.0 es:

17. En Conclusión la Web 2.0 es:

18. En Conclusión la Web 2.0 es:
Permite a los usuarios añadir datos de forma fácil.

19. En Conclusión la Web 2.0 es:

20. En Conclusión la Web 2.0 es:

21. En Conclusión la Web 2.0 es:
Los usuarios añaden valor.

22. En Conclusión la Web 2.0 es:

23. En Conclusión la Web 2.0 es:

24. En Conclusión la Web 2.0 es:
La protección de la propiedad intelectual limita
la reutilización e impide la experimentación.

25. En Conclusión la Web 2.0 es:

26. En Conclusión la Web 2.0 es:

27. En Conclusión la Web 2.0 es:
Las aplicaciones no son software, son servicios en
constante desarrollo (beta).

28. En Conclusión la Web 2.0 es:

29. En Conclusión la Web 2.0 es:

30. En Conclusión la Web 2.0 es:
Coopremos, no controlemos.

31. En Conclusión la Web 2.0 es:

32. Diseñando y Programando
Para el web 2.0?
• Simplicidad
• Layout Centrado
• Menos columnas
• Distinguir el encabezado
• Navegación simple
• Textos más grandes

33. Diseñando y Programando
Para el web 2.0?
• Colores más fuertes y brillantes
•Utilizar tablas donde corresponden
• Realizar templates cross browser
• Validar html y css

34. ¿Qué son estándares web?
Video
Los estándares web son un conjunto de recomendaciones dadas por el
WorldWide Web Consortium (W3C) y otras organizaciones internacionales
acerca de cómo crear e interpretar documentos basados en el Web.
Son un conjunto de tecnologías orientadas a brindar beneficios a la
mayor cantidad de usuarios, asegurando la vigencia de todo documento
publicado en el Web.
El objetivo es crear un Web que trabaje mejor para todos, con sitios accesibles
a más personas y que funcionen en cualquier dispositivo de acceso a Internet.

35. Algunos Beneficios que obtengo con el
uso de estándares web
Video
• Un sitio basado en estándares web mostrará una mayor consistencia
visual. Gracias al uso de XHTML para el contenido y CSS para la
apariencia,esto hace que el sitio se pueda modificar fácilmente.
• Los sitios con estándares utilizan menos código.
• El CSS permite realizar efectos que se realizaban anteriormente con
el uso de javascript o imágenes.
• Los documentos basados en XHTML válido son más relevantes para
los motores de búsqueda, contienen mayor información y menos
código

36. Algunos Beneficios que obtengo con el
uso de estándares web
Video
• Un sitio basado en estándares web es compatible con todos los
navegadores actuales, y lo será con versiones futuras.
• Un sitio basado en estándares web es más fácil de mantener y
actualizar, el código es más simple, de esta forma se elimina la
dependencia de un solo desarrollador.
• Un sitio basado en estándares web es más accesible, permitiendo
a personas con discapacidades utilizar su contenido.

37. Video
El uso de estándares web y la separación entre
estructura y presentación ofrece múltiples
beneficios para hoy y mañana.

38. Video
Hoy: Acceso a una mayor audiencia, menor
costo de producción y cumplir con los
requerimientos de accesibilidad.

39. Video de mantenimiento,
Mañana: Reducir costos
así como la dependencia de algún producto
de software, flexibilidad para los cambios de
presentación y una puerta abierta al uso de
tecnologías como XML.

41. Qué es un Sitio Web?
Un sitio web es un conjunto de páginas web, típicamente comunes
a un dominio de Internet o subdominio en la World Wide Web en
Internet

42. Tipos de Sitio Web
• Sitio archivo: usado para preservar contenido electrónico valioso
amenzado con extinción. Dos ejemplos son: Internet Archive, el cual
desde 1996 ha preservado billones de antiguas (y nuevas) páginas web; y
Google Groups, que a principios de 2005 archivaba más de 845.000.000
mensajes expuestos en los grupos de noticias/discusión de Usenet, tras
su adquisición de Deja News.
• Sitio weblog (o blog): sitio usado para registrar lecturas online o para
exponer diarios online; puede incluir foros de discusión. Ejemplos:
blogger, Xanga.
• Sitio de empresa: usado para promocionar una empresa o servicio.
• Sitio de comercio electrónico: para comprar bienes, como
Amazon.com.

43. Tipos de Sitio Web
• Sitio de comunidad virtual: un sitio donde las personas con intereses
similares se comunican con otros, normalmente por chat o foros. Por
ejemplo: MySpace.
• Sitio de Base de datos: un sitio donde el uso principal es la búsqueda
y muestra de un contenido específica de la base de datos como la
Internet Movie Database.
• Sitio de desarrollo: un sitio el propóstio del cual es proporcionar
información y recursos relacionados con el desarrollo de software, Diseño
web, etc.
• Sitio directorio: un sitio que contiene contenidos variados que están
divididos en categorías y subcategorías, como el directorio de Yahoo!, el
directorio de Google y el Open Directory Project.

44. Tipos de Sitio Web
• Sitio de descargas: estrictamente usado para descargar contenido
electrónico, como software, demos de juegos o fondos de escritorio.
• Sitio de juego: un sitio que es propiamente un juego o un quot;patio de
recreoquot; donde mucha gente viene a jugar, como MSN Games, Pogo.com
y los MMORPGs VidaJurasica, Planetarion y Kings of Chaos.
• Sitio de información: contiene contenido que pretende informar a los
visitantes, pero no necesariamente de propósitos comerciales; tales
como: RateMyProfessors.com, Free Internet Lexicon and Encyclopedia.
La mayoría de los gobiernos e instituciones educacionales y sin ánimo de
lucro tienen un sitio de información.
• Sitio de noticias: Similar a un sitio de información, pero dedicada a
mostrar noticias y comentarios

45. Tipos de Sitio Web
• Sitio pornográfico (porno): muestra imágenes y vídeos de contenido
sexual explicito.
• Sitio buscador: un sitio que proporciona información general y está
pensado como entrada o búsqueda para otros sitios. Un ejemplo puro es
Google, y el tipo de buscador más conocido es Yahoo!.
• Sitio shock: incluye imágenes o otro material que tiene la intención de
ser ofensivo a la mayoría de visitantes. Ejemplos: rotten.com,
ratemypoo.com.
• Sitio de subastas: subastas de artículos por internet, como eBay.
• Sitio personal: Mantenido por una persona o un pequeño grupo (como
por ejemplo familia) que contiene información o cualquier contenido que
la persona quiere incluir.

46. Tipos de Sitio Web
• Sitio Web 2.0: un sitio donde los usuarios son los responsables de
mantener la aplicación viva, usando tecnologias de última generación:
pikeo, flickr
• Sitio wiki: un sitio donde los usuarios editan colaborativamente (por
ejemplo: Wikipedia).
• Sitio político: un sitio web donde la gente puede manifestar su visión
política. Ejemplo: New Confederacy.
• Sitio de Rating: un sitio donde la gente puede alabar o menospreciar lo
que aparece. Ejemplos: ratemycar.com, ratemygun.com, ratemypet.com,
hotornot.com.

47. Pasos para crear una Web
1. Planeamiento de Objetivos
• Breve descripción de los contenidos de la página, su título principal, etc.
• Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
• Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas
para atraer a mi público objetivo, etc.
• Hardware, software, documentación que necesito para realizarla y de qué
dispongo realmente.
• Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses,
problemas físicos, etc. para adaptar la página a sus características.
• Dónde se va a visualizar la web; navegadores más utilizados, plugins,
elementos específicos, etc

48. Pasos para crear una Web
2. Estructurar el Contenido
Es conveniente que dibujemos un organigrama con todas las partes del
sitio, distribuyendo el texto, los gráficos, los vínculos a otros documentos y
otros objetos multimedia que se consideren pertinentes. Antes de empezar
a desarrollar tu página web en el ordenador, debes tener muy claro cuáles
serán sus contenidos, su estructura, el nombre de la página, etc. cosas que
no se deben hacer sobre la marcha para evitar rectificaciones innecesarias,
trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el
contenido.

49. Pasos para crear una Web
2. Estructurar el Contenido
En árbol: Esta estructura está compuesta por una página principal que
enlaza con otras páginas, las cuales, a su vez, enlazan con otras páginas
de nivel inferior. De esta manera se agrupan las páginas en niveles, de tal
modo que para llegar del primero al último se debe pasar por todos los
intermedios. Esta estructura es poco navegable si tenemos una web con
muchas páginas, porque para ver las páginas de otra rama tenemos que
retroceder hasta la página principal, haciendo la navegación muy pesada.

50. Pasos para crear una Web
2. Estructurar el Contenido
En lista: Esta estructura es la opuesta a la anterior. En ella no existe página
principal ya que todas están en el mismo nivel. Para llegar a la última
página hay que recorrer todas las anteriores. Es una estructuración muy
adecuada para la presentación de manuales o aplicaciones donde el
usuario deba recorrer forzosamente una serie de páginas para conseguir su
objetivo.

51. Pasos para crear una Web
2. Estructurar el Contenido
Mixta: Esta estructura es una combinación de las dos anteriores. Las
páginas están jerarquizadas en niveles, los cuales a su vez están
conectados entre sí en forma de lista. Esta estructura es mucho más
navegable y práctica, puesto que permite poder desplazarse de rama en
rama sin necesidad de volver a la página principal para hacerlo.

52. Pasos para crear una Web
2. Estructurar el Contenido
En red: Esta estructura supone que todas las páginas de la web están
conectadas entre sí, por lo que es una estructura más compleja y menos
ordenada. Su ventaja es que desde cada página podemos ir a cualquier otra
del sitio. No obstante, requiere mucha planificación para evitar ofrecer al
visitante un caos de enlaces innecesarios.

53. Pasos para crear una Web
3. Diseño Web
El diseño web va más allá del diseño gráfico, al influir en él multitud de
factores que limitan las posibilidades del diseño, pero también otros que
añaden interactividad y funcionalidades a una página web que no tiene un
cartel, folleto o revista.

54. Pasos para crear una Web
4. Programar una Web
• La estructura de la página debe ser lo más lógica posible facilitando la
navegación a tus visitantes (es importante en este punto la usabilidad).
Ninguna página puede quedar huérfana, es decir, todas las páginas deben
de tener enlaces a otras páginas. Si esto ocurre, es probable que el usuario
cierre nuestra página y entre en otra en la que le sea más fácil navegar por
los contenidos.

55. Pasos para crear una Web
4. Programar una Web
• Aunque no es un requisito necesario, sí que es muy aconsejable que
aprendas HTML, ya que así podrás hacer todo lo que quieras sin depender
de editores gráficos como Dreamweaver, tendrás más flexibilidad y
opciones a la hora de realizar tus diseños, podrás corregir tu código y saber
qué es lo que falla cuando te de errores, entenderás cómo funcionan las
páginas de otros webmasters, etc.

56. Pasos para crear una Web
4. Programar una Web
• Aprender a usar otras técnicas, como las hojas de estilo (CSS) te será muy
útil para crear una página atractiva y bien diseñada. Con las hojas de estilo
puedes crear un archivo que te sirva para dar una mejor apariencia a todas
tus páginas a la vez, y siempre que quieras cambiar el aspecto de tu web,
sólo tendrás que modificar ese archivo en lugar de ir una por una revisando
cada página de la misma.

57. Video
Video Web 2.0