Tipos de páginas web

Koldo Parra de la Horra 1
TIPOS DE
PÁGINAS WEB
Desde el punto de vista del:
•Usuario.
•Programador o Administrador.

Í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

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

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
• No había interacción entre usuario y página, ni entre usuarios con otros
usuarios.
Web 2.0
Diferencias
Web 1.0
usuarios.
Web 2.0
Diferencias
Web 1.0
usuarios.
Web 2.0
Diferencias
Web 1.0
usuarios.
Web 2.0

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”.

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

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

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

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)

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

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.

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.

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.

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.

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

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

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.

Estructura
• 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.

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

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

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.

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.

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

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/

• 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

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.

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.

Los Blogs
Anatomía de un Blog
CONTENIDOS
(ARTÍCULOS)
GADGETS

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.

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

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.

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.

• 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

Las Wikis
Anatomía de una Wiki
•Cabecera
•Menú lateral: Índice
de entradas
•Administración
•Buscador
•Contenido-post:
•Artículo

Las Wikis
• 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.

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…

Redes Sociales
• Muros similares.
• Cada red social tiene su propio diseño parcialmente
configurable.

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

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

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.

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.

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.

Los Foros
• Cabecera y registro. Buscador
• Tablón de anuncios
• Foros y subforos

Los Foros
• Hilo abierto
• Posts

Fin de la presentación.
TIPOS DE
PÁGINAS WEB

Tipos de páginas web

Más contenido relacionado

La actualidad más candente

Similar a Tipos de páginas web

Más de Koldo Parra

Último

Tipos de páginas web