CARRERA DE COMPUTACIN

SEMESTRE SEXTO

PERODO SEP/2016 - MAR/2017

PROGRAMACIN WEB

TEMA:
CREACION DE UNA PAGINA WEB EN HTML5

AUTORES:
FROWEN A. LOPEZ ALAVA
SERVIO G. PACHARD VELEZ
JUAN C. RIVAS
FACILITADOR:
ING. DAVID PEARRIETA BRAVO
CALCETA, NOVIEMBRE/ 2016

INDICE
INTRODUCCIN..................................................................................................3
OBJETIVOS..........................................................................................................4
OBJETIVO GENERAL......................................................................................4
OBJETIVOS ESPECIFICOS.............................................................................4
CAPITULO I. MARCO TERICO.........................................................................5
1.1.

ACCESIBILIDAD WEB............................................................................5

1.2.

HTML 5....................................................................................................5

1.2.1.
1.3.

DISEO SEMANTICO DE HTML5...................................................6

BOOTSTRAP..........................................................................................7

1.3.1.

VENTAJAS........................................................................................9

1.3.2.

DESVENTAJAS................................................................................9

1.4.

CSS.......................................................................................................10

1.5.

JAVA SCRIPT........................................................................................10

CONCLUSIONES...............................................................................................12
BIBLIOGRAFA...................................................................................................13
ANEXOS.............................................................................................................14
ANEXO DE LA PGINA..................................................................................14
ANEXO DE LA DIAPOSITIVA.........................................................................16

INTRODUCCIN
En un principio el World Wide Web (WWW) fue un medio basado
principalmente en texto que utilizaba la comunidad cientfica, pero en poco
tiempo comenz a utilizarse como plataforma comercial y el diseo y las
representaciones grficas fueron adquiriendo cada vez mayor importancia. Este
proceso de crecimiento no se produjo de forma ordenada, los diseadores y
programadores no seguan pautas comunes, lo cual dio lugar a diferentes
problemas de uso y acceso a la red para muchas personas.
Con el objetivo de asegurar el correcto crecimiento de la red a largo plazo, en
1994 se cre el consorcio internacional World Wide Web (W3C) que trabaja
conjuntamente en el desarrollo de estndares web que sirvan de gua a
desarrolladores y diseadores. Dentro del mismo surgi la Web Accessibility
Initiative (WAI), que ofrece normas y recomendaciones para garantizar la
accesibilidad en la Web. Segn se define en el propio W3C, la accesibilidad es
el acceso de todos a la Web, independientemente del tipo de hardware,
software, infraestructura de red, idioma, cultura, localizacin geogrfica, y
capacidades de los usuarios.
En este sentido, en la Convencin de los Derechos de las Personas con
Discapacidad de las Naciones Unidas se habla de la necesidad de garantizar a
las

personas

con

discapacidad

el

acceso

la

informacin

las

comunicaciones, en igualdad de condiciones, incluida la informacin y

tecnologas de comunicacin y sistemas.
La accesibilidad se convierte por tanto en algo indispensable, adems de que
una pgina web tenga un diseo de interfaz atractivo, su contenido debe ser
accesible para cualquier tipo de persona. En este momento el acceso universal
es todava una utopa y muchos usuarios encuentran diferentes barreras a la
hora de acceder a la web y a los servicios que ofrece.

OBJETIVOS
OBJETIVO GENERAL
Crear una pgina web esttica accesible mediante el uso del lenguaje de
etiquetas HTML5

OBJETIVOS ESPECIFICOS

Investigar acerca de las diferentes etiquetas y estilos que dan

accesibilidad a un sitio web.

Verificar el correcto funcionamiento del sitio web esttico.

CAPITULO I. MARCO TERICO

1.1.

ACCESIBILIDAD WEB

La accesibilidad web tiene como objetivo lograr que las pginas web sean
utilizables por el mximo nmero de personas, independientemente de sus
conocimientos o capacidades personales e independientemente de las
caractersticas tcnicas del equipo utilizado para acceder a la Web. La
necesidad de que la Web sea universal y accesible por cualquier persona est
presente desde el principio de la Web, ya que era un requisito contemplado en
su diseo por su creador.
El poder de la Web est en su universalidad. El acceso por cualquier persona,
independientemente de la discapacidad que presente es un aspecto esencial.Tim Berners.
En la actualidad, no existe una definicin formal y totalmente aceptada del
concepto de accesibilidad web.
Adems, tambin existen una serie de mitos sobre la accesibilidad web que
perduran desde hace aos. Estos mitos se pueden resumir en que la
accesibilidad web es cara y supone un coste extra en el desarrollo de un sitio
web, sin que los beneficios sean importantes. Adems, otro de los mitos que
perdura es creer que la accesibilidad web slo beneficia a las personas con
discapacidad. Los beneficiarios de la accesibilidad web son todo el mundo.
Para lograr la accesibilidad, se han desarrollado diferentes pautas o guas que
explican cmo se tienen que crear las pginas web para que sean accesibles.

1.2.

HTML 5.

HTML5 es la nueva versin del lenguaje de marcado que se usa para

estructurar pginas web, actualmente en desarrollo, que surge como una
evolucin lgica de las especificaciones anteriores con los siguientes objetivos:
separar totalmente la informacin, y la forma de presentarla, resumir, simplificar

y hacer ms sencillo el cdigo utilizado, incorporar nuevas etiquetas

semnticas, pginas compatibles con todos los navegadores web incluyendo
los de los telfonos mviles y otros dispositivos utilizados en la actualidad para
navegar en Internet.
En definitiva representa un importante paso adelante hacia el "diseo
universal", es decir, diseo que puedan utilizar todas las personas, en la mayor
medida posible, sin necesidad de adaptacin ni diseo especializado.
1.2.1. DISEO SEMANTICO DE HTML5
Las nuevas etiquetas se crean para remplazar el abuso de elementos <div>
que habitualmente se utilizan con el fin de delimitar las partes de un
documento. Con su utilizacin, HTML5 pretende crear una estructura de vistas
ms homogeneizada y que el manejo de metadata sea ms adecuado. Se trata
de llegar a lo que se ha dado en denominar la web semntica, siendo la
presentacin de documentos mucho ms coherente y fcil de entender por
otras personas y lo que es ms importante, siendo trivial de entender para una
mquina. Concretamente, la tarea de un buscador ser mucho ms fcil, pero
tambin lo ser para cualquier aplicacin que lea pginas web.

1.2.1.1.

NUEVAS ETIQUETAS ESTRUCTURALES

HTML5 incorpora nuevas etiquetas para estructurar pginas web. Estos

elementos, denominados generalmente elementos semnticos sirven para
dividir un documento en partes lgicas, indicando el tipo de contenido que se
incluye en cada parte, representan por tanto secciones lgicas o componentes
de una aplicacin web o un documento: <header>, <articule>, <nav>,
<section>, <footer>.
<header>, representa el encabezado de un documento o de una seccin de un
documento. El uso ms comn de esta etiqueta es agrupar los elementos del
encabezado principal de una pgina (logo, ttulo, navegacin principal).
<nav>, ste elemento proporciona una forma de especificar de forma explcita
los elementos de navegacin en las pginas. No todos los grupos de enlaces

en una pgina tienen que estar incluidos en ste elemento, slo las secciones
que consisten en bloques principales de la navegacin son apropiadas para su
utilizacin.
<article>, se aplica al contenido de un sitio web que puede ser publicado o
distribuido de forma independiente, como entradas en blogs o artculos de
noticias. As, podramos tener varios artculos demarcados semnticamente,
por lo que una herramienta puede extraerlos fcilmente.
<section>, engloba a un bloque de contenido relacionado, por lo que
representa a una seccin general dentro de un documento o aplicacin, como
un captulo de un libro. Puede contener subsecciones y si lo acompaamos de
h1-h6 podemos estructurar mejor toda la pgina. Para agrupar contenidos que
no estn relacionados, con el objetivo de darles estilo, hay que seguir utilizando
el elemento <div>.
<aside>, representa contenido secundario relacionado con el contenido
principal de un documento y resulta esencial para delimitar el contenido
importante del contenido de apoyo. Se utiliza para bloques publicitarios,
enlaces externos, citas, calendario de eventos, etc, u otros contenidos que se
consideren separados del contenido principal de la pgina.
<footer>, representa el pie de pgina de un documento o de una parte del
documento. Est pensado para incluir la informacin que normalmente se
coloca al final de un contenido, como el nombre del autor, enlaces relacionados
o derechos de autor.

1.3.

BOOTSTRAP

Bootstrap, es un framework originalmente creado por Twitter, que permite crear

interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la
interfaz del sitio web al tamao del dispositivo en que se visualice. Es decir, el
sitio web se adapta automticamente al tamao de una PC, una Tablet u otro
dispositivo. Esta tcnica de diseo y desarrollo se conoce como responsive
design o diseo adaptativo.

El beneficio de usar responsive design en un sitio web, es principalmente que

el sitio web se adapta automticamente al dispositivo desde donde se acceda.
Lo que se usa con ms frecuencia, y que a mi opinin personal me gusta ms,
es el uso de media queries, que es un mdulo de CSS3 que permite la
representacin de contenido para adaptarse a condiciones como la resolucin
de la pantalla y si trabajs las dimensiones de tu contenido en porcentajes,
puedes tener una web muy fluida capaz de adaptarse a casi cualquier tamao
de forma automtica.
Pero si no quieres nada que ver con los media queries, otra muy buena opcin
es el uso del framework de Bootstrap, que como te dije te ayudar a desarrollar
tus sitios adaptativos.
Aun ofreciendo todas las posibilidades que ofrece Bootstrap a la hora de crear
interfaces web, los diseos creados con Bootstrap son simples, limpios e
intuitivos, esto les da agilidad a la hora de cargar y al adaptarse a otros
dispositivos. El Framework trae varios elementos con estilos predefinidos
fciles de configurar: Botones, Mens desplegables, Formularios incluyendo
todos sus elementos e integracin jQuery para ofrecer ventanas y tooltips
dinmicos.
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3,
pero es compatible con la mayora de los navegadores web. La informacin
bsica de compatibilidad de sitios web o aplicaciones est disponible para
todos los dispositivos y navegadores. Existe un concepto de compatibilidad
parcial que hace disponible la informacin bsica de un sitio web para todos los
dispositivos y navegadores. Por ejemplo, las propiedades introducidas en
CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por
Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto
extiende la funcionalidad de la herramienta, pero no es requerida para su uso.
Desde la versin 2.0 tambin soporta diseos sensibles. Esto significa que el
diseo grfico de la pgina se ajusta dinmicamente, tomando en cuenta las

caractersticas del dispositivo usado (Computadoras, tabletas, telfonos

mviles).
1.3.1. VENTAJAS

Como muchos frameworks la rapidez por la cantidad de trabajo que est

hecho y muchos componentes que necesitamos normalmente estn

desarrollados previamente.
Una gran comunidad de desarrolladores en Git hub para dar soporte, por
lo que hacen a Bootstrap un entorno de trabajo ms robusto que otros

frameworks.
La integracin de Html5 y css3 lo cul lo hace muy poderoso y por tanto
mucho ms ligero de cara a los navegadores, esto se traduce en una

ventaja respecto al SEO de las pginas realizadas con bootstrap.

Integra 12 libreras de Jquery muy completas aunque se pueden aadir

ms.
Sistema de Grid de 12 columnas tanto en px como en % para webs
responsive.

1.3.2. DESVENTAJAS

Bootstrap tiene la ventaja y el inconveniente de cualquier framework

aprender a usarlo y adaptarte a sus caractersticas y limitaciones.

Adaptarte a su modelo de grid a la hora de disear con 12 columnas y
probar como quedan en algunos dispositivos los medianiles del grid o

Gutters.
Si aades elementos externos debes aplicarles estilos porque no hace

como wordpress que aplica los estilos automticamente.

Debes elegir que mdulos instalar porque si instalas todo puede ser

demasiado cdigo, as que una buena limpieza no le viene mal.

Cuando se trabaja en equipo todos los componentes del equipo deben
tener nociones de Bootstrap, incluso crear una gua sobre la instalacin
de cada proyecto en particular, porque si ms tarde hay que hacer
cambios puede ser bastante complicado si no se conoce el mtodo que
se ha seguido al desarrollar.

1.4.

CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o

presentacin de los documentos electrnicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentacin y es
imprescindible para crear pginas web complejas. Separar la definicin de los
contenidos y la definicin de su aspecto presenta numerosas ventajas, ya que
obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (tambin llamados "documentos semnticos"). Adems, mejora la
accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML
para marcar los es decir, para designar la funcin de cada elemento dentro de
la pgina: prrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el
aspecto de cada elemento: color, tamao y tipo de letra del texto, separacin
horizontal y vertical entre elementos, posicin de cada elemento dentro de la
pgina, etc.

1.5.

JAVA SCRIPT

JavaScript es un sencillo lenguaje de programacin, que presenta una

caracterstica especial: sus programas, llamados comnmente scripts, en las
pginas HTML y se ejecutan en el navegador (Mozilla Firefox, Microsoft Internet
Explorer, etc). Estos scripts normalmente consisten en unas funciones que son
llamadas desde el propio HTML cuando algn evento sucede. De ese modo,
podemos aadir efectos como que un botn cambie de forma al pasar el ratn
por encima, o abrir una ventana nueva al pulsar en un enlace.
JavaScript fue desarrollado por Netscape, a partir del lenguaje Java, el cual
sigue una filosofa similar, aunque va ms all. Java es un lenguaje de
programacin por s mismo, como lo puedan ser C, Pascal o VisualBasic. Esto
quiere decir, que se puede ejecutar un programa Java fuera de un navegador.

Pero, repetimos, que la diferencia fundamental es que Java es un lenguaje

completo, que puede ser utilizado para crear aplicaciones de todo tipo,
mientras que JavaScript slo funciona dentro de una pgina.
JavaScript

fue

declarado

como

estndar

del

European

Computer

Manufacturers' Association (ECMA) en 1997, y poco despus tambin fue

estandarizado por ISO. Sin embargo, la estructura de objetos que
implementaban los diferentes navegadores (Netscape y Explorer en aquellos
momentos) no se ajustaba al estndar, lo que provocaba numerosos problemas
de compatibilidad. Para solventarlos el W3C public un nuevo modelo de
objetos, DOM (Document Object Model), que incorporan la mayora de
navegadores actuales como Explorer o Firefox.

CONCLUSIONES

El diseo de una pgina web no solo tiene como cometido presentar

buenos contenidos en una presentacin bella, tambin debe hacer que
dichos contenidos sean fcilmente accesibles por el pblico que la visita,
una buena navegabilidad puede ser la diferencia entre tener usuarios
frecuentes o no, es posible que una persona, en el afn de obtener
ciertos contenidos, soporte algunas peripecias en la web, lo que
seguramente no lograremos con una mala navegabilidad es que este
usuario desee volver a este sitio.

Aunque s que es cierto q en la actualidad la mayora de las pginas web

no se preocupan por ser accesibles en los ltimos aos hemos visto un
gran avance en este sentido ya que cada da ms desarrolladores y
creadores de portales y sitios web se preocupar por a hacer de su
trabajo no simplemente algo bonito sino algo al cual las personas
puedan sin importar sus capacidades humanas ni el equipo por el cual
acceden al sitio web.

BIBLIOGRAFA
Dias F. 2011. Accesibilidad Web abierta a la comunidad. (En lnea). Consultado
el 22 de noviembre del 2016. Formato PDF. Disponible en
sedici.unlp.edu.ar/bitstream/handle/10915/18702/Documento_completo
.pdf
Fernndez A. 2010. Estructura de pginas web. (En lnea). Consultado el 22 de
noviembre del 2016. Formato HTML. Disponible en
http://www.lawebera.es/diseno-web/estructura-paginas-web-marcadosemantico-contenidos.php

Gauchat J. 2012. El gran libro de HTML5, CSS3 y Javascript. (En lnea).

Consultado el 24 de noviembre del 2016. Formato PDF. Disponible en
https://books.google.es/books?
hl=es&lr=&id=szDMlRzwzuUC&oi=fnd&pg=PA1&dq=html5&ots=0AtE
XXqDOi&sig=ncqRprpFQIUFXacjXhD7AJTx29k

Lujn S. 2012. Accesibilidad Web. (En lnea). Consultado el 22 de noviembre

del 2016. Formato HTML. Disponible en
http://accesibilidadweb.dlsi.ua.es/

Martinez J. 2012. Creacin de pginas Web accesibles con HTML5. (En lnea).
Consultado el 22 de noviembre del 2016. Formato PDF. Disponible en
http://www.esvial.org/wp-content/files/Atica2012_pp120-129.pdf

ANEXOS
ANEXO DE LA PGINA

Figura 1. Inicio de la pgina.

Figura 2. Acerca de la pgina.

Figura 3. Galera de productos.

Figura 4. Galera de productos.

Figura 5. Contacto y pie de la pgina.

ANEXO DE LA DIAPOSITIVA