Instituto Tecnológico Superior

de Nochistlán

Ingeniería en Sistemas Computacionales

Interfaces Web
Tarea:
““Investigación 1 Introducción al diseño
web”
Presenta:
Cristian Lozano María
17050200
Docente:
Jesús Damián López
Nochistlán de Mejía, Zacatecas. Mayo de 2020
I
Índice

Introducción ...................................................................................................................................III

Conceptos de Diseño Web .............................................................................................................. IV

Herramientas para desarrollo Web ................................................................................................... V
Interfaces graficas ........................................................................................................................... X
Componentes de una interfaz web ...................................................................................................XI
Cabecera o header........................................................................................................................XI
Cuerpo de la página ....................................................................................................................XII
Pie de página o footer ..................................................................................................................XII
Otros elementos ..........................................................................................................................XII
Tipos de sitios web ........................................................................................................................XIII
Sitios webs tipo Blog .................................................................................................................XIII
Sitios Web para el Comercio Electrónico .................................................................................XIII
Sitios Web para una comunidad Virtual ......................................................................................XIII
Sitios Web de desarrollo ...........................................................................................................XIII
Sitio Web de descargas ............................................................................................................. XIV
Sitios Web dinámicos ................................................................................................................. XIV
Sitio Web Educativos ................................................................................................................ XIV
Sitios Web Estadísticos............................................................................................................. XIV
Sitios web Informativos ........................................................................................................... XIV
Sitios Web Institucionales ......................................................................................................... XV
Sitios Web Personal ................................................................................................................... XV
Sitios web Públicos .................................................................................................................... XV
Sitios Web de Subasta................................................................................................................ XV
Formas de Navegabilidad ................................................................................................................ XV
La estructura del sitio............................................................................................................... XVI
Localización .............................................................................................................................. XVI
Contexto ................................................................................................................................... XVII
Prioridad de contenido: ............................................................................................................. XVII

I
 HTML Y Esttructura .................................................................................................................. XVIII
Ejemplos de Aplicación páginas Web .............................................................................................. XX
Ejemplo de interfaz Web .............................................................................................................. XXI
Documento HTML y su estructura .............................................................................................. XXII

Conclusión ................................................................................................................................. XXIX

Referencias................................................................................................................................... XXIX

II
Introducción
Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de archivos
(texto, imágenes, audio) que se presentan de forma estructurada mediante un lenguaje de marcado
llamado HTML.

Así, las webs funcionan como sistemas de distribución y recuperación de documentos

basados en el hipertexto.

Estos archivos y documentos se encuentran en los servidores web que son en realidad
computadoras especialmente adaptadas y conectadas de forma permanente a Internet.

Los buscadores realizan un seguimiento de los enlaces que apuntan hacia estos archivos
mediante el protocolo HTTP y el lenguaje de marcado de hipertexto HTML organiza y
estructura la información para los navegadores. A su vez, las hojas de estilo CSS indican
cómo se mostrará esta información en los diferentes dispositivos (computadoras, tablets,
móviles). Esta metodología beneficia mucho la accesibilidad del documento.

La ventaja del HTML es que nos permite presentar diferentes tipos de archivo de forma
simultánea (texto, gráficos, vídeo) creando enlaces o hipervínculos entre ellos o hacia otras
páginas web ubicadas en cualquier lugar del mundo.

Este procedimiento aparentemente sencillo con el que estamos tan familiarizados, implica
una gran complejidad y la intervención de diferentes tipos de procesos.

En esta investigación se redactan algunos de los puntos más importantes sobre las
interfaces graficas páginas web, esto con el objetivo de fomentar el enriquecimiento sobre
el tema.

III
Conceptos de Diseño Web
1. Arquitectura web: es la ordenación de todas las secciones, páginas y contenidos de toda
la página. Se basa en montar un sistema coherente con todas las páginas interiores y
como se navega entre páginas. Por ejemplo, en la portada de www.taovisual.com
tenemos acceso a los servicios, de los servicios tenemos acceso al formulario. Muchas
webs tienen la sección Mapa web que es una parte de la arquitectura web donde se
marcan todas las páginas que hay y la dependencia entre ellas. Ej . Servicios > Páginas
web.

2. Estructura: es el conjunto de formas que vemos en la pantalla para transmitir la

idea o concepto de la web. En definitiva, es el diseño. Si tiene un diseño muy
minimalista normalmente la estructura será simple. Por repetición, una
estructura muy utilizada donde los usuarios se encuentran cómodo es tener
arriba a la izquierda el logo, arriba a la derecha el menú de navegación y luego
el contenido.

3. Usabilidad: es la facilidad que tiene el usuario para navegar por la página. Es el

arte de que el usuario encuentre fácilmente lo que busca. El ejemplo del logo
arriba a la izquierda (por donde empezamos a leer) hace que el usuario sea la
primera impresión que tiene de la página y ya se sitúe. Encontrar luego el menú
de navegación le ayudará a saber que cosas puede hacer. Cuando el usuario se
pierde dentro de una página web y no sabe ni donde está ni como ir a otro sitio,
eso significa que la usabilidad de la página no es muy correcta.

4. Plantilla web: La plantilla es la estructura gráfica que tiene una página web. Los
gestores de contenido utilizan plantillas para presentar los contenidos de una
forma o de otra. Las plantillas se pueden comprar y solo hace falta rellenar con
contenido lo que te ofrece la plantilla. Tambiés se les llama temas. Y una plantilla
define que va en cada sitio (logo, imágenes, textos) que estructura tiene ( 2
columnas, 3 columnas, etc.) y que estilos tiene (texto justificado, en negrita, con
sombras, etc.).

IV
 5. Header: Es la cabecera de la página web. Igual que en los documentos en papel,
las páginas normalmente tienen una cabecera igual en todas las páginas. En esta
cabecera los elementos casi obligados son el logo para que el usuario sepa
quienes somos, el menú para navegar y las banderas si la página tiene varios
idiomas. Opcionalmente podemos poner algún lema o datos de contacto, para
evitar que se tenga que cargar toda la página para encontrar el teléfono.

6. Footer: El pié de página. Es otro espacio que se repite en todas las páginas, en
este caso debajo de todo. Se puede utilizar para varias cosas pero básicamente
para darle más opciones al usuario. Podemos encontrar menús de navegación
para que el usuario después de consumir un contenido pueda encontrar otros.
Muchas veces también ponemos datos de contacto para que una vez convencido
el cliente pueda contactar con nosotros. Por obligación de la Ley de Servicios de
la Sociedad de la Información, más conocida como LSSI también se introduce un
link a las Condiciones de uso de esta página web.

7. Responsive: La traducción literal seria Adaptativo y se refiere a que la página

web se adapte a cualquier dispositivo. Antiguamente las páginas web sólo las
podías consultar desde ordenadores. Actualmente la misma página web se
puede abrir desde un ordenador, un smart TV, un móvil, una tablet y siguen
saliendo nuevos dispositivos. No es lo mismo presentar una información en una
TV que se puede ver tranquilamente en 4 columnas, que en un teléfono móvil
en el que solo vemos una columna. Programar de forma que la página web se
«adapte» al dispositivo se llama Responsive. (Anonimo, 2016)

Herramientas para desarrollo Web

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras
para la programación, y para la depuración. Todas las herramientas que usemos son muy
importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos
elegir la más adecuada a nuestras necesidades y capacidades.

V
Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es
lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que
dispone el Sistema Operativo y sus costes.

Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras,
como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux,
con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos también están disponibles
en Windows).

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al
desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque
Windows no fue diseñado para los desarrolladores, sino para personas que no tienen
muchos conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por
lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida
mucho más fácil, que además son libres.

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que
forman el ciclo de vida de un desarrollo web.

 Diseño:

VI
 el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como
Photoshop, GIMP o Inkscape.

 Maquetación HTML/CSS:

la maquetación consiste en convertir los esbozos creados en la fase anterior en

plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la
fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos
herramientas como Photoshop o no.

 Programación cliente:

la programación cliente consiste básicamente en Javascript. Una web puede no tener

necesidad de hacer programación cliente, como puede ser una pequeña web corporativa
con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como
ocurre con los proyectos Web 2.0.

 Programación servidor:

En esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un
lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

 Depuración:

esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias,
aserciones, trazas, etc.

 Pruebas en local:

en nuestro servidor local haremos todas las pruebas posibles.

 Subir ficheros al hosting:

una vez nuestra web esté completada y bien testeada en nuestro servidor local (desarrollo),
la subiremos al servidor del hosting elegido (producción). Dependiendo del hosting,
podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo usar Subversion
si así lo permite el servidor, por su comodidad y rapidez, además de por su principal utilidad,
que es la de control de versiones.

 Pruebas en hosting:

VII
 realizaremos las últimas pruebas en el servidor del hosting para comprobar que el cambio
de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener
exactamente la misma configuración que el servidor del hosting.

Herramientas: desarrollo en PHP

A continuación enumeraré las herramientas básicas para el desarrollo de una web en PHP,
en sus diferentes fases de diseño e implementación.

Fases: diseño y maquetación

 Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el más caro, aunque
es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que
poder contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes
que usemos en la maquetación.

 GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible
conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual
que en Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML.
También disponible en Windows

Fase: maquetación

 Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico

vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y
sencilla, incluso para aquellos que no tengan demasiados conocimientos en edición gráfica
digital.

 Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la
oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que
su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita
como es Inkscape.

Fases: maquetación, programación cliente

 Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior artículo sobre
los principales editores web del mercado, así que os remito a él para más información. Con
ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más
profesional para la programación cliente (Javascript).

VIII
 Fase: programación servidor

 Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es
comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es.
Además es posible descargarlo desde la web de Zend para probarlo durante 30 días.

Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente
cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo
para Apache que permite depurar una web directamente en el navegador (Internet Explorer
o Firefox), además de otras funciones más complejas, como alertas configurables para que
nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un
tiempo determinado de ejecución, por ejemplo.

Fase: prueba local

 Apache Instalar un servidor web Apache en la máquina donde desarrollamos es

fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP,
vamos al navegador, actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

 Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor herramienta
creada en los últimos tiempos para los desarrolladores web, y con Firefox sus dos
extensiones más útiles para nuestra profesión: Firebug y Web Developer.

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver
los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las
imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos
ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar
el tamaño del navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo,
deberemos subirlo al servidor del hosting.

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que
desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver

IX
 y Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en
configurar el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que
tener muy en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos
resulte más fácil de usar, la más económica, la que mejor conozcamos, etc. (Perez, 2007)

Interfaces graficas
Las GUI o interfaces gráficas son un programa informático que realiza la función de interfaz
de usuario. Está formado por imágenes y objetos gráficos, que representan la información
y acciones que se encuentran en la interfaz. Su objetivo es el de crear un entorno visual fácil
de usar para que fluya la comunicación son el sistema operativo.

Lo más común es que las acciones sean de manipulación directa, para simplificar la
interacción y mejorar la comunicación entre usuario y sistema operativo. Algunas
GUI de ejemplo son los entornos de escritorio de Windows, el X-Window de
GNU/Linux o el Aqua, de Mac OS X.

En el proceso de creación de interfaces gráficas de usuarios el desarrollador de

aplicaciones multiplataforma es el encargado de crearlas. (Anonimo, fp.uoc, 2017)

En definitiva, la interfaz web es el conjunto gráfico que permite la presentación y la

navegación del sitio.

Esto se consigue con la inclusión de elementos comunes a toda la web que son
estándares, haciendo que los usuarios tengan completo control sobre las
funcionalidades del sitio desde el momento mismo de entrar a él sin que para ello
deba tener amplios conocimientos ni preparación anterior alguna.

Una página web puede contar con los mejores contenidos en el género que se
desarrolla, pero indefectiblemente fracasará si su interfaz no permite un rápido y
cómodo acceso a los mismos por parte de los usuarios.

X
Componentes de una interfaz web

En prácticamente todas las páginas web hay elementos que son comunes. Algunos ejemplos
son: la cabecera, el menú de navegación, el cuerpo o el pie de página. Conocer el nombre
de cada una de las partes de un sitio web es esencial ya que forma parte del vocabulario
utilizado por los desarrolladores y diseñadores. La siguiente figura muestra la estructura
general de un sitio web.

Cabecera o header
La cabecera o header es la zona de la interfaz web situada en la parte superior y que sirve
para identificar la empresa o marca. Normalmente se utiliza para mostrar el logotipo de la
empresa o su nombre. Además, este espacio da cabida a textos descriptivos, imágenes,
paneles de acceso o banners publicitarios, entre otras cosas. Aunque la cabecera no es
obligatoria, es utilizada en prácticamente todos los desarrollos de sitios web.

XI
Debido a nuestra lectura visual, de arriba a abajo y de izquierda a derecha, el primer
elemento que vemos en toda interfaz web es la parte superior izquierda de la página. Por
este motivo, no es de extrañar que se aproveche este espacio para posicionar el logotipo y
el nombre de la marca.

Cuerpo de la página
El cuerpo de la página es donde se muestran los contenidos. Puede verse
acompañado de uno o varios sidebars (o menús laterales de navegación). Se sitúa
bajo de la cabecera o header o bajo del navbar (o menú de navegación principal).
Generalmente, el cuerpo de la página cuenta con un título descriptivo. Todos los
elementos del cuerpo de página deben seguir la guía de estilo del resto de la web.
Pie de página o footer
El pie de página o footer se sitúa en la parte inferior de una interfaz web, bajo el
cuerpo de la página. Generalmente, suele utilizarse para para mostrar enlaces a
servicios, formulario de contacto, banners publicitarios, políticas de privacidad
y cookies, entre otras cosas.
Otros elementos
 Menú de navegación o navbar
 Sidebar
 Carrusel o Slider
 Action bar
 Anuncio, Banner o Ad
 Ventana popup
 Tooltip
 Pestañas o Tab
 Formulario de contacto o Contact form
 Barras de progreso o Progress bars
 Menú hamburguesa o Togle
 etc.

XII
Tipos de sitios web
Los sitios web son aquellos espacios virtuales al cual una persona puede acceder a través
de internet poniendo en el buscador una dirección para tener acceso a la misma. Para eso
es necesario que se alije en un dominio y hosting la página en cuestión y que a través de un
programa como wordpress, por ejemplo, pueda alojar el contenido que se requiera.

Normalmente se insertan en este tipo de sitios archivos de tipo html, que es un tipo
de lenguaje de programación. Se insertan también otro tipo de archivos como son
textos, imágenes, video, audio; entre otros. Todos ellos se comparten en línea como
contenido que determinados usuarios de acuerdo a sus intereses particulares
tendrán acceso o no a dicha página.
Sitios webs tipo Blog
La naturaleza de este tipo de blog es que resulta ser muy dinámica en la disposición
del contenido y se espera en ello que exista una alta interacción entre el creador del
blog y sus posibles lectores. Normalmente se manejan en este tipo de sitios
contenido en su mayoría de tipo textual en el que de acuerdo al formato de la propia
página, se puede hacer en tiempo real comentarios de otras personas.

Sitios Web para el Comercio Electrónico

Sitios web para el comercio electrónico Funcionan como una especie de foro ya que
la página está diseñada para tal fin. En ella se espera que el visitante se sienta atraído
por cierta información de un producto o servicio que precisamente la empresa
determinada ofrece a través de este tipo de sitio web. Dentro de dicha página
existen botones que le permiten al usuario comprar y pagar el producto o servicio
requerido.

Sitios Web para una comunidad Virtual

Es un sitio web tipo chat y/o foro en el que diversos usuarios se inscriben para poder
conversar entre sí de acuerdo a un tema o interés en específico. Dicha página debe
tratar de ese tema en particular, por ejemplo, la afición a la carrera de autos. En ese
sitio se va a conversar, se entiende, sobre ese tema entre los miembros del chat.
Sitios Web de desarrollo
Un lenguaje de programación para poder avanzar en la tarea del diseño de un sitio
web particular. Esto está inserto en un área informática. Los desarrolladores de sitios
web usan con demasiada frecuencia en su trabajo este tipo de herramientas.

XIII
 Sitio Web de descargas
Son sitios web que se conocen como repositorio de archivos que potenciales
usuarios pueden descargar de manera legal como serían archivos en pdf, audios,
videos, imágenes; entre otro tipo de archivos. Para ello deberá existir claramente
una legalidad en el manejo de ese contenido respectando los derechos de autor y
propiedad de ese contenido.

Sitios Web dinámicos

Son sitios web que se conocen como repositorio de archivos que potenciales
usuarios pueden descargar de manera legal como serían archivos en pdf, audios,
videos, imágenes; entre otro tipo de archivos. Para ello deberá existir claramente
una legalidad en el manejo de ese contenido respectando los derechos de autor y
propiedad de ese contenido. Hablamos de las redes sociales
Sitio Web de Directorio
La función principal de este tipo de directorios es el de ofrecer al visitante una serie
de enlaces que se agrupan en diferentes temáticas para que al darle click al de su
interés lo lleve a la subpágina en particular y pueda satisfacer sus necesidades de
información básica. Un ejemplo de ello puede ser la conocida sección amarilla ya
digitalizada.

Sitio Web Educativos

Este tipo de sitios web no se centra solamente en proveer contenido de tipo
educativo sino incluso ofrecer cursos en la modalidad virtual para los interesados en
aprender y/u obtener un certificado. Es decir, son sitios que funcionan como
repositorio de contenido educativo y una forma de asistir a clases virtuales ya
grabadas o en vivo accediendo a través de una clave de acceso.
Sitios Web Estadísticos
Nos encontramos ante sitios que por su propio componente se muestran en su
estructura, presentación y/o contenido, en un formato estático. En la actualidad es
poco común el uso de este tipo de sitios ya que estamos inmersos en una
interconectividad en tiempo real de manera masiva por lo que se hace poco
atractivo este tipo de portales web.
Sitios web Informativos
El objetivo central de este tipo de sitios es el de proveer de datos e información que
requiere el internauta sobre un tema en particular. Estas pueden ser de carácter
institucional, educativo o comercial. La naturaleza de este tipo de información en

XIV
 relación al manejo de la misma está deslindada de cualquier transacción monetaria,
es decir, no se vende al menos que se indique lo contrario y acepte el visitante.

Sitios Web Institucionales

Este tipo de sitio web en la mayoría de los casos se diseña y suben a la red con la
finalidad de que las personas que tengan acceso a ellas, conozcan los datos de
contacto y/o comunicación en determinadas instituciones, así como que tengan la
oportunidad de conocer entre otras cosas, la misión, visión y objetivos de dicha
institución.
Sitios Web Personal
Cumplen en cierto modo el mismo objetivo que los sitios web institucionales, es
decir, se busca ofrecer datos importantes de la persona así como datos de contacto.
También se busca respaldar el trabajo de branding o marca personal. Generalmente
los dominios están configurados con el nombre de la persona. En el mismo sitio web
se inserta un subdominio que resulta ser el blog de la misma persona.

Sitios web Públicos

Como su nombre lo indica, se trata de aquellas web de carácter público que
ofrecen información correspondiente al giro del propio sitio que representa a
determinada institución o necesidad de información, por ejemplo, sitios en los que
una persona requiere de consultar datos de identidad de una persona. O revisar
datos de carácter demográfico de un país.

Sitios Web de Subasta

Este tipo de sitios tienen un fin comercial y es el de ser un tipo de repositorio en
donde existen diferentes productos y/o servicios que los visitantes están dispuestos
a subastar para adquirir dicho bien. Uno de los sitios más conocidos es el llamado
Ebay. Existen muchos más aunque este resulta ser el más popular. Día con día van
desarrollándose nuevos sitios buscando especializarse en objetos.
(Anonimo, 10Tipos, 2017)

Formas de Navegabilidad
Podríamos definir la navegabilidad de un sitio web como aquellas propiedades de la
interactividad del sitio que permiten que el usuario del mismo sea capaz de moverse por su
estructura e identificar las diferentes secciones y contenidos de una forma sencilla y
efectiva y sin perderse en él. La buena navegabilidad de un sitio, es en muchos casos un
factor clave en su éxito y aceptación por parte de los usuarios. Al diseñar tu sitio web, no te
XV
cieges en trabajar solo su aspecto gráfico y sus características visuales, ¡¡claro que son
importantes!!, por supuesto, pero tienes que tener en cuenta, que por muy trabajada que
este tu web visualmente, si no consigues que el visitante de tu sitio pueda moverse por ella
fácilmente y encontrar en todo momento lo que busca, será muy complicado que tenga
éxito. La navegabilidad de una web está determinada principalmente por 4 elementos:

La estructura del sitio

Es decir, la organización interna del mismo, como está organizado el sitio web y
como se reparten los contenidos bien agrupados en niveles de importancia, en
secciones y subsecciones y siempre con coherencia y bien relacionados. Una
estructura bien definida muestra es la forma de lograr una correcta clasificación del
contenido de tu web para facilitar que los visitantes puedan encontrar rápidamente
lo que buscan sin tener que dar vueltas ni acceder a páginas que no son de su interés.
Localización
La localización, sobre todo cuando estamos tratando con sitios web extensos es un
factor esencial para el buen funcionamiento de nuestro sitio web. El usuario del sitio,
debe saber en todo momento en que lugar del sitio web se encuentra,
independientemente del nivel de profundidad de la web en el que esté. Una buena
localización generará comodidad en el usuario y seguridad en su desplazamiento por
el sitio web. Una de las técnicas más utilizadas para mejorar la localización de un
usuario en nuestro sitio web es indicar en qué lugar de la estructura se encuentra,
ya sea una sección o subsección, mediante el uso de una zona de localización:

Ej: En la imagen podemos ver como que al colocar una referencia a la localización en la que nos encontramos,
en todo momento el usuario sabrá en que apartado de nuestro sitio al mismo tiempo que facilitamos su
navegación.

XVI
 Contexto
El contexto tanto de la información escrita como de la visual guiará en todo
momento al visitante de su tu sitio web. Las interfaces de un website deben proveer
a los internautas de suficientes referencias explícitas que ayuden a diferenciar una
sección de otra. T odas las secciones de una página web deben ofrecer un contexto
específico de la sección a la que pertenecen y uno común al sitio web. El contexto
será la principal cualidad de navegación en la que se apoyará la identidad de un sitio
web y contribuirá en gran medida a otorgarle estilo propio y personalidad. Por
supuesto la información escrita, deberá tener relación con el nombre del apartado
o subapartado del sitio web en el que nos encontremos, pero la asociación del

Usuario del sitio con el lugar o rama de contenidos en la que se encuentra, vendrá
determinada en gran parte por el contexto. Imágenes relacionadas con el contenido
de cada sección, un código de colores utilizado para cada bloque de contenidos,
elementos comunes para cada bloque ... conformarán el contexto del sitio y
ayudaran enormemente al usuario a navegar con orden y sentido común por
nuestro sitio.

Prioridad de contenido:
La navegabilidad también está condicionada en gran medida por la correcta
jerarquización de los contenidos del sitio. Es evidente que una sección debe de estar
claramente diferenciada de otra, pero igual o tal importante será que podamos
diferenciar y transmitir al usuario con claridad los distintos niveles de importancia
en un contenido determinado y resaltar los contenidos específicos que se desean
promocionar (sobre todo cuanto nos referimos a una web comercial o de empresa).
Cuando somos capaces de transmitir a los usuarios del sitio la relevancia de un
contenido sobre otro conseguiremos inducirlos a visitar primero la información en
la que más nos interesa que se fijen, les alertaremos de los más o menos importante
y estaremos indicándoles los niveles de subordinación en la estructura de la
información. (Anonimo, s.f.)

XVII
HTML Y Esttructura
HTML no es un lenguaje de programación, esto debes tenerlo muy en claro desde el
principio, HTML es un lenguaje de marcado de hipertexto o “HyperText Markup Language”
por el desarrollo de sus iniciales en inglés, básicamente este lenguaje se escribe en su
totalidad con elementos, estos elementos están constituidos por etiquetas, contenido y
atributos, que explicaremos de una manera más detallada en algunas líneas más abajo.
HTML es un lenguaje que interpreta el navegador web para mostrar los sitios o aplicaciones
web tal y como estamos acostumbrados. En la Imagen 1 verás cómo el navegador nos
muestra un sitio web y en la Imagen 2 verás cómo se ve en lenguaje HTML.

La primera versión de HTML fue publicada por un científico de la computación

británico llamado Timohty John Berners-Lee en 1991 y contenía inicialmente pocos
elementos, los cuales puedes conocer aquí. Sobre Tim, debes saber también que es
conocido como el padre de la web, es fundador de la W3C (World Wide Web
Consortium), creador del protocolo HTTP (HyperText Transfer Protocol), creador de
la URL (Uniform Resource Locator) y creador del primer navegador web.
Sobre la historia de HTML, en 1995 se publicó el estándar HTML 2.0, el primer
estándar oficial de HTML. En 1997 se publicó la versión HTML 3.2 y es la primera
especificación HTML publicada por la W3C.

XVIII
 En 1999 se publicó la versión HTML 4.1 y en el 2014 se publica la versión definitiva
de HTML 5.
HTML es un lenguaje formado por elementos, un elemento se ve como todo el texto
que se muestra en la Imagen 3, los elementos nos ayudan a estructurar y dar
significado a las partes de un documento HTML, estos elementos a su vez están
conformados por contenido, etiquetas y atributos.
Las etiquetas nos sirven para delimitar el inicio y el fin de un elemento, como en el
ejemplo, vemos un elemento que utiliza la etiqueta de apertura
Para indicar el inicio de un párrafo, y la etiqueta de cierre
Para indicar el fin de un párrafo.
El contenido de un elemento pueden ser caracteres, comentarios u otro elemento
delimitado dentro de las etiquetas de inicio y de cierre, en el ejemplo pueden ver
que el contenido es: “Contenido del elemento p”.
Sobre los atributos de un elemento debes saber que siempre se expresan en la
etiqueta de inicio y tienen un nombre (Ej. id) y un valor (Ej. parrafo), en el ejemplo
vemos el uso del atributo id con su respectivo valor.

Ten en cuenta que no todos los elementos poseen etiquetas de cierre.

(Reyes, s.f.)

XIX
Ejemplos de Aplicación páginas Web
1. Google Docs: esta es una excelente aplicación puesto que a través de ella se pueden
guardar documentos bien sea en tu ordenador o cuenta de google drive. También los
puedes imprimir o simplemente compartir con tus amigos.

2. com: la aplicación de Pixlr es ideal para la edición de fotografías puesto que fue
creada por la inspiración del famoso programa de edición de fotos Adobe
Photoshop es muy fácil de captar gracias al diseño que tienen sus fotos y la buena
estructura de su programa.

3. io: si te estas iniciando en el mundo de las aplicaciones esta es la aplicación

perfecta ya que es la herramienta que te ayudara a probar los códigos y escoger
lo que realmente te sirvan.

4. Evernote: con esta aplicación puedes organizarte de una manera muy sencilla ya
que solo tendrás que usar sus post –it para navegar de una forma fácil.

5. Netflix: gracias a esta aplicación los usuarios pueden seguir las series de películas
que ellos quieran puesto que no cuenta con una limitación de horario puesto
que puedes verlas en el horario que desees. Esta aplicación web funciona de
manera muy fácil solo tienes que acceder a la aplicación o la página web e
introducir las credenciales de usuario y buscar seguidamente el nombre de la
película que deseas mirar.

XX
 6.

Atreves de una interfaz gráfica es poblé que los sitios web que todo el mundo utiliza puedan
ser utilizados por la mayoría de usuarios, estos sitios esta construidos con texto, imágenes,
y contenido multimedia en su mayoría en condigo HTML.
Cualquier página nos puede mostrar el claro ejemplo de una intefaz grafica web, ya que
todas contienen una:

Ejemplo de interfaz Web

YouTube puede ser ese claro ejemplo que describa totalmente una interfaz web, esta construida
con texto, imágenes, un fondo blanco que inspira tranquilidad y principalmente en su contenido
rico en videos.

XXI
Lo que nos hace una interfaz más bonita es justamente el acomodo y los elementos que
introduzcamos en ella.

Documento HTML y su estructura

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la
estructura de tu contenido. HTML consiste en una serie de elementos que usarás para
encerrar diferentes partes del contenido para que se vean o comporten de una determinada
manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un
hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra,
etc. Por ejemplo, tomemos la siguiente línea de contenido:

Si queremos especificar que se trata de un párrafo, podríamos encerrar el texto con la

etiqueta de párrafo (<p>) :

Anatomía de un elemento HTML

Exploremos este párrafo en mayor profundidad.

Las partes principales de nuestro elemento son:

1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o
empieza a tener efecto el elemento — en este caso, dónde es el comienzo del párrafo.

XXII
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento
— en este caso dónde termina el párrafo.
3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido
equivale al elemento.
Los elementos pueden también tener atributos, que se ven así

Los atributos contienen información adicional acerca del elemento, la cual no quieres que
aparezca en el contenido real del elemento. En este caso, el atributo class permite darle al
elemento un nombre identificativo, que puede ser usado luego para apuntarle al elemento
información de estilo y demás cosas.

Un atributo debe tener siempre:

1. Un espacio entre éste y el nombre del elemento (o del atributo previo, si el elemento
ya posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (=).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.
Anidando elementos
Puedes también colocar elementos dentro de otros elementos — esto se llama
anidamiento. Si, por ejemplo, queremos resaltar una palabra del texto (en nuestro ejemplo
la palabra "muy"), podemos encerrarla en un elemento <strong>, que significa que dicha
palabra debe ser enfatizada:

Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo,
creamos la etiqueta de apertura del elemento <p> primero, luego la de <strong>, por lo
tanto, debemos cerrar ésta etiqueta primero, y luego la de <p>. Esto es incorrecto:

XXIII
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren
claramente dentro o fuera el uno del otro. Si éstos se encuentran solapados, el navegador
web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados
inesperados. Así que, ¡no lo hagas!
Elementos vacíos
Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por
ejemplo, el elemento <img> de nuestro HTML:

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es
porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es
desplegar una imagen en la página HTML, en el lugar en que aparece.
Anatomía de un documento HTML
Hasta ahora vimos lo básico de elementos HTML individuales, pero éstos no son muy útiles
por sí solos. Ahora veremos cómo los elementos individuales son combinados para formar
una página HTML entera. Revisitemos el código de nuestro ejemplo en index.html (que
vimos por primera vez en el artículo Manejando Archivos):

Tenemos:
• <!DOCTYPE html> — el tipo de documento. Anteriormente, cuando HTML era joven
(cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas
que el código HTML de la página debía seguir para ser considerado bueno, lo que podía
significar el chequeo automático de errores y algunas otras cosas de utilidad. Sin embargo,

XXIV
hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser
incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas
saber.
• <html></html> — el elemento <html>. Este elemento encierra todo el contenido de
la página entera, y, a veces, se le conoce como el elemento raíz (root element).
• <head></head> — el elemento <head>. Este elemento actúa como un contenedor
de todo aquello que queremos incluir en la página HTML que no es contenido visible por los
visitantes de la página. Incluye cosas como palabras clave, una descripción de la página que
quieres que aparezca en resultados de búsquedas, CSS para dar estilo al contenido,
declaraciones del juego de caracteres, etc.
• <body></body> — el elemento <body>. Encierra todo el contenido que deseas
mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos,
pistas de audio reproducibles, y demás.
• <meta charset="utf-8"> — este elemento establece el juego de caracteres que tu
documento usará en utf-8, que incluye casi todos los caracteres de todos los idiomas
humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir.
No hay razón para no establecerlo, y puede evitar problemas en el futuro.
• <title></title> — establece el título de tu página, que es el título que aparece en la
pestaña del navegador cuando la página es cargada, y se usa para describir la página cuando
es añadida a los marcadores o como favorita.
Imágenes
Prestemos atención nuevamente a nuestro elemento imagen <img>:

Como dijimos antes, incrusta una imagen en nuestra página, en la posición en que aparece.
Lo logra a través del atributo src (source), el cual contiene el path (o ubicación) de nuestro
archivo de imagen.
También incluimos un atributo alt (alternative) — el cual contiene un texto que debería
describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen,
quizás porque:
1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales
usualmente utilizan herramientas llamadas Screen Readers (Lectores de Pantalla), las cuales
les leen el texto contenido en el atributo alt.

XXV
2. Se produjo algún error en el código que impide que la imagen sea cargada. Como
ejemplo, modifica deliberadamente el path dentro del atributo src para que éste sea
incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:
Mi imagen de prueba
La frase clave acerca del texto alt de arriba es "texto que debería describir la imagen". El
texto alt debe proporcionarle al lector la suficiente información como para que éste tenga
una buena idea de qué muestra la imagen. Por lo que nuestro texto actual "Mi imagen de
prueba" no es para nada bueno. Un texto mucho mejor para nuestro logo de Firefox sería:
"El logo de Firefox: un zorro en llamas rodeando la Tierra".
Prueba a dar con mejores textos alt para tu imagen.
Marcado de texto
Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de
texto.
Encabezados
los elementos de encabezado permiten especificar que ciertas partes del contenido son
encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un
título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos
dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de
encabezados, <h1>–<h6>, aunque probablemente sólo llegues a usar 3-4 como mucho:

Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento <img>.

Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de texto;
los usarás frecuentemente para el marcado de contenido de texto regular:

XXVI
Listas
Mucho del contenido web está dado por listas, asi que HTML tiene elementos especiales
para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos
de listas más comunes son las listas ordenadas y las desordenadas:

Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como
en una lista de compras. Estas son encerradas en un elemento <ul> (unordered list).

Las listas ordenadas son aquellas en las que el orden si es relevante, como en una receta.
Estas son encerradas en un elemento <ol> (ordered list).
Cada elemento de la lista se coloca dentro de un elemento <li> (list item).
Por ejemplo, si queremos transformar parte del siguiente párrafo en una lista:

Podríamos hacer lo siguiente:

Vínculos
Los vínculos son muy importantes — son los que hacen de la web, la web. Para implementar
un vínculo, necesitamos usar un vínculo simple — <a> — la a es el diminutivo de "anchor"
("ancla"). Para convertir algún texto dentro de un párrafo en un vínculo, sigue los siguientes
pasos:
1. Elige algún texto. Nosotros elegimos "Mozilla Manifesto".
2. Encierra el texto en un elemento <a>, así:

XXVII
Podrías obtener resultados inesperados si omites la parte https://, llamada protocolo, al
comienzo de la dirección web. Así que luego del marcado del vínculo, haz click en él para
asegurarte que te dirige a la dirección deseada.
href podría parecer, en principio, una opción un tanto oscura para un nombre de atributo.
Si tienes problemas para recordarla, recuerda que se refiere a hypertext reference.

Conclusión
Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página
que se vea así (también puedes verla aquí):

XXVIII
Conclusión
Como vimos anteriormente HTML es el lenguaje que se utiliza para crear páginas web e alas
que se accede mediante internet, más concretamente HTML e s el lenguaje en que se
“escriben” las mayoría de las páginas web.

Los diseñadores utilizan el lenguaje HTML para crear páginas web, los programas que se
emplean generan páginas escritas en HTML y los navegadores que utilizamos (por ejemplo
Google Chrome, Opera o Mozilla Firefox) muestran las páginas web después de leer e
interpretar su contenido HTML

Referencias
Anonimo. (s.f.). Obtenido de https://www.guiawebmaster.com/diseno-web/navegabilidad.php

Anonimo. (04 de Mayo de 2016). taovisual. Obtenido de taovisual: https://taovisual.com/los-10-

conceptos-basicos-debes-conocer-una-web/

Anonimo. (Diciembre de 2017). 10Tipos. Obtenido de 10Tipos: https://10tipos.com/tipos-de-sitios-

web/

Anonimo. (26 de Septiembre de 2017). fp.uoc. Obtenido de fp.uoc:

https://fp.uoc.fje.edu/blog/que-son-las-interfaces-graficas-o-gui/

Perez, J. (07 de Junio de 2007). maestrosdelweb. Obtenido de maestrosdelweb:

http://www.maestrosdelweb.com/herramientas-adecuadas-para-el-diseno-y-desarrollo-
de-un-sitio-web/

Reyes, J. J. (s.f.). Obtenido de https://devcode.la/blog/que-es-html/

XXIX
XXX