PÁGINAS

WEB
 ÍNDICE DE CONTENIDO

1. Introducción al diseño web ............................................................................... 3

1.1. Página web y sitio. ..................................................................................... 3

Sitio web (web site) .............................................................................................. 4

Portal web ............................................................................................................ 5

1.2. Conceptos básicos (dominio, URL, hosting, applets) ................................. 5

Dominio................................................................................................................ 5

HOSTING ............................................................................................................ 5

APPLETS............................................................................................................. 7

Direcciones IP...................................................................................................... 7

Servidor de Nombres de Dominio ........................................................................ 8

Localizador Uniforme de Recursos ...................................................................... 8

1.3. Estándares de diseño web (W3C). ............................................................. 9

2. HTML y CSS. .................................................................................................. 12

¿Qué es HTML, CSS y JavaScript? .................................................................. 12

Versiones del html ............................................................................................. 12

2.1. Estructura básica de las web: html, head, body. ...................................... 14

La estructura básica de un documento html es: ............................................. 14

Tipos de etiquetas existentes en BODY ......................................................... 15

2.2. Elementos básicos: Títulos, párrafos, imágenes, hipervínculos, videos... 17

2.3. Maquetación web: Tablas, divs, clases, menús. ...................................... 17

2.4. Estilos básicos: Tamaño, colores, fuentes. .............................................. 17

2.5. Diseño y usabilidad: Márgenes y posiciones de los elementos. ............... 17

3. Diseño de la página web usando software de aplicación. .............................. 17

4. Publicar sitio web. ........................................................................................... 17

PÁGINAS WEB
 1. Introducción al diseño web
1.1. Página web y sitio.
Página web

Una página web es un documento o documentos electrónicos con información en

diferentes formatos, ya sea texto, imágenes, audio, video o multimedia, de acuerdo
con el tipo de página de que se trate. Ésta puede estar almacenada en la
computadora del usuario que la desarrolló o, en su caso, ser almacenada en algún
servidor local o remoto. Una página pue-de estar integrada por una o varias páginas
web. Para la elaboración o desarrollo de éstas se utiliza el lenguaje HTML
(HyperText Markup Language). Cabe hacer notar que las primeras páginas que se
desarrollaron sólo ofrecían información que no variaba: su contenido siempre era el
mismo y permanecían así por diferentes periodos de tiempo, además de que no
permitían alguna interacción con quien las consultaba. A este tipo de páginas se les
denominó “páginas web estáticas”. Una de sus características es que sólo contenían
texto y algunas imágenes. Su desarrollo es relativamente fácil, sobre todo si se
cuenta con software adicional desarrollado para este propósito. De aquí la
necesidad de desarrollar páginas con más capacidades de interacción con el
usuario, incluso que ofrecieran la po-sibilidad de intercambiar información
almacenada en diferentes bases de datos residentes en lugares distantes. Ésto se
logró con la integración de otros lenguajes de programación (PHP, Perl, ASP, Java,
JSP, C++ o Ruby, entre otros), que de alguna manera facilitaron y potenciaron la
creación y desarrollo de una nueva generación de páginas a las que se les llamó
“páginas web dinámicas”.

Las páginas web dinámicas tienen la capacidad de interactuar con el usuario,

proporcionan múltiples facilidades, entre las que destacan el acceso a bases de
datos y múltiples redes sociales, y la utilización de potentes buscadores de
información. Además, permiten el desarrollo de aplicaciones más dinámicas y tienen
la capacidad de actualizar sus contenidos por medio de una gran variedad de
lenguajes que facilitan y mejoran su funcionalidad. Dentro de las aplicaciones de
páginas dinámicas que podemos encontrar está la capa-citación en línea (e-
learning), el comercio de una gran cantidad de artículos (e-commerce), las
aplicaciones de gobierno (e-gobierno) y las de tipo empresarial o las utilizadas en
su Intranet. Por sus características operativas y el ámbito de acción de cada página,
podemos tener páginas de tipo privado o público.

Figura 2. Clasificación de las páginas web

SITIO WEB (WEB SITE)

Si lo que pretendemos es elaborar una página, una aplicación o un sistema que
opere bajo un ambiente web, entonces debemos tener un espacio determinado en
algún equipo de cómputo o servidor para almacenarlo a fin de que otros usuarios
puedan consultarlo.
Es común hacer referencia a un sitio o página web de manera indistinta. Sin
embargo, existe una gran diferencia: una página forma parte de un sitio web; un sitio
web es un lugar dentro de Internet que almacena diferentes páginas o archivos
web en sus diferentes formatos (texto, gráficos, audio, video u otros), que están
organizados en forma de jerarquía y que tiene relación entre sí, es decir, que parten
de un documento rector al que comúnmente se le denomina índice (index), al cual
hacen referencia los navegadores.
Tanto las páginas web, como el propio sitio, deben estar en constante actualización.
Esta gestión la lleva a cabo el propio desarrollador del sitio, quien puede ser desde
un programador hasta un usuario, o bien, una empresa dedicada a ello.
Una forma de identificar un sitio web dentro de Internet es mediante la utilización de
un nombre de dominio.

PORTAL WEB
Un portal es un punto de entrada a un sitio web e integra toda una variedad de
servicios que pueden ser de gran utilidad para los usuarios, entre los que destacan
noticias, nuevas aplicaciones, estado del clima, buscadores, foros, juegos, correo
electrónico y ofertas, entre otros; es decir, facilita la actividad de un usuario cuando
está en Internet. Hasta cierto punto, evita la búsqueda de información en otros sitios,
pues uno solo puede brin-dar estas facilidades; particularmente dan soluciones a
necesidades específicas de acceso a la información, como es el caso de los portales
educativos o empresariales.

1.2. Conceptos básicos (dominio, URL, hosting, applets)

DOMINIO
El término “dominio” se utiliza para identificar un sitio web. Es un nombre que puede
estar compuesto por caracteres tanto alfabéticos como numéricos
(alfanumérico) y se asocia a una dirección física de una computadora o algún otro
dispositivo que se conecta a Internet. A dicho nombre se le conoce como dirección
IP (Internet Protocol o Protocolo de Internet).

HOSTING
Al alojamiento de una página web en un servidor se le conoce como hosting
(hospedaje): además de guardar las páginas, también almacena archivos
relacionados con diferentes temas, bases de datos o cuentas de correo de otros
usuarios.
Esta acción se hace necesaria para ubicar e identificar la página; para que los
usuarios puedan acceder a ella se requiere de un nombre de dominio.

La gestión de un dominio la realiza cualquier persona física o persona moral de

cualquier parte del mundo con requisitos mínimos de muy diferentes tipos de
organizaciones. Cuando se gestiona un dominio, debemos saber el tipo de
organización a la que hará referencia.

Figura 3. Algunos de los tipos de dominios

Claro está, podemos encontrar una gran variedad de dominios. Un sinnúmero de

em-presas ofrecen servicios para adquirir y registrar nombres de dominios web. Sin
embargo, se sugiere consultar más al respecto; por ejemplo en http://www.nic.mx,
http://dns.net/dnsrd, http://icann.org, entre otros.

En Internet podemos encontrar una infinidad de dominios que se basan en

direcciones IP, por lo que se requiere de un Servidor de Nombres de Dominio (DNS)
que facilite la traducción de los nombres de dominios a direcciones IP; en otras
palabras, el DNS traduce un nombre de dominio en una dirección IP o traduce una
dirección IP en un nombre de dominio. Por poner un ejemplo:

 El nombre de dominio www.icann.org se traducirá a la dirección IP

“192.0.32.7”
  La dirección IP “255.255.255.255” se traducirá en www.mipagweb.mx

APPLETS
El Applet es un programa que puede incrustarse en un documento HTML (página
Web). Cuando un Navegador carga una página Web que contiene un Applet, éste
se descarga en el navegador Web y comienza a ejecutarse, lo cual nos permite
crear programas que cualquier usuario puede ejecutar.

DIRECCIONES IP
(Internet Protocol)Los servidores en Internet se identifican por una dirección IP única
conformada por una agrupación de cuatro números de tres dígitos en un rango de
0 a 255. La dirección IP identifica de manera lógica y jerárquica una computadora o
algún dispositivo conectado a la red. Existen IP de tipo públicas sobre las cuales no
se tiene control, ya que por lo general son asignadas por los proveedores de
servicios de Internet (ISP). Estas IP pueden ser es-táticas (se asigna una IP fija) o
dinámicas (IP disponible al momento de la conexión pero que cambia al
desconectarse y volverse a conectar). También existen las IP privadas: es posible
tener control sobre ellas y podemos asignarlas a algún equipo de cómputo u otros
dispositivos; también se puede lograr la asignación de IP privadas de forma
automática o dinámica mediante un protocolo de configuración de servidor dinámico
(DHCP, Dyna-mic Host Configuration Protocol), lo que facilita la administración de
la red.

Por lo general, cuando accedemos a un dominio lo hacemos con el nombre de

dominio y no la dirección IP; sin embargo, el nombre de un sitio web debe ser único.
Un servidor puede atender infinidad de páginas con varios dominios, sin embargo,
un dominio sólo puede direccionar a un servidor. Esto se logra mediante la
utilización de un Servidor de Nombres de Dominio (DNS), que contiene una serie
de registros relacionados con los dominios.
SERVIDOR DE NOMBRES DE DOMINIO
(DNS, DOMAIN NAME SYSTEM)

Un servidor de nombres de dominio almacena la base de datos de los dominios y

su relación con la información a la que hacen referencia. Una de las principales
funciones de los DNS es establecer la correspondencia entre una dirección IP y su
nombre de dominio, además de establecer la liga con otros servicios que ofrezca
el propio pro-veedor. La mayoría de los proveedores de servicios de Internet tiene
su propio servidor DNS. Cuando introducimos en el navegador una URL (Uniform
Resource Locator), por ejemplo: http://www.ipn.mx, esta información es enviada y
atendida por el servidor DNS que identifica en dónde se ubica la página web
solicitada y facilita el acceso a ella.

LOCALIZADOR UNIFORME DE RECURSOS

(URL, UNIFORM RESOURCE LOCATOR)

Se utiliza para nombrar recursos en Internet y está compuesta por una cadena de
carac-teres con un formato estándar (esquema://máquina.directorio.archivo). Su
propósito es asignar una dirección única a cada uno de los recursos que se
encuentran en Internet, ya sean textos, imágenes, videos u otros. Para cada una de
las páginas de cada documento que está en la web hay una URL, que es única y
consta de tres partes: protocolo (esque-ma), dominio y ruta. El esquema se define
en la URL antes de los dos puntos. La especificación de los elementos que siguen
después de los dos puntos varía en función del esquema de que se trate y que
puede ser del tipo HTTP, HTTPS, Mailto o FTP (por ejemplo,
http://www.mipagweb.mx/Tecnologiasweb/Capítulo2).
 1.3. Estándares de diseño web (W3C).
El entorno tecnológico de los sitios web

Las empresas y organizaciones requieren estar interconectadas con su entorno en

todos los sentidos con las tecnologías que tengan a la mano. Sin lugar a duda
cuentan con Internet y el conjunto de servicios que se ofrecen en la web, pero, ¿cuál
es el impacto que tienen dentro de un mercado cada vez más globalizado?, es decir,
¿cómo hacen presencia ante sus competidores?, ¿qué pueden esperar sus
clientes?, ¿cómo realizan sus operaciones y transacciones? En otras palabras,
¿cómo es su impacto y su presencia en este mundo digital en el que nos
desenvolvemos?

Lo anterior puede llevarnos a tomar la decisión de crear un sitio que brinde

alternativas tanto para la empresa como para nuestros clientes y proveedores,
además del amplio abanico de posibilidades y alternativas que podemos encontrar
al integrar una plataforma tecnológica como las que se ofrecen en la web. La gestión
empresarial actual propone una migración hacia nuevos modelos que posicionen a
las empresas en mejores condiciones de competitividad.

Alcanzar una madurez digital empresarial implica estar al tanto de las tecnologías
de información y comunicación que las organizaciones utilizan como plataforma de
trabajo, además del posicionamiento que alcancen respecto de sus competidores.
Tener una presencia digital en el mundo de los negocios puede representar una
ventaja considerable y formar parte de la estrategia digital de la empresa. Pero,
¿cómo una empresa puede lograr esto? En primera instancia es posible pensar que
basta una buena infraestructura tecnológica con un acceso rápido a Internet y poder
enviar y recibir información de diferentes entidades, así como un rápido y fácil
acceso a las redes sociales. Sin embargo, ¿esto asegura el éxito y permanencia de
la empresa en un mercado cada vez más competitivo? Trataremos de dar respuesta
a estas interrogantes. Para ello debemos entender algunos conceptos básicos
utilizados en entornos de Internet y web (WWW, World Wide Web), red de alcance
mundial o cobertura global.
 Figura1. Entornos tecnológicos de los sitios web

Qué es el W3C (Consorcio World Wide Web)

El Consorcio World Wide Web (W3C) es una comunidad internacional de trabajo

conjun-to para el desarrollo de estándares para la web a nivel mundial. Una de sus
actividades principales es la elaboración de estándares para el Lenguaje de
Marcado de Hipertexto (HTML) y su mejoramiento, lo que dio lugar a XHTML (éste
pretende enriquecer y mejo-rar las facilidades que actualmente ofrece HTML). Entre
los objetivos de la W3C también está facilitar el acceso a Internet a cualquier
persona sin importar dónde se encuentre, eliminando cualquier barrera cultural,
ideológica o tecnológica; facilitar cualquier tipo de conectividad desde los distintos
dispositivos de acceso con que se cuente; además de cui-dar del buen uso que se
le dé a Internet. A ello deben sumarse los elementos de seguridad pertinentes, con
apego a leyes y normas legales y comerciales, así como la repercusión de los
aspectos sociales por el uso de Internet. Hoy en día, el W3C es una organización
reconocida mundialmente y está representa-da y dirigida por el inventor de la web,
Tim Berners-Lee.
 2. HTML y CSS.
¿QUÉ ES HTML, CSS Y JAVASCRIPT?
Las pantallas de un sistema web se hacen aplicando diversas herramientas, entre
las que destacan el lenguaje de marcas de hipertexto (HTML: HyperText Markup
Language), las hojas de estilo en cascada (CSS: Cascading Style Sheets) y el
lenguaje JavaScript.

En primer lugar, HTML es el lenguaje que permitirá especificar la forma en que

se visualizará la página web, basado en campos de captura, botones y tablas,
generalmente. En ésta no se emplean condicionales, ciclos u otras estructuras de
un lenguaje de alto nivel: de hecho, más que un lenguaje de programación es una
forma de especificar el despliegue de datos.

En segundo, con las hojas de estilo en cascada se describirán los aspectos

visuales, como el color o el tipo de letra. Todas las páginas se remitirán a las hojas
de estilo y así se evitarán las modificaciones página por página de un solo aspecto.

En tercero, JavaScript tradicionalmente se empleaba para hacer validaciones en la

pantalla (por ejemplo, si se llenaban todos los campos necesarios), así como para
realizar cálculos y formar páginas más interactivas, todo del lado del cliente.
Actualmente, la mayoría de las validaciones se hacen desde HTML, mientras las
otras funciones se realizan en JavaScript.

VERSIONES DEL HTML

a) HTML 1.0. Versión inicial en 1991.
b) HTML 2.0. Publicada en 1995, colocó el primer estándar simple.
c) HTML 3.2. Primera recomendación oficial de la W3C, lanzada en 1997.
d) HTML 4.01. Incorporó las hojas de estilo, de 1999. Existen tres variantes:
1. Strict. No acepta etiquetas de versiones anteriores.
2. Transactional. Acepta etiquetas de cualquier versión.
3. Frameset. Admite el uso de frames, muy utilizados antes para dividir
panta-llas y hoy prácticamente en desuso.
 e) HTML 5.0. Última versión hasta.

HTML es un estándar para el ámbito mundial que debe admitir todo tipo de
caracteres, incluidos los acentos de los idiomas francés y español, así como signos
de idiomas de Oriente. La especificación UTF-8 es uno de los estándares admitidos
internacionalmente para representación de caracteres y el más empleado para
páginas web, usa símbolos de longitud variable que ocupan entre uno a cuatro
bytes.

Emplear UTF-8 nos da la enorme ventaja de representar caracteres que se

reconocerán en cualquier navegador, para lo cual hay que especificar de manera
especial los que no están entre los primeros 127 caracteres del código ASCII. De
hecho, en este ASCII se dejó fuera a los acentos, la eñe y los caracteres de
admiración e interrogación que abren y cierran una oración; para esto se recurre a
la notación avalada para los propios estándares, aunque hay sitios de internet en
los que se sintetiza de manera muy práctica, como
http://www.virtualnauta.com/html-guia-de-referencia-caracteres-especiales. Si se
revisa la guía se notará que la “ó” se representa con ó y la “í” con í

Tabla 1. Símbolos fuera del ASCII de 7 bits más comunes en el idioma español
 2.1. Estructura básica de las web: html, head, body.

La estructura básica de un documento html es:

<html>
<head>
<title></title>
</head>
<body>

Aquí se colocaran diversas etiquetas que van a ser posible la visualización de la

página.

</body>
</html>

<html> Etiqueta que indica el comienzo del documento.

<head> Etiqueta que indica el comienzo del encabezamiento.
<title> Etiqueta que indica el título de la página
</title> Etiqueta el fin del título de la página
</head> Etiqueta que indica el final del encabezamiento
<body> Etiqueta que indica el comienzo del cuerpo
Aquí se colocaran diversas etiquetas que van a ser posible la visualización de la
página.

</body> Etiqueta que indica la finalización del cuerpo

</html> Etiqueta que indica la finalización del documento HTML.

Tipos de etiquetas existentes en BODY

 Etiquetas para definir estilos y efectos básicos
 Tablas
 Listas
 Saltos de línea
 Estilo y tipo de letra
 Texto

<head>
El elemento HTML <head> provee información general (metadatos) acerca del
documento, incluyendo su título y enlaces a scripts y hojas de estilos.

<title>

Indica el título del documento.

Sus etiquetas son: <title> y </title> (ambas obligatorias)

Crea una caja:

Está definido como: Elemento de contenido de cabecera.

Puede contener: texto y entidades de caracteres, pero no puede contener código.

<body>
El Elemento HTML <body> representa el contenido de un documento HTML. Sólo
puede haber un elemento <body> en un documento.

Nombre de los archivos html

2.2. Elementos básicos: Títulos, párrafos, imágenes,
hipervínculos, videos.
2.3. Maquetación web: Tablas, divs, clases, menús.
2.4. Estilos básicos: Tamaño, colores, fuentes.
2.5. Diseño y usabilidad: Márgenes y posiciones de los
elementos.

3. Diseño de la página web usando software de

aplicación.

4. Publicar sitio web.