Tipos de páginas web

1,436 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,436
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tipos de páginas web

  1. 1. Koldo Parra de la Horra 1TIPOS DEPÁGINAS WEBDesde el punto de vista del:•Usuario.•Programador o Administrador.
  2. 2. Koldo Parra de la Horra 2ÍNDICE1. Páginas Web desde el punto de vista del Usuario:1. Web 1.02. Web 2.0• Páginas Web desde el punto de vista del programador-Administrador.1. Web clásicas-Webs estáticas2. Webs dinámicas basadas en CMSs1. Comunidades y redes sociales2. Blogs3. Wikis4. Portales Web5. Foros
  3. 3. Koldo Parra de la Horra 3Para el Usuario• La principal diferencia es el grado de interoperabilidad entre la página y el usuario. Es decir, si permiten o no la participación del usuario, si existeretroalimentación en los contenidos.• En la Web 1.0 los usuarios son forzosamente pasivos. En la Web 2.0 pueden serlo o no, ellos eligen.• Democratización de la red. Con la Web 1.0 para publicar contenidos eran necesarios conocimientos avanzados y recursos económicos. En la Web 2.0cualquiera puede crear y aportar contenidos en Internet.Podemos distinguir entre Web 1.0 y Web 2.0
  4. 4. Koldo Parra de la Horra 4Web 1.0 y Web 2.0Web 1.0• Pocos productores de contenido y muchos lectores de estos.• Páginas estáticas.• La actualización de los sitios web no se hacían periódicamente.• No había interacción entre usuario y página, ni entre usuarios con otros usuarios.• Su tecnología estaba asociada con HTML, gif, Java Script 1.0.Web 2.0• Los usuarios se transforman en productores de contenido.• Permiten la interrelación entre usuarios (redes sociales)• Páginas con facilidad de renovar fácilmente su contenido.• Su tecnología está relacionada con Java Script 2.0, XHTML, Google, etc...• Todos los cibernautas tienen la facilidad de acceder a la página web que prefiera..DiferenciasWeb 1.0• Pocos productores de contenido y muchos lectores de estos.• Páginas estáticas.• La actualización de los sitios web no se hacían periódicamente.• No había interacción entre usuario y página, ni entre usuarios con otrosusuarios.• Su tecnología estaba asociada con HTML, gif, Java Script 1.0.Web 2.0• Los usuarios se transforman en productores de contenido.• Permiten la interrelación entre usuarios (redes sociales)• Páginas con facilidad de renovar fácilmente su contenido.• Su tecnología está relacionada con Java Script 2.0, XHTML, Google, etc...• Todos los cibernautas tienen la facilidad de acceder a la página web que prefiera..DiferenciasWeb 1.0• Pocos productores de contenido y muchos lectores de estos.• Páginas estáticas.• La actualización de los sitios web no se hacían periódicamente.• No había interacción entre usuario y página, ni entre usuarios con otrosusuarios.• Su tecnología estaba asociada con HTML, gif, Java Script 1.0.Web 2.0• Los usuarios se transforman en productores de contenido.• Permiten la interrelación entre usuarios (redes sociales)• Páginas con facilidad de renovar fácilmente su contenido.• Su tecnología está relacionada con Java Script 2.0, XHTML, Google, etc...• Todos los cibernautas tienen la facilidad de acceder a la página web que prefiera..DiferenciasWeb 1.0• Pocos productores de contenido y muchos lectores de estos.• Páginas estáticas.• La actualización de los sitios web no se hacían periódicamente.• No había interacción entre usuario y página, ni entre usuarios con otrosusuarios.• Su tecnología estaba asociada con HTML, gif, Java Script 1.0.Web 2.0• Los usuarios se transforman en productores de contenido.• Permiten la interrelación entre usuarios (redes sociales)• Páginas con facilidad de renovar fácilmente su contenido.• Su tecnología está relacionada con Java Script 2.0, XHTML, Google, etc...• Todos los cibernautas tienen la facilidad de acceder a la página web que prefiera..DiferenciasWeb 1.0• Pocos productores de contenido y muchos lectores de estos.• Páginas estáticas.• La actualización de los sitios web no se hacían periódicamente.• No había interacción entre usuario y página, ni entre usuarios con otrosusuarios.• Su tecnología estaba asociada con HTML, gif, Java Script 1.0.Web 2.0• Los usuarios se transforman en productores de contenido.• Permiten la interrelación entre usuarios (redes sociales)• Páginas con facilidad de renovar fácilmente su contenido.• Su tecnología está relacionada con Java Script 2.0, XHTML, Google, etc...• Todos los cibernautas tienen la facilidad de acceder a la página web que prefiera..
  5. 5. Koldo Parra de la Horra 5Características de la Web 1.0• Son páginas estáticas.• Su función era meramente informativa.• Paginas creadas a partir del código HTML difícilmente actualizables. Pocos productores de contenidos (minoría de personas conconocimientos en lenguajes de programación).• No había interacción entre usuario y página ni entre usuarios con otros usuarios.• Discurso lineal: emisor-receptor. Sitios direccionales y no colaborativos. Los usuarios son simples “lectores consumidores”.
  6. 6. Koldo Parra de la Horra 6WEBMASTERINGRESA LAINFORMACION EN LASPAGINAS WEB USUARIOSPUEDEN VISUALIZAR LA INFORMACIONY COPIARLA PERO NO PUEDENMODIFICARLA O APORTAR.ESTRUCTURA VERTICALNO PARTICIPATIVA
  7. 7. Koldo Parra de la Horra 7CONCEPTOS, APLICACIONES O PROGRAMASUTILIZADOS CON LA WEB 1.0 :FLASHJAVASCRIPTHTMLCGI (COMMON GATEWAY INTERFACE)DISEÑO DE PAGINAS POR MEDIO DE MARCOS, TABLAS,HIPERVINCULOS, ETC.BUSCADORESPORTALESPAGINAS PERSONALIZADASE-MAIL O WEBMAIL
  8. 8. Koldo Parra de la Horra 8WEBMASTEROADMINISTRADORLOS USUARIOS INTERACTÚAN CON LA PAGINA, PUEDENEDITARLA O AGREGAR INFORMACIÓN.LAS APLICACIONES WEB 2.0 FACILITAN EL MANEJO DECONTENIDOSLOS USUARIOS TAMBIÉN INTERACTÚAN ENTRE ELLOSUSUARIOSESTRUCTURA HORIZONTAL YPARTICIPATIVAAPLICACIONESWEB 2.0
  9. 9. Koldo Parra de la Horra 9CONCEPTOS RELACIONADOS CON LA WEB 2.0 :REDES SOCIALES. RELACIONES INTERPERSONALES EN TORNO ATEMAS COMUNESPÁGINAS COLABORATIVAS. BLOGS Y WIKISREGISTRO DE USUARIOS. COMUNIDADES DE USUARIOS. DISEÑOCENTRADO EN EL USUARIO.LAS APLICACIONES O HERRAMIENTAS WEB 2.0 Y LAS INTERFACESBUSCAN LA USABILIDAD. FACILITAR EL MANEJO AL USUARIOTECNOLOGÍAS DE PROGRAMACIÓN AJAX Y PHP (BASES DE DATOS)ALMACENAR Y COMPARTIR CONTENIDOS. SERVICIOS DEALOJAMIENTO Y COMPARTICIÓN WEB DE ARCHIVOS (YOUTUBE,SCRIBD, FLICKR, ETC…DISEÑO Y GESTIÓN DE PAGINAS POR MEDIO DECMS. (CONTENT MANAGER SYSTEM)
  10. 10. Koldo Parra de la Horra 10Herramientas paragenerar contenidosy compartirlos conotros usuariosEnorme cantidad de programas yutilidades INTEGRADAS EN LA PÁGINAque permiten a los usuarios crear ycompartir información.Incluyen utilidades para crear y gestionarfotos, videos, documentos, mapas,presentaciones, calendarios, etc.Servicios en nube para editar y almacenararchivos, compartir y comentar.Folksonomia: Etiquetado de contenidos.Ordenación social de contenidos.Clasificación colaborativa
  11. 11. Koldo Parra de la Horra 11
  12. 12. Koldo Parra de la Horra 12Folcsonomía• Una folcsonomía es un procedimiento paracatalogar o clasificar las cosas de maneracolaborativa.• La manera actual y mas popular de realizar lasfolcsonomías es por medio de los tags (oetiquetas).• Las etiquetas usualmente se muestranen forma de nube (tag cloud) dondepor popularidad unas palabras clavesse distinguen de otras según sutamaño.
  13. 13. Koldo Parra de la Horra 13Marcadores sociales• La diferencia con los marcadores clásicos del navegador es:• Que los enlaces son guardados en un programa con base Web.• Que dichos enlaces se compartenVENTAJAS DESVENTAJAS• Todos los recursos deinformación son clasificados yprocesados por personas, porlo tanto se le adjudica unapertinencia real.• No hay una estructurapredefinida para las etiquetas(lenguaje controlado).• Nos permite conocer cualesenlaces son los preferidos pornuestros usuarios. Creandoesto un ‘ ranking ’ de recursosmas útiles, según losusuarios.• No existe una forma dejerarquizar y asociar lasetiquetas.
  14. 14. Koldo Parra de la Horra 14Delicious• Es un servicio de gestión de marcadoressociales en web. Permite agregar losmarcadores que clásicamente se guardaban enlos navegadores y categorizarlos con un sistemade etiquetado denominado folcsonomías (tags).• No sólo puede almacenarsitios webs, sino quetambién permitecompartirlos con otrosusuarios de del.icio.us ydeterminar cuántostienen un determinadoenlace guardado en susmarcadores.
  15. 15. Koldo Parra de la Horra 15Características de la Web 2.0• Son páginas dinámicas.• Su función es participativa. Se originó a partir de 2003. Los usuarios de transforman en productores de contenido• Paginas creadas a partir de tecnologías Ajax, DHTML, XML, Soap.• Enfocadas a la usabilidad. Cualquiera con muy pocos o nulos conocimientos de programación puede crear y gestionar una página.• Basada en comunidades de usuarios, fomentan la colaboración y el intercambio ágil de información entre los usuarios.
  16. 16. Koldo Parra de la Horra 16Para el Programador-AdministradorDiferenciasWeb Clásica• Se programaba en HTML y Java Script 1.0. en local y se transfería alservidor vía FTP.• Se requerían conocimientos amplios de programación.• Se requerían programas de edición Web.• Un Webmaster o unos pocos podían realizar modificaciones.• Era imprescindible contratar Hosting y Dominio.Web basada en CMSs• Mucho más sencilla, partiendo de una página base se modifica y adapta a criterio del administrador.• Desliga contenido y continente.• Se edita directamente en servidor mediante programa navegador y en tiempo real.• Su tecnología está relacionada con Java Script 2.0, y XHTML, transparente al usuario.• Dispone de Backend y Frontend.• En algunos casos no nos preocupamos del Hosting ni Dominio
  17. 17. Koldo Parra de la Horra 17Código fuente HTML: Al principio se programaba directamenteen código HTML de la página en texto plano. Un pasoadelante fue la programación en entornos WYSIWYG.Programación de Webs clásicas
  18. 18. Koldo Parra de la Horra 181. El Diseñador crea la Web en su disco duro. Estructura dearchivos, carpetas y enlaces rígida. Hay que utilizar programasespecíficos de diseño Web2. Se transfiere todo el contenido al servidor Web vía FTP. Debepreviamente haberse contratado un Hosting y reservado un dominio3. Para modificar o actualizar la página se cambia el archivo en local y sesobreescribe por FTP en el servidor. Lento y costoso.Programación de Webs clásicas
  19. 19. Koldo Parra de la Horra 19EstructuraProgramación de Webs clásicas• Los archivos html y los archivos de imágenes, videos y otros contenidos se almacenan en carpetas• Una vez establecidos los enlaces e hipervínculos relativos, los archivos no pueden cambiarse de ubicación ni de nombre.• La uniformidad de estilo se obtiene mediante las “Hojas de estilo en cascada” o CSSs.• Esta estructura debe ser copiada “tal cual” en la raíz del servidor. La transferencia habitualmente es mediante FTP.
  20. 20. Koldo Parra de la Horra 20La estructura de enlaces una vez creada es muy rígida. Loscontenidos no se pueden cambiar de sitio porque la página no los“encuentra”.El Género musical Las obras maestrasHistoria del cine musicalEscenas inolvidablesindexProgramación de Webs clásicas
  21. 21. Koldo Parra de la Horra 21No se puede hablar de programación propiamente dicha.Se instala un software en el servidor, que constituye una Web tipo.Después se va configurando hasta darle el aspecto y funcionalidaddeseada y se añade el contenidoCreación Web por CMSSon modulares, es decir, se pueden ir añadiendo elementos, que aportannuevas funcionalidades. El ejemplo más simple es el de los Gadgets en losBlogs.En otros casos se habla de Widgets, Plugings, Módulos o Extensiones
  22. 22. Koldo Parra de la Horra 22ProcesoCreación Web por CMS1. En lugar de programar hablamos de configurar. Se parte de una página baseque se modifica y adapta. En ocasiones es modular, pudiendo añadirfuncionalidades. Se pueden crear usuarios y compartir las tareas deadministración y creación de contenidos.2. La página está desde el primer momento en el servidor. Se “instala” en elServidor y se accede a él desde el navegador para realizar modificacionesdirectamente y en tiempo real. No hacen falta programas ni transferencias.3. La página se divide en dos partes: Frontend o portada accesible a todos losusuarios y Backend o panel de control, sólo accesible a losadministradores.
  23. 23. Koldo Parra de la Horra 23Ventajas de los CMSs• Uso sencillo: No es necesario saber programar para publicar y gestionar contenido dinámico o estático.• No todas las páginas Web son iguales, y para ello tenemos tantos CMS como tipos de Webs. Los hay para blogs, páginas corporativas,comercio online, inmobiliarias, noticias o magazines, contenidos multimedia, y así un largo etc. Algunos CMS son libres y otros de pago.• Personalizable: Desde el diseño o aspecto, hasta las funcionalidades y opciones. Fácilmente actualizables.• Los contenidos pueden reorganizarse y recolocarse. La estructura de enlaces y menús es flexible.
  24. 24. Koldo Parra de la Horra 24Ventajas de los CMSs• Escalable: Uno de los puntos fuertes de los CMS son los plugins o módulos que podremos añadir en cualquier momento y pueden significar una nueva funcionalidad.• Seguridad: Actualizaciones de seguridad frecuentes, protocolos de encriptación de información sensible y buen entendimiento con las opciones de seguridad del propio servidor.• Permite registro de Usuario: Y también asignar diferentes privilegios de acceso y de edición.• SEO e indexación: Buena gestión del posicionamiento en buscadores, para conseguir aparecer en las primeras posiciones de Google
  25. 25. Koldo Parra de la Horra 25Comunidades de usuarios• Temáticos: Se articulan en torno a un tema o a varios temas de interés. Requieren registro por parte del usuario. Son sitios Web donde los usuarios suben recursos y los ponen a disposición de la comunidad.• Administradores: Gestionan el sitio y administran los privilegios del resto de usuarios. Tienen acceso total• Usuarios: Con distinto nivel de privilegios. Tienen acceso parcial.• Pueden incorporar secciones diversas tales como foros u otras funcionalidades.• Se comparten ideas y contenidos• Son gregarias: En general un usuario no crea su propia comunidad, sino que se adhiere a una ya creadaEJEMPLOS:http://www.exvagos.com/http://www.taringa.net/
  26. 26. Koldo Parra de la Horra 26• Los blogs son cada vez más importantes en Internet. Díaa día están sustituyendo a medios de comunicaciónimpresos como periódicos o revistas.• Hoy en día cualquier persona puede crear un blog,gracias a las herramientas CMS.• Este término inglés blog o weblog proviene de laspalabras web y log (log en inglés = diario).Los Blogs
  27. 27. Koldo Parra de la Horra 27Los BlogsVentajas• Son gratuitos. No requieren alquiler de Hosting ni reserva de dominio.• Se instalan con unos pocos clics.• Basados en CMSs, tienen una estructura de partida que después configuramos a nuestro gusto.• Son escalables, es decir, podemos ampliar sus funcionalidades mediante los Gadgets.• Parte pública y parte privada del blog. La parte privada sólo accesible para los autores.
  28. 28. Koldo Parra de la Horra 28Los BlogsCaracterísticas• Un Weblog o Blog o Bitácora es un espacio personal de escritura en Internet de fácil actualización.• Se denomina Blogosfera al conjunto de Blogs publicados en Internet.• Las entradas se ordenan en dos ejes: orden cronológico inverso y orden temático.• Tiene una concepción acumulativa. Las entradas nuevas se suman a las entradas anteriores.• Normalmente son de carácter personal, aunque el autor puede invitar a participar a otros autores.• Son interactivos, pues permiten a los “lectores” reaccionar a los artículos mediante comentarios.
  29. 29. Koldo Parra de la Horra 29Los BlogsAnatomía de un BlogCONTENIDOS(ARTÍCULOS)GADGETS
  30. 30. Koldo Parra de la Horra 30Los BlogsElementos habituales• Comentarios a los distintos artículos.• Calendario, o archivos por año/mes/día.• Categorías o temas en que se clasifican los artículos.• Blogroll, o repertorio de enlaces a otros blogs o sitios web.• Etiquetas: Sirven para clasificar temáticamente los contenidos• Buscador interno.
  31. 31. Koldo Parra de la Horra 31Los BlogsAnatomía de un Blog•Cabecera•Menú lateral:•Blogroll•Buscador•Menú•Archivo temático•Archivocronológico•Contenido - post:•Permalink• Comentarios•Tags/etiquetas
  32. 32. Koldo Parra de la Horra 32Las WikisCaracterísticas• Los wikis nacen en 1994. Tomó el nombre en honor a la palabra hawaiana "wiki", que significa “rápido”, para expresar la velocidad y facilidad deedición que tenía el sistema recién creado.• Se basan en CMSs.• Se denomina Wikisfera al conjunto de Wikis publicadas en Internet.• Son páginas colaborativas, donde todos los autores pueden crear, editar y modificar las entradas.• Guarda un historial de revisiones.
  33. 33. Koldo Parra de la Horra 33Las WikisVentajas• Facilidad de uso: permite crear o modificar páginas web sin conocimiento técnico alguno.• Gran flexibilidad y libertad: favorece la participación frente a otros medios más restringidos.• Escritura colectiva: co-autoría• Historial de cambios: permite la restitución de versiones anteriores y actúa a modo de garantía de transparencia del proceso.
  34. 34. Koldo Parra de la Horra 34• Existen herramientas CMS con las que cualquier usuario puede abrir una wiki einvitar a colaboradores, asignar permisos, etc…, de forma muy similar a comose hace con los blogs.• Utilizar estos servicios requiereregistro y en algunos casossuscripciónLas Wikis
  35. 35. Koldo Parra de la Horra 35Las WikisAnatomía de una Wiki•Cabecera•Menú lateral: Índicede entradas•Administración•Buscador•Contenido-post:•Artículo
  36. 36. Koldo Parra de la Horra 36Las WikisElementos habituales• Artículo. Cada una de las páginas de edición que contienen contenido editado por el usuario.• Edición. Pestaña de segundo plano donde se pueden editar los artículos.• Historial. Listado con los registros de todas las ediciones que se han hecho en el artículo. Desde aquí se pueden revertir los cambios.• Discusión. Espacio para el intercambio de ideas y opiniones en torno al artículo en cuestión. Especialmente indicado cuando haycontroversia de puntos de vista para resolver las discusiones en favor de un consenso neutral.
  37. 37. Koldo Parra de la Horra 37Redes SocialesCaracterísticas• Requieren registro de usuario. Se habla de perfil de usuario. Cada perfil constituye una página.• Se articulan en torno a las relaciones personales entre los usuarios.• Los contenidos se comparten o no en función del círculo de amigos definido.• Son páginas gregarias. En general un usuario no crea su propia red social, sino que se suma a una ya creada.• Puede compartirse material multimedia.• Existen de muy diversos tipos: Generalistas y temáticas. Personales y profesionales, etc…
  38. 38. Koldo Parra de la Horra 38Redes Sociales• Muros similares.• Cada red social tiene su propio diseño parcialmenteconfigurable.
  39. 39. Koldo Parra de la Horra 39Permiten la participación activa de usuarios pudiendo así: Administrar sus propios contenidos. Opinar sobre otros. Enviar y recibir información con otras personas oinstituciones.Clasificación de usuarios en las Redes Sociales:– PASIVOS .– ACTIVOS .– COLABORATIVOS.39Redes Sociales
  40. 40. Koldo Parra de la Horra 40FacebookTwiter.Tuenti.Myspace.Características• Gran número de registros.• Conversación entre usuarios.• Tienen una gran proactividadSubir fotos.Enviar comentarios.Participar en unaconversaciónInscribirse o crear eventos.40Redes Sociales
  41. 41. Koldo Parra de la Horra 41Portales WebCaracterísticas• Un portal de Internet es un sitio web que ofrece al usuario, de forma fácil e integrada, elacceso a una serie de recursos y de servicios relacionados a un mismo tema. Incluye:enlaces, buscadores, foros, documentos, aplicaciones, compra electrónica, etc.Principalmente un portal en Internet está dirigido a resolver necesidades de informaciónespecífica de un tema en particular.• Los llamados portales masivos o de propósito general, se dirigen auna audiencia amplia, tratando de llegar a toda la gente con muchascosas. Como ejemplo de portales de esta categoría están Terra,AOL, AltaVista, UOL, Lycos, Yahoo, MSN, Yandex, etc.
  42. 42. Koldo Parra de la Horra 42Los ForosCaracterísticas• Son foros de discusión. Normalmente son temáticos (Se montan en torno a uno o a varios temas relacionados). Son una forma decomunicación asíncrona. El objetivo de los foros es que todos los usuarios colaboren mediante comentarios, para así obtener diferentespuntos de vista.• Requieren registro de usuario y aceptación de las normas del foro. Con estos requisitos cualquiera tiene la opción de proponer un temarelacionado con el foro. Puede hacer preguntas o exponer una opiniones.• Existen unos administradores-moderadores y una serie de usuarios con mayor o menor grado de derechos para postear, abrir nuevoshilos, etc. Los administradores pueden eliminar mensajes e incluso expulsar (bannear) a miembros.
  43. 43. Koldo Parra de la Horra 43Los ForosElementos característicos• Tablón de anuncios: Hilos permanentes en los que sólo postean los administradores, para dar avisos, colgar las normas, etc…• Foros y subforos. Dentro de la página del foro se pueden establecer foros con temáticas distintas aunque generalmente relacionadas por una idea común.• Hilo o Discusión: Cada nueva discusión que se propone. Abrir un hilo es proponer un nuevo tema a discutir.• Post: Mensaje, ya sea para abrir un nuevo hilo o para contestar en un hilo ya abierto.
  44. 44. Koldo Parra de la Horra 44Los ForosElementos habituales• Cabecera y registro. Buscador• Tablón de anuncios• Foros y subforos
  45. 45. Koldo Parra de la Horra 45Los ForosElementos habituales• Hilo abierto• Posts
  46. 46. Koldo Parra de la Horra 46Fin de la presentación.TIPOS DEPÁGINAS WEB

×