HOJA DE INFORMACIÓN Nº 01

I.- ¿QUÉ APRENDERÉ HOY?

 Sitios web estáticos vs Sitios web dinámicos.
 Tecnologías empleadas en el desarrollo web.
 ¿Qué es una página web? HTML, HTML5, Navegadores, editores.
 Estructura de una página web.
 Etiquetas semánticas Html5.
 Estructura tradicional de un documento Html4.

II.- SITIOS WEB ESTÁTICOS VS SITIOS WEB DINÁMICOS:

Ya hemos visto que para acceder al conjunto de archivos que conforman un sitio web, nuestro
equipo como cliente realiza una solicitud para ponerse en contacto con el servidor que almacena
dicha información. Normalmente utiliza para ello un software de cliente conocido como
“navegador”. Inmediatamente después, el servidor recoge nuestra solicitud y la atiende
enviándonos un código que nuestro ordenador presenta después de interpretarlo.

En el caso de los sitios web dinámicos el proceso es algo más complejo. Después de que el
navegador solicita acceder a la página y el servidor DNS brinda la IP, tienen lugar otros procesos
del lado del servidor para encontrar y devolver la información. Esta consulta a la base de datos se
ejecuta por medio de lenguajes de programación del lado del servidor (php, .NET, Ruby, etc.).
Después el navegador interpreta este código y compone la página.
El desarrollo de una web dinámica suele ser más complejo ya que requiere de conocimientos
específicos de programación, creación y gestión de bases de datos. Las webs dinámicas permiten
crear aplicaciones que funcionan dentro del propio sitio web (encuestas, foros de soporte, listas de
suscriptores a un boletín de noticias, pedidos online, etc.).
Al trabajar con bases de datos tenemos la posibilidad de almacenar información de nuestros
posibles clientes y utilizarla después para campañas de marketing por lo que resulta muy
interesante y beneficioso invertir en este tipo de plataformas.

Diseño Web 1
Ing. Gina Miranda Anampa
III.- TECNOLOGÍAS EMPLEADAS EN EL DESARROLLO WEB:
Existen dos tecnologías diferentes desde el punto de vista técnico, aunque complementarias: front
end y back end.
El término front end se refiere a los lenguajes que operan del lado del cliente para ser interpretados
por el navegador. Los más extendidos son HTML, CSS y JavaScript.
Por otro lado la tecnología back end se refiere a la programación del lado del servidor. Consiste
en procesar las peticiones de los usuarios mediante la interpretación de un script en el servidor
web.
Aunque cada lenguaje tiene sus particularidades, el proceso de scripting del lado del servidor es
similar en todos ellos:
1. El usuario realiza una solicitud.
2. El código del lenguaje del lado del servidor hace una consulta a la base de datos que puede
incluir cálculos y procesos.
3. Las páginas se muestran al usuario componiéndose en el momento de la búsqueda o interacción
(secuencia de comandos del servidor).

El hecho de que el código se ejecute en el

servidor implica proteger esta información para que quede almacenada de forma segura. Por otra
parte, la carga de la ejecución recae sobre el servidor que debe estar preparado para ello.
IV.- ¿QUÉ ES UNA PÁGINA WEB?
Es un conjunto de información electrónica conteniendo además de texto, imagen, sonido, etc. Las
páginas web permiten realizar publicidad a escala mundial para cualquiera que desee conectarse a
la red.
Diseño Web 2
Ing. Gina Miranda Anampa
 Esta forma de difusión es elegida por todo tipo de instituciones no sólo de interés comercial, sino
también académico, de investigación, salud, hobbies, esparcimiento, arte, etc.

HTML(Hyper Text Markup Language).-Es el lenguaje con el que se escriben las páginas web. Es
un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y
que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del
documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes,

sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento
multimedia. Los documentos HTML deben tener la extensión html o htm, para que
puedan ser visualizados en los navegadores.

HTML5.- Es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML.
HTML5 especifica dos variantes de sintaxis para HTML: una «clásica», HTML (text/html),
conocida como HTML5, y una variante XHTML conocida como sintaxis XHTML5 que deberá
servirse con sintaxis XML (application/xhtml+xml).12 Esta es la primera vez que HTML y
XHTML se han desarrollado en paralelo.

NAVEGADORES.- Son programas que permiten visualizar las páginas web, es

decir los navegadores se encargan de interpretar el código HTML de los
documentos, y de mostrar a los usuarios las páginas web resultantes del código
interpretado. Los principales navegadores son Mozilla Firefox, Google Chrome, Opera, Safari,
Avant Browser, Internet Explorer y Netscape Navigator, entre otros.

EDITORES.- Son los programas que nos permiten redactar documentos, hoy en día existen un
gran número de editores que permiten crear páginas web. Algunos de los editores para crear
páginas web son el bloc de notas, Notepad++, Notepad, Sublime text, Adobe Pagemill, Vi, etc.

V.- ESTRUCTURA DE UNA PÁGINA WEB. - Las etiquetas o marcas delimitan cada uno de los
elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo
de elemento y la de fin o cierre de elemento.

<XXX> Este es el inicio de una etiqueta</XXX> Este es el cierre de una etiqueta.

Lo que haya entre ambas etiquetas será influenciada por ellas. Por ejemplo, todo el documento
HTML debe estar entre las etiquetas <HTML> y </HTML>:

<HTML> (todo el documento) </HTML>

Diseño Web 3
Ing. Gina Miranda Anampa
 El documento en sí está dividido en 2 zonas principales:

 El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>

 El cuerpo comprendido entre las etiquetas <BODY> y </BODY>

Dentro del encabezamiento hay información que no se ve en la pantalla principal tal es el caso
del título del documento comprendido entre las etiquetas <TITLE></TITLE>.

Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto,
imágenes, etc.)

Sintaxis:

<!DOCTYPE html>
<html Lang=”es”>
<head>Elementos de la cabecera
<title>Titulo de la Pagina Web</title>
</head>
<body>
<br>
Cuerpo del documento web
</body>
</html>
VI.- ETIQUETAS SEMÁNTICAS HTML5:
Las etiquetas semánticas de 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.
Existen más de 30 nuevas etiquetas semánticas que pueden ser utilizadas en nuestras páginas
estáticas. Estas nuevas etiquetas se podrían clasificar en dos grupos:
 Etiquetas que extienden a las actuales, como <video>, <audio> o <canvas>, y que además
añaden nuevas funcionalidades a los documentos HTML, que podemos controlar desde
JavaScript y
 Etiquetas que componen la web semántica, es decir, que no proponen nuevas funcionalidades
pero sirven para estructurar sitios web, y añadir un significado concreto, más allá de las
etiquetas generales como <div>.
<section></section>: se utiliza para representar una sección "general" dentro de un documento o
aplicación. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor
toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento
web.
Diseño Web 4
Ing. Gina Miranda Anampa
 <article></article>: Podría utilizarse en los artículos de los foros, una revista o el artículo de
periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o
cualquier otro artículo independiente de contenido. Cuando los elementos de <article> son
anidados, los elementos interiores representan los artículos que en principio son relacionados con
el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de
usuario, dichos comentarios se podrían representar con <article>.
<aside></aside>: representa una sección de la página que abarca un contenido relacionado con el
contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este
elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para
grupos de elementos de la navegación, u otro contenido que se considere separado del contenido
principal de la página.
<header></header>: representa un grupo de artículos introductorios o de navegación. Está
destinado a contener por lo general la cabecera de la sección (un elemento h1-h6 o un
elemento hgroup), pero no es necesario.
<nav></nav>: representa una sección de una página que enlaza a otras páginas o a otras partes
dentro de la página. No todos los grupos de enlaces en una página necesita estar en un
elemento nav, sólo las secciones que constan de bloques de navegación principales son apropiados
para el elemento de navegación.
<footer></footer>: representa el pie de una sección, con información acerca de la
página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o
el año.

VII.- ESTRUCTURA TRADICIONAL DE UN DOCUMENTO HTML4:

El siguiente código muestra una estructura "clásica" de documento HTML, donde los diferentes
contenidos de la web se encuentran agrupados por etiquetas <div>. Por sí mismas, estas etiquetas

Diseño Web 5
Ing. Gina Miranda Anampa
 no aportan ningún tipo de significado, y el atributo id tampoco se lo proporciona. Si
cambiamos <div id="header"> por <div id="abc">, el significado sigue siendo el mismo, ninguno.

Diseño Web 6
Ing. Gina Miranda Anampa