CONTENIDO

UNIDAD 1.

1. FUNDAMENTACIÓN WEB HTML

1.1 Páginas Web
1.2 Diseño de páginas Web
1.3 Políticas para diseño Web
1.4 Generalidades – Documentos
1.5 Letras – Listas
1.6 Hipervínculos – Tablas
1.7 Imágenes - Formularios – Símbolos

1. FUNDAMENTACIÓN WEB HTML
1.1 Páginas Web
¿Qué es una página Web?
Se conoce como página Web, página electrónica o página digital a un documento digital
de carácter multimediático (es decir, capaz de incluir audio, video, texto y sus
combinaciones), adaptado a los estándares de la World Wide Web (WWW) y a la que
se puede acceder a través de un navegador Web y una conexión activa a Internet. Se
trata del formato básico de contenidos en la red.
Las páginas Web cumplen básicamente con la tarea de brindar información de
cualquier índole y en cualquier estilo o grado de formalidad.
Algunas, al mismo tiempo, permiten distintos grados de interacción entre usuarios o
con alguna institución, como son las páginas de foros,
servicios de citas o redes sociales, las páginas de compra
y venta de bienes, las páginas de consulta o de contacto
con empresas, instituciones gubernamentales o con
ONGs, e incluso las páginas de soporte técnico
especializado.
En principio, las funciones de una página Web son tan
amplias como la demanda de los usuarios y la oferta de
sus creadores.
Tipos de página Web
Existen dos tipos de página Web, conforme al modo en que se genera su contenido:
Páginas Web estáticas. Operan mediante la descarga de un fichero programado en
código HTML, en el que están todas las instrucciones para que el navegador
reconstruya la página Web, accediendo a las ubicaciones de sus elementos y siguiendo
un orden preconcebido, rígido, que no permite la interacción con el usuario. Este tipo
de páginas son meramente informativas, documentales, no interactivas.
Páginas Web dinámicas. A diferencia de las anteriores, las páginas Web dinámicas se
generan en el momento mismo del acceso del usuario, empleando para ello algún
lenguaje interpretado (como el PHP), lo cual le permite recibir solicitudes del usuario,
procesarlas en bases de datos y ofrecer una respuesta acorde a sus requerimientos [1].
1.2 Diseño de páginas Web
En el diseño de páginas web, encontramos:
Frontend: es la parte de un programa o dispositivo a la que un usuario puede acceder
directamente. Son todas las tecnologías de diseño y desarrollo web que corren en el
navegador y que se encargan de la interactividad con los usuarios.
HTML, CSS y JavaScript son los lenguajes principales del Frontend, de los que se
desprenden una cantidad de frameworks y librerías que expanden sus capacidades
para crear cualquier tipo de interfaces de usuarios. React, Redux, Angular, Bootstrap,
Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.
Backend: es la capa de acceso a datos de un software o cualquier dispositivo, que no
es directamente accesible por los usuarios, además contiene la lógica de la aplicación
que maneja dichos datos. El Backend también accede al servidor, que es una aplicación
especializada que entiende la forma como el navegador solicita cosas.
Algunos de los lenguajes de programación de Backend son Python, PHP, Ruby, C# y
Java, y así como en Frontend, cada uno de los anteriores tiene diferentes frameworks
que le permiten trabajar mejor según el proyecto que estás desarrollando [2].
1.3 Políticas para diseño Web
En Colombia, la Norma NTC 5854, tiene como objetivo establecer los requisitos de
accesibilidad que son aplicables a las páginas web, que se presentan agrupados en tres
niveles de conformidad: A, AA, y AAA. Esta norma fue desarrollada empleando como
documento de referencia “Las Pautas de Accesibilidad para el Contenido web (WCAG)
2.0 del 11 de diciembre de 2008”[3].
En el blog de la asignatura, puede encontrar mayor información
Además, el Consorcio World Wide Web (W3C), que es una comunidad internacional
donde las organizaciones Miembro, personal a tiempo completo y el público en general
trabajan conjuntamente para desarrollar estándares Web[4]; establecen unos
estándares de calidad, donde puede acceder a un resumen en la siguiente dirección:
https://www.w3.org/WAI/standards-guidelines/es
1.4 Generalidades – Documentos[5]
HTML: HyperText Markup Language) o lenguaje de etiquetas de hipertexto
Hoy en día todo el mundo usa su ordenador personal, Tablet, Smart tv o Smartphone
para navegar a través de internet, pero ¿quién, dónde y cómo nació todo esto?: Timothy
“Tim” John Berners-Lee en noviembre de 1989 realizó su primera comunicación entre
dos ordenadores, por lo que se puede decir que fue el padre de la hoy llamada web,
nube, la Internet o comúnmente llamada Internet. En concreto salió de la necesidad de
intercambio de información entre diferentes personas que estaban investigando sobre
un proyecto.
Mejoras en los formularios: Nuevos tipos de datos (eMail, number, url, datetime…) y
facilidades para validar el contenido sin JavaScript.
Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se
deja abierto a poder interpretar otros lenguajes XML.
Drag & Drop: Nueva funcionalidad para arrastrar objetos como imágenes.
Web Semántica. Añade etiquetas para manejar la Web Semántica (Web 3.0): header,
footer, article, nav, time (fecha del contenido), link rel=‘’ (tipo de contenido que se
enlaza).

Él y su grupo de investigación crearon lo que por sus siglas en inglés se denomina Estas etiquetas permiten describir cuál es el significado del contenido. Por ejemplo su
Lenguaje HTML (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, importancia, su finalidad y las relaciones que existen. No tienen especial impacto en la
el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de visualización, se orientan a buscadores.
objetos en la web URL (Uniform Resource Locator).
Esquema y elementos necesarios de la web
Tim Berners-Lee podemos decir de forma resumida que creó un protocolo de
comunicación ( HTTP ), un lenguaje para que las máquinas se entendieran (HTML) Para poder ver una página web necesitamos un ordenador que nos sirva usando el
y una forma de llamar a los recursos a través de ( URL ), lo que solemos llamar la protocolo HTTP, el lenguaje HTML para comunicarnos y las direcciones URL para saber
dirección web. Hoy en día, cuando pensamos en Internet, pensamos en miles de qué recurso es el que queremos en cada momento. Con todo eso podemos intercambiar
ordenadores interconectados, transmitiendo imágenes, música, en definitiva, información y disfrutar de navegar por nuestro servidor web.
información. Pero nosotros también podemos tener varios ordenadores conectados a
un servidor de forma local, crear una intranet, y tener nuestra página web de la
empresa o corporación; eso sí, se podrán ver dentro de la red, a no ser que se dé
permiso en el router para que esa página web ser vea desde fuera de nuestra red[5].

Diferencias entre HTML5 y versiones anteriores.

HTML5 es la última versión de este lenguaje (2019), desde que salió su primera versión
han existido varias modificaciones para adaptarse a las necesidades de los usuarios en
cada momento; pero a modo de resumen se puede decir que HTML5 aporta:

Incorpora etiquetas: (canvas 2D y 3D, audio, vídeo) con codecs para mostrar los
contenidos multimedia. Actualmente hay una lucha entre imponer codecs libres
(WebM + VP8) o privados (H.264/MPEG-4 AVC).
Servidor Web
(Donde se alojan l as

Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y páginas)

Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar
contenido.
Cuando ponemos en nuestro navegador una URL, comúnmente dirección web, estamos
diciendo al navegador tráeme (GET) la información que haya en la dirección que te he
puesto en la URL. Llegados a este punto hay que aclarar una cosa que seguro que has
cambiado o al menos escuchado y son los DNS (Domain Name System).

Por ejemplo, si hacemos un símil con las personas, cada persona tiene un nombre y un
número de identificación, y normalmente cuando nos comunicamos entre nosotros
usamos el nombre y no el número que nos identifica. ¿Por qué? Es más fácil de
recordar, es más bonito…, entre otras cosas. Así funciona la web, este nombre es tan
importante que incluso hay una guerra por escoger los nombres, ya que en Internet
sólo puede existir un nombre concreto. No pasa como con las personas, que se pueden
llamar varias personas del mismo nombre, en Internet el que coge el nombre por
primera vez, queda registrado. ¿Por qué? Por ejemplo, si ponemos www.google.es nos
referimos a una empresa y no puede existir nadie que se llame exactamente igual.

Pero www.google.es tiene una “IP” o dirección física, ¿quieres saberla? Usa la consola
de comandos, en Windows / Inicio / Accesorios / Símbolo del sistema o Tecla
Windows + R y escribe cmd: Para poder referirnos a un archivo concreto del servidor, siempre lo podemos hacer
de dos formas, de forma relativa o absoluta:

Relativa: Partiendo desde el directorio actual y avanzando o retrocediendo desde él.

Para avanzar sólo tendremos que ir poniendo los directorios inferiores donde
indiquen las rutas. Para retroceder debemos anteponer en cada paso dos puntos y una
barra “../” indicando que subo al directorio padre del archivo, si tuviera que subir dos
niveles en el directorio podría poner “../../”.

Absoluta: Ruta completa desde el directorio raíz donde tenemos alojado nuestra
página, es decir, a partir de ‘/’ que hayamos seleccionado en el servidor web.

Tenemos que tener muy en cuenta que en nuestro servidor tenemos varias formas de
movernos por la ruta de directorios y siempre tenemos que tener muy presente donde
está el archivo dentro de su estructura.

Entonces, podemos acceder de dos formas:

Dominio: www.google.com.co
IP: 216.58.204.35 (Desde mi PC)

Existen muchos tipos de servidores y servicios, los más comunes y usados por los
usuarios podrían ser los siguientes:
Preparando el entorno de desarrollo. Creando mi primer Snippet

1. Escoger la opción nuevo Snnipet

2. Aparecerá un código predeterminado como el siguiente:

Las anteriores son herramientas que utilizaremos para poder llevar a cabo la
programación de páginas.

Para este curso, se escoge de los mencionados el editor de texto Sublime Text, par a ver
su instalación, consulte la siguiente referencia bibliográfica en e-libro (Biblioteca en
línea – vortal) en las páginas 35 – 40[5].

Con este editor puedes crear tus propios snippet “una utilidad usada en programación
para referirse a partes reusables de código fuente, código binario o texto”. 3. Por ejemplo, hagamos el siguiente Snippet

Puedes consultar el manual completo en esta página:

https://manuais.iessanclemente.net/index.php/Tutorial_sobre_editor_Sublime_Text_
3

Para la creación de Snippet (En Sublime Text 3, depende de la versión, p ara el presente
se trabaja con la versión 3.2.1)

4. Debes guardarlo en la siguiente ruta y con la extensión .sublime-snippet

 1.7 Imágenes - Formularios – Símbolos

Etiquetas
Párrafos <p>

Sirve para ingresar párrafos a la página web.

Etiqueta <br/> o <br>, sirve para agregar saltos (enter)

Etiquetas de texto
5. Para probarlo, creamos un nuevo archivo, escribimos hijos + Ctrl + barra Párrafos
espaciadora, en este caso y obtendremos lo siguiente: <p>Etiquetas de texto</p>
<br/> o <br>, sirve para agregar saltos (enter)
<b> Bold--- Negrita </b>
<strong>Negrita</strong>
La diferencia de las dos radica en la importancia semántica a la
hora del posicionamiento web.
<i>Cursiva</i>
<em>Cursiva con importancia semántica</em>
<small>Texto pequeño</small>
<mark>Texto marcado, como con resaltador amarillo por
ejemplo</mark>
<del>Tachado</del>
Así puede programar todo el código que desees reutilizar, hay otras formas, deseas
conocerlas puedes leer el capítulo “3.1.4. Creando snippet propios”
<ins>Subrayado</ins>
_Subíndice
^{Superíndice (exponente)}

En la actualidad, todo esto se hace con CSS, pero las dos últimas si
son utilizadas porque es más fácil hacerlo con html que con CSS

Enlaces <a>
<a href="http://avaupc.unicesar.edu.co"></a>
En href, ponemos la dirección de la página web.
<a target= “_blank” href=""></a>
1.5 Letras – Listas
1.6 Hipervínculos – Tablas
 El target = “_blank”, hace que la página abra en una nueva
pestaña <tr>
<td>Carlos Arturo</td>
Listas Desordenadas <ul></ul> <td>123456</td>
</tr>
<ul>
<li>Elemento 1</li> <tr>
<li>Elemento 2</li> <td>Alejandro</td>
<td>987654</td>
</ul> </tr>
</table>
Listas Ordenadas <ol></ol>
Formularios
<ol>
<li>Elemento 1</li> <form action="" method="">
<li>Elemento 2</li> <label for="nombre">Tu nombre:</label>
<input type="text" id="nombre"
</ol> placeholder="Nombre:" maxlength="10" name="nombre">
<br />
Imágenes <input type="email" placeholder="Correo:"
name="correo">
<a href="http://www.google.com"> <br />
<img src="http://lorempixel.com/400/400/" <textarea name="mensaje" id="mensaje"
width="200" alt="Este es el logo de Ky" title="Este es el logo de placeholder="Mensaje"></textarea>
Ky, mensaje sobre la imágen"> <br />
</a>
<label for="pais">Pais:</label>
Tablas <select name="pais" id="pais">
<option value="mexico">Mexico</option>
<table> <option value="españa">España</option>
<tr> <!-->tr sirve para insertar filas</!--> <option
<th>Nombre:</th> <!-->th sirve para value="argentina">Argentina</option>
insertar columnas</!--> </select>
<th>Telefono:</th> <br />
</tr>
 <input type="radio" name="genero" IExplorer SI NO NO
value="hombre" id="hombre"><label Chrome SI SI SI
for="hombre">Hombre</label> Firefox SI SI SI
<input type="radio" name="genero" Safari SI SI NO
value="mujer" id="mujer"><label for="mujer">Mujer</label> Opera SI SI SI
-->
<br />
Vídeo
<input type="checkbox" name="terminos"
id="terminos"><label for="terminos">Terminos y <video width="600" controls>
Condiciones</label> <source src="media/intro.mp4"
type="video/mp4">
<input type="submit" value="Enviar"> </video>
</form>
<!--
Formato Media Type
Audio =======================
MP4 video/mp4
<audio controls> WebM video/webm
<source src="media/hyperfun.mp3" Ogg video/ogg
type="audio/mpeg">
</audio>
# Soporte de los Navegadores
<!--
Formato Media Type Navegador MP4 WebM Ogg
========================== ================================
MP3 audio/mpeg IExplorer SI NO NO
Ogg audio/ogg Chrome SI SI SI
Wav audio/wav Firefox SI SI SI
Safari SI NO NO
Opera SI SI SI
# Soporte de los navegadores
-->
Navegador MP3 Wav Ogg
================================
 REFERENCIAS BIBLIOGRÁFICAS

[1] “Página Web: Concepto, Tipos y Para qué sirve.” [Online].

Available: https://concepto.de/pagina-web/#ixzz5x7EI7hZ0.
[Accessed: 28-Aug-2019].
[2] “Qué es Frontend y Backend.” [Online]. Available:
https://platzi.com/blog/que-es-frontend-y-backend/.
[Accessed: 28-Aug-2019].
[3] ICONTEC, “INTRODUCCIÓN A LA NORMA NTC 5854.” [Online].
Available: https://ntc5854.accesibilidadweb.co/. [Accessed: 28-
Aug-2019].
[4] W3C, “Sobre el W3C - W3C España.” [Online]. Available:
https://www.w3c.es/Consorcio/. [Accessed: 28-Aug-2019].
[5] M. Contreras, Desarrollo de aplicaciones web móvil. 2018.