Uso y diseño en la plataforma HTML

Presentado por:
Darla Elizabeth Espina
Nayely Aracely Sor
Luis Antonio Fernández
Alejandro Pinzón Torres
Anders José Montano

Colegio de informática IMB-PC

Comunicación y Lenguaje
Bachillerato en diseño gráfico y computación
Ciudad de Guatemala
2017
*Licenciada Patricia Ralda
El uso y diseño
En HTML
Introducción

Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas
palabras normalmente tienen algunas características, como diferentes tamaños y colores. En
algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios
donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás
viendo. La página también puede contener animaciones y contenidos que cambian mientras el
resto de la página se mantiene sin cambios en esto se basa el diseño y la programación de las
paginas web.

Varios lenguajes (como CSS, JavaScript, Flash, AJAX, JSON) pueden usarse para definir los
elementos que componen una página web. Sin embargo, en el nivel más bajo y primitivo, una
página web se define usando
“HTML” que en sus siglas en ingles significa (HyperText Markup Language). Sin HTML, no habría
páginas web.
Este trabajo investigativo proporciona una introducción al HTML. Si alguna vez te has preguntado
qué ocurre detrás de tu navegador web, esta redacción es el mejor lugar para empezar a aprender.
Índice

Caratula ………………………………………………………………… 1

Presentación ……………………………………………………………2

Introducción ………………………………………………………………3

Índice ……………………………………………………………………...4

Hipótesis …………………………………………………………………5

Planteamiento ……………………………………………………………6

Objetivos …………………………………………………………………7

Justificación ………………………………………………………………8

HTML uso y diseño ……………………………………………………….9

Que es HTML ………………………………………………………10

Breve historia sobre HTML……………………………………………… …11

Especificaciones Actuales de HTML………………………………………12

Familias de tipos de letra ………………………………………………….13

Familias Tipográficas ……………………………………………………… 13.1

El uso del color ………………………………………………………14

Diversos usos del color en el diseño web ………………………………15

Encuestas ………………………………………………………16-18

Recomendaciones ……………………………………………………… 19

Conclusiones ………………………………………………………20

Anexos ………………………………………………………21-24
Hipótesis:

1. Los alumnos de 5to Diseño y computación del colegio IMB PC (Sede SC) obtendrán más interés
sobre el tema.

2. Los compañeros podrán utilizar correctamente el diseño en páginas web.

Planteamiento

Al programar en el lenguaje de HTML de la forma correctamente no habría ningún problema al

descargar el archivo y utilizarlo en el navegador, de lo contrario si hubo un error como de no haber
cerrado alguna etiqueta correctamente o no haber vinculado bien su carpeta de CSS puede que el
diseño tanto como en texto que no allá cerrado la etiqueta al momento de abrir la página no salgan
con el resultado esperado y requiere de una buena observación para ver cual él es problema y darle
una posible solución
Objetivos

General:

Informar a los estudiantes de las utilidades y las infinitas posibilidades que genera estas
herramientas dela plataforma HTML.

Específicos:

1. informar del buen uso del diseño en las páginas web.

2. Aseverar la correcta aplicación de la plataforma HTML.

Justificación:

A raíz de querer informar a los alumnos del Colegio de informática IMB-PC de la sede San Cristóbal
de los grados 5to bachillerato con orientación en Computacion y 5to bachillerato con Orientación en
Diseño Gráfico de la forma correcta del uso del diseño y programación de la plataforma HTML ya que
ahora es muy importante tener conocimiento del uso de esta herramienta por el constante
empleamiento de las páginas web en el mundo actual ya que es un entendimiento que proporciona
oportunidades en varios ámbitos Económico y social aportando también al área de marketing y
publicidad.

Generar facilidad en el planteamiento de una nueva era de informática y facilitación con este tipo de
lenguaje que genera Estadísticamente la gesticulación de nuevos proyectos.
 1. El uso y diseño de HTML

Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imágenes.
Con el desarrollo del estándar HTML, empezaron a incluir también información sobre el aspecto de
sus contenidos: tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también
incluyeran el código de las aplicaciones (scripts) que se utilizan para crear páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su
mantenimiento. Normalmente, los contenidos y el diseño de la página web son responsabilidad de
diferentes personas, por lo que es adecuado separarlos. CSS es el mecanismo que permite separar
los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos :

Otra ventaja de la separación de los contenidos y su presentación es que los documentos XHTML
creados son más flexibles, ya que se adaptan mejor a las diferentes plataformas: pantallas de
ordenador, pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas
discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas.
Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.
1.1 ¿Qué es HTML?

Definiéndolo de forma sencilla, "HTML es el lenguaje que se utiliza para crear las páginas web a las
que se accede mediante internet". Más concretamente, HTML es el lenguaje con el que se "escriben"
la mayoría de 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.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño de páginas web,
es muy fácil de entender y escribir por parte de las personas. En realidad, HTML son las siglas
de HyperText Markup Language y más adelante se verá el significado de cada una de estas palabras.
El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo
sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de
un estándar reconocido por todas las empresas relacionadas con el mundo de internet, una misma
página escrita en HTML se visualizará de forma muy similar en cualquier navegador bajo distintos
sistemas operativos.

El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite
publicar información de forma global". Desde su creación, el lenguaje HTML ha pasado de ser un
lenguaje utilizado exclusivamente para crear documentos electrónicos a emplearse en diversas
aplicaciones electrónicas especializadas como buscadores, tiendas "en línea" y banca electrónica.
1.2. Breve historia de HTML

La historia completa de HTML es algo larga, por lo que se muestra resumida a partir de la
información que se puede encontrar en Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, investigador del CERN
(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para
compartir documentos.

Los sistemas de hipertexto habían sido desarrollados años antes. En el ámbito de la informática, el
hipertexto permite que los usuarios accedan a la información relacionada con los documentos
electrónicos que visualizan. En cierta manera, los primitivos sistemas de hipertexto podrían
asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema, Tim Bernés-Lee lo presentó a una convocatoria organizada
para desarrollar un sistema de hipertexto para internet. Después de unir sus fuerzas con el ingeniero
de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3). El
primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre “HTML
Tags” (Etiquetas HTML) y todavía hoy puede ser consultado en línea a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del
organismo IETF (Internet Engineering Task Forc). Aunque se consiguieron avances significativos
(en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos
propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organizó un grupo de trabajo de HTML y el 22 de septiembre publicaron

el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización, el W3C. La
versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML
publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas
hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (versión corregida de la publicación del 18 de Diciembre
de 1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más
destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas
o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y
mejoras en los formularios.
1.3 Especificaciones actuales

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina

HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye
novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C

se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas
Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y
decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application
Technology Working Group). La actividad actual del WHATWG se centra en el estándar HTML5,
cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las
empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en
marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.
2. Familias de tipos de letra (HTML)

En HTML y XHTML, es el tipo de letra o familia de tipos de letra es el tipo de letra que se aplicará al
cuerpo de texto en un navegador. El tipo de letra es relevante para la visualización del texto en la
pantalla, en una impresora o en otro tipo de dispositivos.

2.1. Familia tipográfica

Existe un amplio abanico de propiedades CSS para seleccionar las fuentes o tipografías a utilizar.
Empezaremos por la más lógica, la de seleccionar una familia tipográfica, que no es más que indicar
mediante CSS el nombre de la tipografía que queremos utilizar:

Con la primera propiedad, denominada font-family, podemos seleccionar se puede

seleccionar cualquier tipografía simplemente escribiendo su nombre. Si dicho nombre está
compuesto por varias palabras separadas por un espacio, se aconseja utilizar comillas simples
para indicarla (como se ve en el segundo ejemplo):
3.El uso del color
Para los diseñadores web el color es una herramienta imprescindible que poseemos para
poder captar la atención del usuario. Hay una relación directa entre el color y los elementos de una
composición, alterar el color de un objeto puede repercutir en la valoración jerárquica que se haga.
También los colores nos provocan diferentes sensaciones de las que normalmente no somos
conscientes, nos afecta pues vivimos rodeados de ellos y culturalmente se han ido identificando con
las cosas que nos rodean.

l color representa un estímulo visual potente siendo significativo el efecto que puede generar en el
usuario. El uso del color se extiende mucho más allá de destacar simplemente ciertas zonas o
ciertos fragmentos de texto.

Desde un punto subjetivo está directamente relacionado con la experiencia visual del usuario y de su
contexto cultural. De esta manera podemos establecer relaciones entre el color y su significado o
entre el color y sus propiedades espaciales.

El color desprende diferentes expresiones del ambiente, que pueden transmitirnos la sensación de
calma, plenitud, alegría, violencia etc. La utilización de ciertos colores afecta de diferente manera en
nuestro estado de ánimo, de modo que le proporciona al diseñador web la oportunidad de conectar
mejor con el usuario, pero también con el riesgo de conseguir una sensación negativa.
3.1. Diversos Usos del color en el diseño web

El color es un recurso esencial en todo sitio web y su uso adecuado puede mejorar la legibilidad y
transmitir emociones a los visitantes. Crear una paleta de colores u usarla de manera efectiva puede
ser una tarea compleja. Debes tener conocimiento sobre teoría del color para poder armar una
buena combinación y aún así puede ser necesario ayuda de herramientas digitales como Adobe
Kuler, por ejemplo.
No sólo basta con crear una buena paleta de colores, sino determinar en qué porcentaje debe ser
usado cada color y aplicarlo de manera eficaz a los elementos del sitio, asegurando la legibilidad y el
contraste. Así que, como ves, seleccionar colores puede ser una tarea algo compleja. Pero, si lo
logras hay diversos usos que puedes darle al color.

Algunos usos del color pueden ser:

Para captar la atención de los visitantes

Para fortalecer los valores y personalidad de la marca

Para unificar la composición

Para darle más vida a tus fotografías

El color es una herramienta sumamente poderosa en el campo del diseño. Como ya hemos notado,
el color se emplea no solo para captar la atención del público, sino para, de alguna manera, intentar
conectar con ellos. Si estás al tanto sobre la psicología de color, sabes que a cada color se le asocia
cierto sentimiento y por esta razón, los colores pueden desatar emociones en las personas que los
ven. Esta característica de los colores es aprovechada por las marcas, quienes hacen uso de colores
representativos y formas únicas para poder diferenciarse en la mente de sus consumidores.
Encuesta

Se realizó como motivo de investigación una encuesta a los alumnos del colegio IMB-PC (san
Cristóbal) de la carrera de diseño tanto como a la de computación para conocer cuánto entendían
sobre el diseño y el uso de la plataforma HTML, a continuación, se muestran las gráficas con sus
respectivas preguntas y porcentajes de respuestas:

1ra.Pregunta

¿Qué es lo que más le llama la atención en una página web?

Algunas de las respuestas fueron:

 “El contenido” - Montserrat Barrientos

 “La información y la interacción”- Fabián Nobile
 “Que tenga buen diseño y que sea colorido” –Esteban de León
 “La imagen y los colorea que son los que cautivan la atención” – Benjamín Salvatierra
 “La presentación” – Cristy Toj
 “Como llama la atención con colores y aspectos” – María José Orellana
 “El diseño de su página y su contenido” - Sofía López
 “El diseño de una página y la información que me brinda”- Rosangela Luna

2da.Pregunta

¿Sabe cuál es el tamaño correcto para colocar una imagen de fondo en una página web?
3ra.Pregunta

¿Qué es lo que más le gusta realizar al crear una página web?

4ta.Pregunta

¿Cuál es el editor con el que más te gusta trabajar?

Algunas de las respuestas fueron:

“Notepad ++” - Montserrat Barrientos

“Notepad ++”- Fabián Nobile
“Sublime text” –Esteban de León
“No contesto” – Benjamín Salvatierra
“No contesto” – Cristy Toj
“No CONTESTO” - Sofía López
“Adobe Illustrator” – María José Orellana
“Adobe Illustrator”- Rosangela Luna
5ta.Pregunta

¿Sabe utilizar correctamente la tipografía y los colores para una página web?

En base a los resultados obtenidos, nos dimos cuenta que los percances al usar la plataforma son
muchos sin embargo el uso correcto de esta es un tema muy esquemático que se deriva de varias
plataformas las cuales mejoran su uso y dependiendo de sus necesidades será el nivel de dificultad
Recomendaciones

1. No uses Javascript directo en tu página

Una práctica común de hace años ya era colocar comandos de JavaScript directamente dentro de
etiquetas. Era algo muy común, de manera general con el atributo onclick asignado a la etiqueta. Sin
embargo, no debes hacerlo más. En su lugar, transfiere este código a un archivo externo Javascript y
utiliza el “addEventListener/attachEvent” para escuchar el evento deseado. O, si utilizas jQuery, por
ejemplo, usa el método clic directamente.

2. Valida de manera continúa

Es importante que valides tu código. Es muy recomendable que descargues el Web develo per
toolbar (Para Firefox)
y uses la opción de Validar HTML y Validar CSS. Siendo el CSS y el HTML lenguajes de fácil
aprendizaje, un error no detectado puede causar mucho problema, del tipo de espacio en blanco.
Valida tu código, es una buena práctica

3. Usa los encabezados, los 6

La mejor práctica es utilizar los 6 encabezados existentes. Las ventajas tienen que ver con razones
semánticas y optimización para motores de búsqueda de tus sitios. Haz un esfuerzo y utiliza de forma
apropiada los encabezados y reemplaza la etiqueta P.

4. Utiliza un buen editor de código

Ya sea que utilices MAC o PC, hay muy buenos editores de código.
Para la gente que utiliza MAC algunos buenos editores son:
Para los usuarios de PC:
InType
E-Text Editor
Notepad++
Aptana
Dreamweaver

5. Cierra tus etiquetas

 Date cuenta que la etiqueta UL/OL se omitió. De manera similar, muchos eligen dejar la etiqueta
LI abierta también. En los estándares actuales, esto es una mala práctica, y debe evitarse.
Conclusión

Después de varias participaciones y comentaros propuestos en el grupo podemos concluir que el

lenguaje HTML es esencial en la elaboración de páginas web, no es indispensable, ya que se pueden
hacer páginas web sin esta herramienta, pero al no usarla se harían páginas web muy simples y no
atrayentes ante los ojos del usuario, no tendría ningún sentido mirarlas y serían muy aburridas, para
un desarrollador de sitios web es indispensable necesario y obligatorio saber usar el lenguaje HTML
ya que debe hacer páginas web entretenidas e interesantes, dinámicas, para atraer al usuario, no
puede ser un desarrollador de páginas web sin saber esto. El lenguaje HTML ha ido avanzando y
evolucionando a través de la evolución de la web, se ha hecho cada vez mejor y más interesante; es
decir que la evolución de lenguaje de programación (HTML) ira evolucionando simultáneamente con
la evolución de la web, probablemente en unos años, con la evolución de la web, no será necesario o
útil este lenguaje y ya habrá otro que lo reemplace, pero por el momento es muy importante conocer
este lenguaje para manejar muy bien la web, y de manera más sencilla, sobretodo en la creación de
páginas web.

Conclusión 2

Informar a los alumnos sobre el uso y el diseño en las páginas web y demostrarles los tipos de
animaciones que se pueden utilizar en el lenguaje de HTML que son varias para escoger y utilizar las
herramientas correctas para hacer una página web llamativa

Conclusión 3

Como se ha visto, una página es un archivo donde está contenido el código HTML en forma de texto.
Estos archivos tienen extensión .HTML o .htm (es indiferente cuál utilizar). De modo que cuando
programemos en HTML lo haremos con un editor de que sepamos utilizar y guardaremos nuestros
trabajos con extensión .HTML, por ejemplo: index.html
Anexos

Código básico de HTML:

Código complejo de HTML:

Código avanzado de HTML:

Código para tipos de texto:

Código para insertar imagen:

Código para fondo de pantalla de color:

Código para Background:

Código para animación:

Código para formato de texto:

Código para párrafo:

Código para títulos:

Código para Hipervínculos: