• Save
Tipos de páginas web
Upcoming SlideShare
Loading in...5
×
 

Tipos de páginas web

on

  • 274 views

 

Statistics

Views

Total Views
274
Views on SlideShare
164
Embed Views
110

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 110

http://koldoparra.wordpress.com 110

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tipos de páginas web Tipos de páginas web Presentation Transcript

  • Koldo Parra de la Horra 1 TIPOS DE PÁGINAS WEB Desde el punto de vista del: •Usuario. •Programador o Administrador.
  • Koldo Parra de la Horra 2 ÍNDICE 1. Páginas Web desde el punto de vista del Usuario: 1. Web 1.0 2. Web 2.0 • Páginas Web desde el punto de vista del programador- Administrador. 1. Web clásicas-Webs estáticas 2. Webs dinámicas basadas en CMSs 1. Comunidades y redes sociales 2. Blogs 3. Wikis 4. Portales Web 5. Foros
  • Koldo Parra de la Horra 3 Para 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 existe retroalimentació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.0 cualquiera puede crear y aportar contenidos en Internet. Podemos distinguir entre Web 1.0 y Web 2.0
  • Koldo Parra de la Horra 4 Web 1.0 y Web 2.0 Web 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.. Diferencias Web 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.. Diferencias Web 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.. Diferencias Web 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.. Diferencias Web 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..
  • Koldo Parra de la Horra 5 Caracterí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 con conocimientos 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”.
  • Koldo Parra de la Horra 6 WEBMASTER INGRESA LA INFORMACION EN LAS PAGINAS WEB USUARIOS PUEDEN VISUALIZAR LA INFORMACION Y COPIARLA PERO NO PUEDEN MODIFICARLA O APORTAR. ESTRUCTURA VERTICAL NO PARTICIPATIVA
  • Koldo Parra de la Horra 7 CONCEPTOS, APLICACIONES O PROGRAMAS UTILIZADOS 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
  • Koldo Parra de la Horra 8 WEBMASTER O ADMINISTRADOR LOS USUARIOS INTERACTÚAN CON LA PAGINA, PUEDEN EDITARLA O AGREGAR INFORMACIÓN. LAS APLICACIONES WEB 2.0 FACILITAN EL MANEJO DE CONTENIDOS LOS USUARIOS TAMBIÉN INTERACTÚAN ENTRE ELLOS USUARIOS ESTRUCTURA HORIZONTAL Y PARTICIPATIVA APLICACIONES WEB 2.0
  • Koldo Parra de la Horra 9 CONCEPTOS RELACIONADOS CON LA WEB 2.0 : REDES SOCIALES. RELACIONES INTERPERSONALES EN TORNO A TEMAS COMUNES PÁGINAS COLABORATIVAS. BLOGS Y WIKIS REGISTRO DE USUARIOS. COMUNIDADES DE USUARIOS. DISEÑO CENTRADO EN EL USUARIO. LAS APLICACIONES O HERRAMIENTAS WEB 2.0 Y LAS INTERFACES BUSCAN LA USABILIDAD. FACILITAR EL MANEJO AL USUARIO TECNOLOGÍAS DE PROGRAMACIÓN AJAX Y PHP (BASES DE DATOS) ALMACENAR Y COMPARTIR CONTENIDOS. SERVICIOS DE ALOJAMIENTO Y COMPARTICIÓN WEB DE ARCHIVOS (YOUTUBE, SCRIBD, FLICKR, ETC… DISEÑO Y GESTIÓN DE PAGINAS POR MEDIO DE CMS. (CONTENT MANAGER SYSTEM)
  • Koldo Parra de la Horra 10 Herramientas para generar contenidos y compartirlos con otros usuarios Enorme cantidad de programas y utilidades INTEGRADAS EN LA PÁGINA que permiten a los usuarios crear y compartir información. Incluyen utilidades para crear y gestionar fotos, videos, documentos, mapas, presentaciones, calendarios, etc. Servicios en nube para editar y almacenar archivos, compartir y comentar. Folksonomia: Etiquetado de contenidos. Ordenación social de contenidos. Clasificación colaborativa
  • Koldo Parra de la Horra 11
  • Koldo Parra de la Horra 12 Folcsonomía • Una folcsonomía es un procedimiento para catalogar o clasificar las cosas de manera colaborativa. • La manera actual y mas popular de realizar las folcsonomías es por medio de los tags (o etiquetas). • Las etiquetas usualmente se muestran en forma de nube (tag cloud) donde por popularidad unas palabras claves se distinguen de otras según su tamaño.
  • Koldo Parra de la Horra 13 Marcadores 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 comparten VENTAJAS DESVENTAJAS • Todos los recursos de información son clasificados y procesados por personas, por lo tanto se le adjudica una pertinencia real. • No hay una estructura predefinida para las etiquetas (lenguaje controlado). • Nos permite conocer cuales enlaces son los preferidos por nuestros usuarios. Creando esto un ‘ ranking ’ de recursos mas útiles, según los usuarios. • No existe una forma de jerarquizar y asociar las etiquetas.
  • Koldo Parra de la Horra 14 Delicious • Es un servicio de gestión de marcadores sociales en web. Permite agregar los marcadores que clásicamente se guardaban en los navegadores y categorizarlos con un sistema de etiquetado denominado folcsonomías (tags). • No sólo puede almacenar sitios webs, sino que también permite compartirlos con otros usuarios de del.icio.us y determinar cuántos tienen un determinado enlace guardado en sus marcadores.
  • Koldo Parra de la Horra 15 Caracterí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.
  • Koldo Parra de la Horra 16 Para el Programador-Administrador Diferencias Web Clásica • Se programaba en HTML y Java Script 1.0. en local y se transfería al servidor 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
  • Koldo Parra de la Horra 17 Código fuente HTML: Al principio se programaba directamente en código HTML de la página en texto plano. Un paso adelante fue la programación en entornos WYSIWYG. Programación de Webs clásicas
  • Koldo Parra de la Horra 18 1. El Diseñador crea la Web en su disco duro. Estructura de archivos, carpetas y enlaces rígida. Hay que utilizar programas específicos de diseño Web 2. Se transfiere todo el contenido al servidor Web vía FTP. Debe previamente haberse contratado un Hosting y reservado un dominio 3. Para modificar o actualizar la página se cambia el archivo en local y se sobreescribe por FTP en el servidor. Lento y costoso. Programación de Webs clásicas
  • Koldo Parra de la Horra 19 Estructura Programació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.
  • Koldo Parra de la Horra 20 La estructura de enlaces una vez creada es muy rígida. Los contenidos no se pueden cambiar de sitio porque la página no los “encuentra”. El Género musical Las obras maestras Historia del cine musical Escenas inolvidables index Programación de Webs clásicas
  • Koldo Parra de la Horra 21 No 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 funcionalidad deseada y se añade el contenido Creación Web por CMS Son modulares, es decir, se pueden ir añadiendo elementos, que aportan nuevas funcionalidades. El ejemplo más simple es el de los Gadgets en los Blogs. En otros casos se habla de Widgets, Plugings, Módulos o Extensiones
  • Koldo Parra de la Horra 22 Proceso Creación Web por CMS 1. En lugar de programar hablamos de configurar. Se parte de una página base que se modifica y adapta. En ocasiones es modular, pudiendo añadir funcionalidades. Se pueden crear usuarios y compartir las tareas de administración y creación de contenidos. 2. La página está desde el primer momento en el servidor. Se “instala” en el Servidor y se accede a él desde el navegador para realizar modificaciones directamente 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 los usuarios y Backend o panel de control, sólo accesible a los administradores.
  • Koldo Parra de la Horra 23 Ventajas 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.
  • Koldo Parra de la Horra 24 Ventajas 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
  • Koldo Parra de la Horra 25 Comunidades 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 creada EJEMPLOS: http://www.exvagos.com/ http://www.taringa.net/
  • Koldo Parra de la Horra 26 • Los blogs son cada vez más importantes en Internet. Día a día están sustituyendo a medios de comunicación impresos 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 las palabras web y log ('log' en inglés = diario). Los Blogs
  • Koldo Parra de la Horra 27 Los Blogs Ventajas • 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.
  • Koldo Parra de la Horra 28 Los Blogs Caracterí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.
  • Koldo Parra de la Horra 29 Los Blogs Anatomía de un Blog CONTENIDOS (ARTÍCULOS) GADGETS
  • Koldo Parra de la Horra 30 Los Blogs Elementos 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.
  • Koldo Parra de la Horra 31 Los Blogs Anatomía de un Blog •Cabecera •Menú lateral: •Blogroll •Buscador •Menú •Archivo temático •Archivo cronológico •Contenido - post: •Permalink • Comentarios •Tags/etiquetas
  • Koldo Parra de la Horra 32 Las Wikis Caracterí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 de edició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.
  • Koldo Parra de la Horra 33 Las Wikis Ventajas • 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.
  • Koldo Parra de la Horra 34 • Existen herramientas CMS con las que cualquier usuario puede abrir una wiki e invitar a colaboradores, asignar permisos, etc…, de forma muy similar a como se hace con los blogs. • Utilizar estos servicios requiere registro y en algunos casos suscripción Las Wikis
  • Koldo Parra de la Horra 35 Las Wikis Anatomía de una Wiki •Cabecera •Menú lateral: Índice de entradas •Administración •Buscador •Contenido-post: •Artículo
  • Koldo Parra de la Horra 36 Las Wikis Elementos 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 hay controversia de puntos de vista para resolver las discusiones en favor de un consenso neutral.
  • Koldo Parra de la Horra 37 Redes Sociales Caracterí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…
  • Koldo Parra de la Horra 38 Redes Sociales • Muros similares. • Cada red social tiene su propio diseño parcialmente configurable.
  • Koldo Parra de la Horra 39 Permiten la participación activa de usuarios pudiendo así:  Administrar sus propios contenidos.  Opinar sobre otros.  Enviar y recibir información con otras personas o instituciones. Clasificación de usuarios en las Redes Sociales: – PASIVOS . – ACTIVOS . – COLABORATIVOS. 39 Redes Sociales
  • Koldo Parra de la Horra 40 Facebook Twiter. Tuenti. Myspace. Características • Gran número de registros. • Conversación entre usuarios. • Tienen una gran proactividad Subir fotos. Enviar comentarios. Participar en una conversación Inscribirse o crear eventos. 40 Redes Sociales
  • Koldo Parra de la Horra 41 Portales Web Características • Un portal de Internet es un sitio web que ofrece al usuario, de forma fácil e integrada, el acceso 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ón específica de un tema en particular. • Los llamados portales masivos o de propósito general, se dirigen a una audiencia amplia, tratando de llegar a toda la gente con muchas cosas. Como ejemplo de portales de esta categoría están Terra, AOL, AltaVista, UOL, Lycos, Yahoo, MSN, Yandex, etc.
  • Koldo Parra de la Horra 42 Los Foros Características • Son foros de discusión. Normalmente son temáticos (Se montan en torno a uno o a varios temas relacionados). Son una forma de comunicación asíncrona. El objetivo de los foros es que todos los usuarios colaboren mediante comentarios, para así obtener diferentes puntos 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 tema relacionado 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 nuevos hilos, etc. Los administradores pueden eliminar mensajes e incluso expulsar (bannear) a miembros.
  • Koldo Parra de la Horra 43 Los Foros Elementos 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.
  • Koldo Parra de la Horra 44 Los Foros Elementos habituales • Cabecera y registro. Buscador • Tablón de anuncios • Foros y subforos
  • Koldo Parra de la Horra 45 Los Foros Elementos habituales • Hilo abierto • Posts
  • Koldo Parra de la Horra 46 Fin de la presentación. TIPOS DE PÁGINAS WEB