UNIVERSIDAD DE PANAMÁ

CENTRO REGIONAL UNIVERSITARIO DE VERAGUAS

FACULTAD DE INFORMÁTICA, ELECTRÓNICA Y

COMUNICACIÓN

MATERIA:

TECNOLOGIA WEB

NOMBRE:
NEYRIS GONZALEZ
CED. 9-752-117

II SEMESTRE

2018
 1. Tipos de Web
Página Web Estática:

Es aquella que está compuesta de una serie de archivos que contienen el código HTML que
constituye la página en sí y que permiten mostrar los textos, imágenes, videos, etc que
conforman el contenido de la página.

Estos archivos se almacenan en el servidor de Hosting en formato HTML junto con los
archivos de imágenes (comúnmente en formato jpg, gif o png) y los videos y demás contenido
del site.

Para modificar este tipo de página los archivos deben ser descargados del servidor con algún
software para este fin (como los clientes FTP), editado usando un programa de edición de
páginas web como el Dreamweaver, grabados y subidos nuevamente al servidor.

Página Web Dinámica:

El término dinámico no se refiere a movimiento como muchos pueden pensar. El término

dinámico hace referencia a que la página web se construye al momento en que la página es
visitada por el usuario. Es decir que el contenido de la página web no es fijo sino que se
construye de acuerdo a la interacción que el usuario hace con la página. La información de
este tipo de página suele estar almacenada en Bases de Datos de las cuales se extrae una parte
según las selecciones o acciones llevada a cabo por la persona que visita la página web.

Para realizar este tipo de página se necesita tener conocimientos de programación y manejo
de bases de datos o usar software que haga uso de estas tecnologías.

Páginas Web en Flash

Este tipo de página web son construidas usando el software de Adobe llamado Flash. Este
software permite realizar animaciones. Este tipo de página suelen ser muy vistosas y estan
cargadas de efectos, movimientos, sonidos y demás.

Para su construcción es necesario conocer a profundidad este software de animación.

El resultado de la construcción de este tipo de páginas son una serie de archivos en extensión
swf que se suben a un servidor de Hosting. Para poder ser visualizados se necesita que la PC
del visitante tenga instalado un programa anexo al navegador o plug-in. Cabe señalar que el
90% de las PC’s del mundo tienen este plugin instalado.

Páginas Web en HTML

Son páginas estáticas construidas en el lenguaje de marcado HTML. Para construirlas se

necesita saber este lenguaje que es bastante sencillo. Se puede usar software para edición
web o simplemente un editor de texto cualquier, inclusive el bloc de notas.
Este tipo de página tienen las desventajas de las páginas estáticas y son poco recomendables.
Pueden ser hechas con muy pocos conocimientos, solo es necesario saber un poco de diseño
web para poder realizarlas.

Como herramientas de marketing y ventas son muy pobres y es muy poco lo que pueden
ofrecerle.

Páginas web corporativas

Una página web corporativa es un sitio online que pertenece a una determinada empresa o
institución, y donde sólo hay información sobre esa empresa o institución.

En este tipo de páginas se suelen mostrar los productos o servicios principales que se
proporcionan, pero no tienen ninguna opción para comprarlos a través de Internet.

Tiendas online

Una página web e-commerce (o tienda online) es un sitio en Internet en el que puedes
presentar tus productos físicos y que todo el que visite tu página pueda comprarlos.
Es igual que una tienda tradicional, sólo que en el mundo virtual.
La diferencia aquí es que los clientes pueden comprar directamente desde la comodidad de
sus casas (sin desplazarse), pagar por distintos métodos (como PayPal, transferencia
bancaria, contra reembolso), y hacerlo a cualquier hora del día.

Páginas web de servicios

Este tipo de página web es similar a la tienda online, sólo que en ella no se venden productos
físicos, sino servicios como asesoría legal, entrenamiento personal, coaching profesional,
servicios de traducciones, enseñanzas o tutorías, etc.

En una web de servicios se muestra quién es la persona que proporciona esos servicios, qué
certificados o experiencia tiene, los servicios que proporciona y en qué consisten cada uno,
y también se puede incluir un blog para hablar sobre distintos temas relacionados.

Portfolios o portafolios

Un portfolio es un muestrario de productos terminados, como por ejemplo un catálogo de

productos, una serie de fotografías, etc. Y una página web de este tipo es un sitio donde se
cuelgan las fotos de esos trabajos.

Los principales profesionales que usan estos tipos de páginas web son diseñadores gráficos,
fotógrafos, arquitectos, ingenieros, y profesionales de las artes, ya que sus trabajos se
aprecian mejor enseñándolos de forma visual que con palabras.

Blogs o páginas de contenido

Un blog es una página web en la que se publican artículos (llamados posts) de uno o varios
autores de forma cronológica, apareciendo el artículo más reciente en la primera página.

En cada artículo, los lectores pueden dejar sus comentarios con opiniones sobre el post, y el
autor les puedes responder para así establecer un diálogo. Gananci es un ejemplo de blog o
página web de contenido.

Foros

Un foro en Internet es un lugar virtual donde distintas personas se reúnen e intercambian

ideas y experiencias sobre distintos temas, conversando entre ellas.

En los foros hay 3 figuras principales: el administrador (se ocupa de gestionar el dominio,
las cuentas, el hosting), los moderadores (se encargan de supervisar los temas y mensajes que
se publican) y los usuarios o foreros, que publican sus opiniones.

Tienda virtual: estos permiten a sus usuarios comprar y vender cualquier tipo de productos.

Personal: estos sitios son administrados por una o muy pocas personas y contienen material
sobre cualquier temática.

Institucionales: estos sitios son confeccionados por alguna entidad, con o sin fines de lucro,
para darse a conocer, poner información propia y funcionan como un medio de contacto para
sus clientes o miembros. Además, en caso de que sea una empresa, sirve para promocionar
sus bienes y servicios.

Portal: este sitio funciona como punto de inicio para acceder a una intranet o cualquier otro
recurso de Internet.

Educativo: estos sitios ofrecen cursos a distancia o presenciales, ofrecen información y

contenidos descargables sobre distintas asignaturas y pueden estar orientados tanto a
profesores como a alumnos.

De descargas: por medio de estos sitios, los usuarios pueden subir y bajar contenido
electrónico como música, películas, videojuegos, fondos de pantallas, etcétera.

De desarrollo: en estos sitios se introduce información vinculada con los desarrollos en

diseño, web, software y todo lo que tenga que ver con el ámbito de la informática.

De comunidad virtual: por medio de estos sitios, personas que poseen los mismos intereses
e inquietudes pueden ponerse en contacto por medio de foros o chat.

Directorio: en estos se introduce información de diversas temáticas y se la organiza en

distintas categorías.
De información: como su nombre indica, los contenidos de estos sitios buscan informar a
quienes lo visitan pero esto necesariamente no se hace con fines económicos. Muchas veces
son de organizaciones educativas o pertenecen al gobierno.

Web 2.0: en este tipo de sitios se utilizan las últimas tecnologías y son sus usuarios los
encargados de mantenerla actualizada.

Wiki: en estos sitios, son los usuarios los que suben y editan los contenidos.

De subasta: en este los usuarios registrados pueden subastar todo tipo de productos y
servicios.

2. Clasificación de los sitios web:

Clasificación de los sitios web

Funcionalidad y características (Tipología/Nombre del sitio/URL/características)
Sitio por Audiencia:
Públicos: Es un WebSite normal, una página Nombre del sitio: itudesl
dirigida al público general, sin restricciones deTipología: Público
acceso en principio. URL: http://www.itudesl.com/
Características: ITUDE Es una empresa a la
vanguardia en la gestión de instalaciones y eventos
deportivos, animación, escuelas deportivos,
organización de viajes para grupos ... etc.
Extranet: Nombre del sitio: Banco General/Banca en línea
Función: Son Sitios limitados por el tipo de Tipología: Público
usuarios que pueden acceder, por ejemplo los URL: https://www.bgeneral.com/
proveedores de una empresa determinada, o los Características: La banca en línea es una
clientes. herramienta que las instituciones bancarias ponen a
Características: disposición de los usuarios con el fin de facilitar
-Permite hacer transacciones seguras entre los transacciones cotidianas.
sistemas internos de la empresa.
-Mediante aplicaciones de la extranet los
trabajadores de la empresa pueden obtener fácil
y rápidamente la información sobre los clientes,
proveedores y socios.
-Reducción de costos y ahorro temporal como
económico para la empresa.
-Totalmente basada en Internet.

Sitios por Dinamismo:

Interactivos: El usuario puede influir sobre el Nombre del sitio: Touchpianist
contenido del sitio que variará en función de cada Tipología: Interactivos
usuario y de los objetivos de éste. Normalmente, URL: http://touchpianist.com/
las páginas se generan cuando el usuario las Características: Una fantástica aplicación en la que,
solicita, personalizando la información que se le al tocar cualquier tecla, reproduce una nota (o
ofrece. conjunto de notas) de un piano. La idea es tocar
obras famosas de los clásicos preocupándonos
únicamente del tiempo, del ritmo, ya que las notas
se tocan de forma automática.

Estáticos: Los usuarios no pueden modificar o Nombre del sitio: Apyco

añadir nada al sitio, de cuyos contenidos Tipología: Estáticos
se encargan exclusivamente sus diseñadores. URL: http://www.apyco.com/
Características: Grupo Promotor Asesorías,
Proyectos y Construcciones S.A. de C.V. [Grupo
Promotor APYCO] es una empresa dedicada a la
construcción y servicios relacionados con
especialidad en obra pública.
Sitio por Objetivo:
Wiki: Nombre del sitio: Wikipedia
Función: Un sitio donde los usuarios editan Tipología: Wiki
colaborativamente (por ejemplo: Wikipedia). URL: https://www.wikipedia.org/
Características: Se trata de un tipo de página Características:
web que brinda la posibilidad de que multitud de Permite la creación colectiva de documentos en un
usuarios puedan editar sus contenidos a través del lenguaje simple de marcas utilizando un navegador
navegador web, con ciertas restricciones web. Generalmente, no se hacen revisiones previas
mínimas. De esta forma permite que múltiples antes de aceptar las modificaciones, y la mayoría de
autores puedan crear, modificar o eliminar los los wikis están abiertos.
contenidos. Se puede identificar a cada usuario
que realiza un cambio y recuperar los contenidos
modificados, volviendo a un estado anterior.
Estas características facilitan el trabajo en
colaboración así como la coordinación de
acciones e intercambio de información sin
necesidad de estar presentes físicamente ni
conectados de forma simultánea.
Educativo: Nombre del sitio: EDUC.AR
Función: promueven cursos presénciales y a Tipología: Educativo
distancia, información a profesores y URL: http://www.educ.ar/
estudiantes, permiten ver o descargar contenidos Características: Es el portal educativo gestionado
de asignaturas o temas. por el Ministerio de Educación de Argentina. Es
Características: muy amplio con numerosas noticias, documentos,
-Proporcionar información de todo tipo a debates y recursos educativos. Aunque está
profesores, estudiantes y padres, así como pensado para los docentes de dicho país, cualquier
instrumentos para realizar búsquedas en Internet. profesor encontrará materiales que podrá utilizar en
su docencia o en su autoformación.
-Facilitar recursos didácticos de todo tipo,
gratuitos y utilizables directamente desde
Internet, como:
- Materiales diversos para estudiantes: apuntes,
trabajos, exámenes.
- Diccionario, enciclopedia básica
- Atlas y mapas de todo el mundo
- Biografías
- Manuales
-Contribuir a la formación del profesorado,
mediante informaciones diversas y cursos de
actualización de conocimientos.
- Recopilación de experiencias educativas, buenas
prácticas, didáctica.

Portal Web: Nombre del sitio: Yahoo!

Función: un sitio web que proporciona un punto Tipología: Portal Web
de inicio, entrada o portal a otros recursos URL: https://espanol.yahoo.com/?p=us
en Internet o una intranet. Características:
Características: -Permite la búsqueda independiente de imágenes,
-Presentar un diseño agradable e interfaz de fácil vídeos, noticias y compras
uso. -Ofrece conceptos relacionados de las búsquedas
-Proveer un mecanismo de organización y de forma online (a modo de sugerencias)
búsqueda de información. - Está integrado con sistemas de microblogging
-Proveer un mecanismo de gestión y seguridad como Twitter.
adecuado. -Detecta el tipo de búsqueda y te ofrece búsquedas
-Permitir el acceso a una variedad de recursos en sobre ese tema en sitios relacionados. Por ejemplo,
línea. si buscas por el fc.
-Permitir personalizar la información que se
visualiza.

Comerciales: Nombre del sitio: Amazon Try Prime

Función: Están creados para promocionar los Tipología: Comerciales
negocios de una empresa. Su finalidad URL: https://www.amazon.com/
es económica. Su audiencia puede estar formada Características:
por clientes (actuales y potenciales), Precios exclusivos para empresas
inversores (actuales y potenciales), empleados Amazon Business ahora ofrece descuentos
(actuales y potenciales) e incluso la competencia exclusivos para empresas en millones de productos
y los medios de comunicación. en todo Amazon.
Características: Precios por volumen
-Mejorar o aumentar su presencia en el mercado. Ofrecemos descuentos por compras de varias
-Conocer y evaluar a sus clientes y posibles unidades, en millones de productos. Ahorras más
consumidores. cuando compras más.
-Mantenerse a la vanguardia de los cambios Compara ofertas
tecnológicos y tendencias innovadora
Mejorar y mantener constante comunicación con Satisface tus necesidades de suministro: Revisa
clientes y proveedores. múltiples ofertas de una gran variedad de
-Ofrecer una imagen de modernidad. vendedores en una sola página.
-Hacer eficiente su actividad operativa
disminuyendo los costos por llamadas telefónicas,
impresos innecesarios y costosos y sobre todo
optimizar el tiempo, que es un recurso cada día
más escaso.
Buscadores: Nombre del sitio: Google
Función: Un sitio que proporciona información Tipología: Buscadores
general y está pensado como entrada o URL: https://www.google.com/
búsqueda para otros sitios. Ejemplos Google, y Características: El buscador de Google consiste de
Yahoo! una serie de sitios web. El más grande de ellos, el
Características: sitio google.com, es la página web más visitada del
Los buscadores poseen enormes bases de datos mundo. Algunas de sus características incluyen un
que contienen información referente a páginas enlace que proporciona la definición para la
web. Estas bases de datos se generan por las altas mayoría de las búsquedas incluyendo palabras del
de usuarios que han creado sus páginas web (esto diccionario, el número de resultados que obtuvo en
equivaldría a poner tus datos en un listín su búsqueda, enlaces a otras.
telefónico).
Comunidad Virtual: Nombre del sitio: Blogger
Función: Un sitio donde las personas con Tipología: Comunidad Virtual
intereses similares se comunican con URL: https://www.blogger.com/about/?r=1-
otros, normalmente por chat o foros. Por ejemplo: null_user
MySpace. Sitio weblog (o blog): sitio usado Características:
para registrar lecturas online o para exponer -Creación de múltiples Blogs con un solo registro.
diarios online; puede incluir foros de discusión. -Adición de usuarios para que publiquen Entradas
Características: (posts) o administren el Blog.
-Permite una comunicación entre los usuarios o -Capacidad de almacenamiento de archivos de
estudiantes de forma sincrónica o asincrónica sin imágenes.
tomar en cuenta el tiempo ni el espacio. -Capacidad de almacenamiento de archivos de
-Se puede intercambiar información en distintos video.
formatos sean, imágenes, vídeos, documentos
pdf, texto, sonidos, entre otros.
-Las comunidades virtuales de aprendizaje están
conformadas por un grupo de usuarios interesados
en una misma temática.

Comercio Electrónico: Nombre del sitio: eBay

Función: para compra y venta de bienes, como Tipología: Comercio Electrónico
Ebay.com. URL: https://www.ebay.com/
Características: Características:
-Alcance global: la tecnología se extiende más -El mercado que abarca eBay es internacional, en
allá de los límites nacionales, alrededor de la muchos idiomas y muchos países.
tierra. Se habilita el comercio a través de los
 límites culturales y nacionales sin problemas ni - La variedad de artículos que puedes encontrar es
modificaciones. impresionante.
-Estándares universales: hay un conjunto de - Las ventas se pueden llevar a cabo ya sea con el
estándares de tecnología, a saber estándares de formato de subasta (el usuario comprador que
internet. ofrezca más se queda con el artículo), o con el
-Riqueza: es posible transmitir mensajes de video, tradicional formato del precio fijo.
audio y texto.

3. Anatomía de los sitios Web:

Contenedor

Esto es lo que definimos en la regla Body o en algún div de nuestra estructura. Dentro de este
contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

Este contenedor puede tener un ancho fijo; el ancho será igual para todos los navegadores y
dispositivos, o uno fluido que se adaptará al ancho de nuestra ventana. Si usamos web
responsive, podemos manejarlo con CSS sin problemas.

Logotipo

Acá es dónde debemos dejar la imagen de la empresa, que identificará la marca en todo el
sitio. Puede ser el logotipo de la empresa o el nombre. Al estar arriba acompañara la
navegación por todo el sitio ayudando al reconocimiento de la marca.
Navegación

Que importante es la navegación y el menú que la contiene. La forma más aceptada y fácil,
es el menú horizontal, que siempre tiene a mano lo más importante del sitio web.

Los menús verticales pueden usarse como complementos o sub menús, de los horizontales,
y siempre cerca de la línea horizontal del menú principal y deben ser visibles en el primer
pantallazo, al entrar.

Contenido

Lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo
e interesado. Si el contenido es malo o poco interesante, abandonará la página en pocos
segundos. Para eso, debe estar centralizado y enfocado y a la primera vista. El mejor lugar
debe ser para los contenidos. Para Google, el contenido es el rey.

Footer

Localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y
legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir
información de redes sociales, direcciones, noticias.

Espacio Negativo

Esto es tan importante como el espacio positivo. También llamado espacio blanco, es todo lo
que no tiene información de ningún tipo, pero que cumple un rol importantísimo para la web;
nos ayuda a tener espacios de respiración, a equilibrar y dar balance a todo el diseño. Si eres
novato, o tu cliente es ignorante en la materia, tratará de llenar esos espacios, con la
consiguiente saturación de contenidos, dejando una web ilegible e innavegable.

4. Organización de un Sitio Web:

Para hacer una buena presentación ideal es crearnos un boceto inicial de la estructura.
 Objetivos: Lo primero que debemos hacer es fijarnos los objetivos que queremos
alcanzar según la información que vayamos a aportar. Para crear nuestra primera
página, estos objetivos deberían no ser muy pretenciosos obtener un sentido
únicamente personal.
 Contenidos: Una vez que tenemos los objetivos, hay que organizar el contenido por
temas o secciones, Es conveniente que los temas sean razonablemente cortos y si
fuera necesario divida en subtemas. Constantino Centella R.
 Estructura: Un conjunto de páginas web es muy importante, ya que una buena
estructura permitirá al lector visualizar todos los contenidos de una manera fácil y
clara, mientras que un conjunto de páginas web con una mala estructura producirá en
el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y
terminará por abandonar nuestro sitio. No cree páginas que sean un callejón sin salida.
 Al menos cada página Web ha de tener un enlace por el cual se pueda continuar la
navegación Constantino Centella R.
 Menú es/Barras de Navegación: Para poder navegar por un Sitio es necesario que sus
páginas estén relacionadas. Para ello debemos crear una barra de navegación como la
que puedes visualizar arriba de estas líneas. Su función es permitirle al visitante
navegar por un mismo Sitio. Constantino Centella R.

5. La estructura de navegación:

La estructura de navegación por un sitio web viene definida por la experiencia de navegación
del visitante en virtud de la cual puede saltar de una página a otra dentro del sitio web
utilizando el sistema de hipervínculos.

Jerárquica. Estructura en árbol donde existe una página índice o principal desde donde se
accede al resto de páginas. Desde estas subpáginas se puede acceder a otras y así
sucesivamente creando distintos niveles o jerarquías. Es ideal para sitios web de centros o
proyectos. No se aconseja utilizar más de 4 niveles para evitar que el usuario se desoriente
durante la navegación. Conviene situar en todas las páginas un menú que permita moverse
de una forma fácil y directa por los distintos niveles y páginas de cada nivel.

• Lineal. Es una estructura muy simple similar a las páginas de un libro. Desde una página
concreta se puede ir a la página siguiente o la página anterior. Es especialmente útil si
deseamos que el usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras
páginas que pudieran distraerle. Ejemplo: Guía o tutorial de aprendizaje. No es recomendable
si el número de páginas encadenadas es muy elevado porque produce sensación de fatiga y
no permite retomar fácilmente la secuencia allí donde se abandonó en la última sesión.
• Lineal con jerarquía. Es una estructura híbrida que trata de aprovechar las ventajas de las
dos estructuras anteriores. Las páginas y subpáginas se organizan de forma jerárquica pero
también es posible navegar de forma lineal por las páginas de un mismo nivel. Los contenidos
web de este curso utilizan esta estructura.

• Red. A partir de la página índice o principal se puede navegar a otra u otras sin ningún
orden aparente. Es una estructura más libre pero no es aconsejable cuando el número de
páginas es elevado porque desorienta al usuario al no saber dónde está ni disponer de recursos
para ir donde desea.

6. Resumen
Sitio por Audiencia:
Públicos: Es un WebSite normal, una página dirigida al público general, sin restricciones de
acceso en principio.
Ejemplo
Nombre del sitio: Apyco
Tipología: Estáticos
URL: http://www.apyco.com/
Extranet: Son Sitios limitados por el tipo de usuarios que pueden acceder, por ejemplo los
proveedores de una empresa determinada, o los clientes.
Ejemplo:
Nombre del sitio: Banco General/Banca en línea
Tipología: Público
URL: https://www.bgeneral.com/
Sitios por Dinamismo:
Interactivos: El usuario puede influir sobre el contenido del sitio que variará en función de
cada usuario y de los objetivos de éste.
Ejemplo:
Nombre del sitio: Touchpianist
Tipología: Interactivos
URL: http://touchpianist.com/
Estáticos: Los usuarios no pueden modificar o añadir nada al sitio, de cuyos contenidos se
encargan exclusivamente sus diseñadores.
Ejemplo:
Nombre del sitio: Apyco
Tipología: Estáticos
URL: http://www.apyco.com/
Sitio por Objetivo:
Wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia).
Ejemplo:
Nombre del sitio: Wikipedia
Tipología: Wiki
URL: https://www.wikipedia.org/
Educativo: promueven cursos presénciales y a distancia, información a profesores y
estudiantes, permiten ver o descargar contenidos de asignaturas o temas.
Ejemplo:
Nombre del sitio: EDUC.AR
Tipología: Educativo
URL: http://www.educ.ar/
Portal Web:
Un sitio web que proporciona un punto de inicio, entrada o portal a otros recursos en Internet
o una intranet.
Ejemplo:
Nombre del sitio: Yahoo!
Tipología: Portal Web
URL: https://espanol.yahoo.com/?p=us
Comerciales:
Están creados para promocionar los negocios de una empresa. Su finalidad es económica. Su
audiencia puede estar formada por clientes (actuales y potenciales), inversores (actuales y
potenciales), empleados (actuales y potenciales) e incluso la competencia y los medios de
comunicación.
Ejemplo:
Nombre del sitio: Amazon Try Prime
Tipología: Comerciales
URL: https://www.amazon.com/
Buscadores:
Un sitio que proporciona información general y está pensado como entrada o búsqueda para
otros sitios. Ejemplos Google, y Yahoo!.
Ejemplo:
Nombre del sitio: Google
Tipología: Buscadores
URL: https://www.google.com/
Comunidad Virtual:
Un sitio donde las personas con intereses similares se comunican con otros, normalmente por
chat o foros. Por ejemplo: MySpace. Sitio weblog (o blog): sitio usado para registrar lecturas
online o para exponer diarios online; puede incluir foros de discusión.
Ejemplo:
Nombre del sitio: Blogger
Tipología: Comunidad Virtual
URL: https://www.blogger.com/about/?r=1-null_user
Comercio Electrónico:
para compra y venta de bienes, como Ebay.com.
Alcance global: la tecnología se extiende más allá de los límites nacionales, alrededor de la
tierra. Se habilita el comercio a través de los límites culturales y nacionales sin problemas ni
modificaciones.
Ejemplo:
Nombre del sitio: eBay
Tipología: Comercio Electrónico
URL: https://www.ebay.com/