revista html

CONCEPTOS
BÁSICOS
OBJETIVO:
Determina los elementos básicos que se debe tomar en cuenta
para la creación de sitios web

ESTRUCTURA BÁSICA DE HTML
Estructura básica. A continuación, viene la cabecera, delimitada
por < HEAD > y < /HEAD >.
Después, el comando < BODY >, que indica el comienzo del
cuerpo de la página.
Las instrucciones HTML se escribirán a continuación, y finalizarán
con < /BODY

ESTRUCTURA SEMÁNTICAL
El propio lenguaje HTML es una de las muchas tecnologías que se ha renovado con la
llegada de HTML5. Se han incorporado numerosas etiquetas que no estaban en versiones
anteriores del lenguaje de marcación, que podemos clasificar en función de su
utilidad o características.

ESTRUCTURA DE ARCHIVOS
Antes de iniciar el diseño de un sitio web es necesario
preparar su estructura de carpetas y archivos. Cuando
el número de ficheros es considerable, resulta muy útil
ubicarlos en carpetas para facilitar su localización y
edición. Existen múltiples posibilidades de organizar
el sistema de ficheros.
Con carácter general se proponen un modelo basado
en la organización por tipos de archivos.
Las páginas HTML se guardarán en el directorio o
carpeta principal mientras que los elementos que
utilizan (audios, vídeos, hojas de estilo, imágenes, etc)
se situarán en las subcarpetas correspondientes.
Esta organización está especialmente
pensada para un sistema de páginas
HTML que comparten recursos:
imágenes, hoja de estilo, JavaScript,
etc.
Las principales carpetas que utiliza
son:
• audios: archivos de audio
mp3.
• css: hojas de estilo css.
• descargas: archivos zip, exe,
etc. que se ofrecen para descarga.
• imágenes: imágenes jpg, gif o
png.
• pdf: documentos pdf.
• scripts: archivos js con código
java script reutilizable.
• swfs: archivos con animaciones
flash (*.swf).
• vídeos: ficheros en distintos
formatos de vídeo: *.wmv, *.flv
Cuando el número de páginas sobre
un tema es elevado se suele abrir una
subcarpeta dentro de la carpeta
principal. A este espacio se la suele
llamar micro sitió. Ejemplo: Sitio web
del Departamento de Física y Química
dentro del sitio web del Instituto. El
acceso por el navegador web a los
archivos HTML de esta subcarpeta
sera: http://www.misitio.es/nombre_-
subcarpeta/. La estructura de archivos
de esta subcarpeta puede ser similar a
la propuesta para la carpeta raíz:
audios, css, docs, imágenes, js, etc. o
bien tener una organización más
plana (sin carpetas) e incluso independiente
de los archivos de otras
carpetas.

SITIOS WEB
Cartel de la calle "WWW", en el colegio Parque
Científico Tecnológico de la Universidad de
Alcalá.
Un sitio web, portal o cyber sitio es una colección
de páginas web relacionadas y comunes a
un dominio de internet o subdominio en la
Word Wide Web dentro de Internet.12
Todos los sitios web públicamente accesibles
constituyen una gigantesca World Wide Web de
información; y un gigantesco entramado de
recursos de alcance mundial.
A las páginas de un sitio web se accede frecuentemente
a través de un URL raíz común llamado
portada, que normalmente reside en el mismo
servidor físico. Los URL organizan las páginas en
una jerarquía, aunque los hiperenlaces entre
ellas controlan más particularmente cómo el
lector percibe la estructura general y cómo el
tráfico web fluye entre las diferentes partes de
los sitios.
Algunos sitios web requieren una subscripción
para acceder a algunos o todos sus contenidos.
Ejemplos de sitios con subscripción incluyen
algunos sitios de noticias, sitios de juegos, foros,
servicios de correo electrónico basados en web,
sitios que proporcionan datos de bolsa de
valores e información económica en tiempo
real, etc.

CLASIFICACIÓN DE LOS SITIOS WEB
Existen muchas maneras de clasificar un sitio
web, cada uno de ellos poseen características
particulares, convirtiendo a la internet en una
gran autopista con lugares que se adapten a
las necesidades del visitante. Un sitio Web
puede clasificarse por audiencia, dinamismo,
apertura, profundidad o por objetivos.
Sitio por Audiencia:
• Públicos: Es un WebSite normal, una
página dirigida al público general, sin restricciones
de acceso en principio.
• Extranet: Son Sitios limitados por el
tipo de usuarios que pueden acceder, por
ejemplo, los proveedores de una empresa
determinada, o los clientes.
• Intranet: Son sitios cuyo acceso está
restringido a una empresa u organización,
normalmente funcionan dentro de redes
privadas, aunque no siempre es así.
Sitio 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. Normalmente, las páginas se generan
cuando el usuario las solicita, personalizando
la información que se le ofrece.
• Estáticos: Los usuarios no pueden
modificar o añadir nada al sitio, de cuyos
contenidos se encargan exclusivamente sus
diseñadores.
Sitio por Apertura:
• Estructura Abierta: Todos los documentos
disponen de su dirección y los usuarios
pueden acceder a cualquier punto del
WebSite.
• Estructura Cerrada: Limita el acceso a
unos pocos puntos de entrada (incluso a uno
sólo). Un ejemplo sería un sitio que requiere
un registro previo para entrar, el usuario
siempre tendría que pasar primero por el
registro antes de poder acceder al resto de la
página.
• Estructura Semicerrada: A medio
camino entre ambas, obliga a los usuarios a
acceder por unos puntos específicos, como
por ejemplo sólo la página principal y las
páginas de entrada a las secciones más
importantes.
Sitio por Profundidad:
•
• Basada en el número de enlaces que
hay que pulsar para llegar al contenido. En
general los usuarios prefieren sitios poco
profundos. Una buena regla a seguir es que el
usuario no tenga que pulsar más de 3 enlaces
para encontrar lo que busca.

Sitio por Objetivo:
• 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.
Podemos a su vez dividirlas en Corporativas (Informan sobre la empresa) y Promocionales (promocionan
productos).
• Buscadores: un sitio que proporciona información general y está pensado como entrada o
búsqueda para otros sitios. Ejemplos Google, y Yahoo!
• 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. Ejemplos: blogger,
Xanga.
• Comercio Electrónico: para compra y venta de bienes, como Ebay.com.
• Wiki: un sitio donde los usuarios editan colaborativamente (por ejemplo: Wikipedia).
• Educativo: promueven cursos presénciales y a distancia, información a profesores y estudiantes,
permiten ver o descargar contenidos de asignaturas o temas.
• Portal Web: un sitio web que proporciona un punto de inicio, entrada o portal a otros recursos
en Internet o una intranet

CONSTRUCCIÓN DE UN SITIO WEB
Antes de construir un sitio web, tómese el
tiempo necesario para analizar, planificar y
diseñar todo el sistema que da soporte al sitio
web. No sólo debe planificar el sitio web, sino el
sistema de contenido web que gestiona el sitio
web y la infraestructura necesaria para del sistema.
También tiene que definir de antemano los
roles y los usuarios implicados en la creación de
Los sitios Web requieren una combinación de
tecnologías que ayudan a crear las páginas web.
Vamos a examinar algunas de las tecnologías
que se utilizan para crear sitios web y su contribución
al diseño web. Como la mayoría de las
tecnologías están avanzando con las nuevas
versiones, vamos a discutir las características
básicas.
1. HTML: Hyper Text Markup Lenguaje o HTML
proporciona la base para la creación de páginas
web. Crea archivos de texto que son leídos por
los navegadores web. Los archivos HTML son
muy versátiles, ya que permiten la entrega de
archivos de imagen, contenido y campos de
formulario en línea para los usuarios. HTML
pueden ser creadas por la dirección el código
directamente en el Bloc de notas o con la ayuda
de los editores de HTML que se utilizan en gran
medida por los diseñadores. Algunos de los más
populares son los editores de HTML Dreamweaver
y Frontpage.
2. Photoshop: Si bien Photoshop es un software que se utiliza para edición de imágenes, es apropiado
mencionar aquí ya que la mayoría de las imágenes en línea son editadas con la ayuda de Photoshop.
Photoshop proporciona herramientas para manipular las imágenes de un sitio web y, a veces, los diseñadores
pueden incluso crear la base del diseño web en Photoshop y con la aprobación del cliente seguir
adelante y convertir a HTML.
3. Flash: Una forma interesante de interactividad de páginas web se crean con la ayuda de Flash. El uso
de Flash se ha empezado a utilizar ampliamente. La razón detrás de esto es bastante simple, el aumento
en la disponibilidad de ancho de banda de todo el mundo se ha traducido en la capacidad de los usuarios
para acceder a sitios web flash con bastante facilidad. Los archivos de Flash tienden a ser ligeramente
más pesados que los ordinarios archivos HTML, debido a que el código contiene elementos interactivos.

4. AJAX: AJAX es un nuevo operador en la interfaz del usuario y algunos de los principales sitios web
como Google lo utilizan para proporcionar a los usuarios un mayor nivel de interactividad y personalización
de sus opciones de visualización. AJAX proporciona a los usuarios una capacidad de la interfaz de
molde y sólo los puntos de la pantalla que necesitan.
5. CSS: Aunque el CSS no es una tecnología, vale la pena mencionar su ayuda, ya que crea la uniformidad
en todo el sitio web. Las Hojas de Estilo en Cascada o CSS permiten a los diseñadores crear las reglas
de la pantalla en un archivo central que luego se aplican a través de la página web. Un sitio web puede
tener más de un CSS. Algunas de las ventajas del uso de CSS en los archivos son el mantenimiento de
estilos de fuente y colores, la barra de navegación, pie de página y, a veces, incluso algunos de los gráficos
en el sitio web.
6. JavaScript: JavaScript tiene muy poco que ver con Java. JavaScript proporciona ciertos controles de
interfaz de usuario que puede hacer un sitio web más interesantes, así como añadir características de
uso fácil en el sitio web.
Ratón roll overs, Downs caída de navegación y validación de formularios web son algunos de los más
usos prácticos de JavaScript.
Hay muchas otras tecnologías de interfaz de usuario que pueden utilizarse por los diseñadores. Algunos
son bien conocidos y algunos podrían ser un nuevo camino rompiendo la tecnología. Las tecnologías
son las que son las más comunes y bien conocidas en la comunidad.

HTML5 SEMÁNTICA
Estas etiquetas semánticas del
HTML5 son un paso adelante en
cuanto a crear una web con un
contenido mejor formado, más
útil y procesable con mayor
facilidad por cualquier sistema
informático. Hoy puede que solo
nos interese como una manera
de optimizar los sitios para una
mejor indexación en buscadores,
pero sentarán las bases para
conseguir en el futuro un ecosistema
web más saludable.
De este modo, HTML5 tiene una
etiqueta HEADER, que debe
englobar aquellos elementos
correspondientes a la cabecera
de la página. Tiene un FOOTER,
que debe englobar todas las
etiquetas que componen el pie.
Luego, para el cuerpo realmente
no existe una etiqueta en
concreto, sino que se representará
por diversas otras como
SECTION, ARTICLE o ASIDE.
Existirán además otras etiquetas que representan elementos típicos como la barra de navegación,
etiqueta NAV.
Observando esas etiquetas semánticas estructurales, cualquier sistema podría procesar la página y
saber cómo está estructurada y a qué parte de las típicas de una web corresponde cada contenido.
Podrá saber qué contenidos se han colocado en la cabecera, elemento HEADER, cuáles son los
temas de los que se habla en una web, los ARTICLES, o cuáles son los enlaces a las secciones principales
del sitio, colocados en la etiqueta NAV.

Existe pues una forma lógica de colocar todos los contenidos dentro de un sitio y unas etiquetas
determinadas para contenerlos, atendiendo a la estructura que nosotros queremos comunicar a los
sistemas que puedan procesar el documento. La imagen que acompaña a este texto expresa una de
las posibles formas de ordenar el documento con las etiquetas que nos proporciona HTML5.
En la imagen se pueden ver las etiquetas estructurales más habituales, pero hay otras que podríamos
utilizar dentro de las etiquetas semánticas. Además, la posición de estos elementos no tiene por qué
ser así, incluso podrían anidarse de otras maneras. Quizás en nuestro sitio queramos colocar el navegador
en la cabecera, en el lateral derecho o dentro del SECTION. Sería independiente siempre que
utilicemos la etiqueta NAV para contenerlo. Asimismo, podrías tener más de un SECTION en el
cuerpo de la página, sueltos o colocados dentro de otras etiquetas como ASIDE. Esos SECTION
adicionales podrían tener otros ARTICLE o incluso, dentro de un SECTION, hacer otro esquema de
cabecera y pie anidando otros HEADER y FOOTER

CLASIFICA
CIÓN DE LOS
SITIOS WEB

POR SU AUDIENCIA
Públicos:
Dirigida al publico en general
EXTRANET:
Limitados por el tipo de usuarios que pueden
acceder

INTRANET:
Funcionan dentro de redes privadas,
aunque no siempre es así.
SITIO POR DINAMISMO
Interactivos:
El usuario puede influir sobre el contenido del
sitio
Estáticos:
Los usuarios no pueden modificar o
añadir nada al sitio.

SITIO POR APERTURA:
Estructura Abierta: Todos los documentos
disponen de su dirección
Estructura Cerrada: Limita el acceso a
unos pocos puntos de entrada (incluso a
uno sólo)
Estructura Semicerrada: A medio camino
entre ambas, obliga a los usuarios a acceder
por unos puntos específicos

SITIO POR PROFUNDIDAD
Basada en el número de enlaces que hay que pulsar para llegar al
contenido
SITIO POR OBJETIVO:
Comerciales: Están creados para promocionar
los negocios de una empresa.
Buscadores: un sitio que proporciona
información general y está pensado
como entrada o búsqueda para otros
sitios

Comunidad Virtual: un sitio donde
las personas con intereses similares
se comunican con otros,
Wiki: un sitio donde los usuarios
editan colaborativamente
Comercio Electrónico: para compra y
venta de bienes
Educativo: promueven cursos presénciales
y a distancia, información a profesores y
estudiantes, permiten ver o descargar
contenidos de asignaturas o temas.

Portal Web: un sitio web que proporciona un
punto de inicio
Conclusión:
Estos diferentes conceptos nos permiten conocer cada tema y saber de qué forma está
constituido y que parte lleva y cómo aplicarlo en tu futuro para crear un sitio web.