1

DISEO WEB
INTRODUCCION
World Wide Web (WWW)Inventada por Tim Berners Lee en 1989 mientras trabajaba en European
Organization for Nuclear Research (CERN).

La WWW es una combinacin de 4 ideas bsicas:
1.- Hipertexto: Habilidad de navegar desde un documento a otro a travs de conexiones ----
hiperenlaces.

2.- Identificadores de Recursos: Permite encontrar un recurso particular (un documento, imagen) en la
red a travs de dicho identificador Uniform Resource Identifier(URI), Uniform Resource Locator(URL).

3.- Modelo cliente servidor: Un cliente software demanda servicios o recursos a un servidor software.

4.- Un lenguaje de marcado o Etiquetas(HTML): Adems de texto incluyen conjuntos de caracteres
especiales que indican al navegador como presentar dicho texto----HTML conocido como lenguaje de
etiquetas.

Definiciones importantes:
1.- Pagina Web:
Una pgina web, tambin conocida como una pgina de internet, es un documento electrnico adaptado
para la web, pero normalmente forma parte de un sitio web. una pgina web est compuesta
principalmente por informacin (slo texto o mdulos multimedia) ejemplo: www.facebook.com
www.youtube.es
2.- Sitio Web:
Un sitio Web es un conjunto de pginas Web, tpicamente comunes a un dominio de Internet o
subdominio en la World Wide Web en Internet. Espacio documental organizado que la mayora de las
veces est tpicamente dedicado a algn tema particular o propsito especfico. Ejemplo:
http://www.sitiosargentina.com.ar/ http://www.amazon.com/
3.- Portal Web:
Sitio Web que, por su gran cantidad de informacin, enlaces y servicios, puede satisfacer las necesidades
de cualquier internauta. En general los portales ofrecen servicios como: directorios, servicio de provisin
de correo electrnico, buscador para su sitio, noticias generales, chats, grupos de noticias, etc.
Ejemplo: Yahoo, MSN, Portal Argentina, Portal Agrcola, Portal Trenque Lauquen.
10 poderosos Consejos para un buen Diseo Web

2

El diseo de un sitio web para la promocin de los productos y servicios Web requiere de un conjunto de
estrategias diseados para que el sitio sea vendedor y exitoso y logre la misin de un emprendedor o
una pyme en la red que es vender y para ello debe conseguir ms oportunidades de hacer negocios en
Internet. Es por esto que atrapar y despertar el inters del usuario desde un primer momento, es vital
para un negocio en la red, despus de todo la puerta de salida solo est al alcance de un clic de ratn,
aqu tienes 10 consejos que sin duda te ayudarn a conseguirlo:
1.- Tu pgina tiene que cargar rpido Tan solo tienes 10 preciosos y escasos segundos para despertar su
inters antes de que se marchen. Tus visitantes y probablemente tu tampoco esperaras 30, 40, ni 50
segundos hasta que el sitio cargue, en Internet el tiempo pesa y mucho, cuando navegamos en la red se
pierde la paciencia rpidamente, as que lo mejor es asegurarse que tus paginas sean grficamente
ligeras para que no convierta tu sitio web para la paciencia de tus prospectos en un sitio "pesado".
2.- Despierta su Inters dndole lo que est buscando Tu Prospecto antes de comprar va primero que
todo en busca de informacin, el "Que Hay Aqu Para Mi", dales precisamente eso informacin, pero no
cualquier informacin dales contenido que no pueda conseguir en tu competencia, es por eso que tus
contenidos no pueden ser ms de lo mismo que tienen los dems, debes enfocarlo desde un punto de
vista novedoso, que lo haga fresco y original. De esta manera sentirn que tu sitio tiene eso que estn
buscando y que solo t puedes ofrecerle.
3.- Pon a la vista lo que ofreces Ensales claramente y desde un primer momento los productos o
servicios que vendes, si tus prospectos no estn seguros de que va tu sitio web, se confundirn se
marcharan y es muy poco probables que les recuperes.
4.- Atrpalo con un ttulo poderoso Si pones un ttulo que llame poderosamente su atencin, atraers
su inters por ver que es lo que tienes para l, y permanecer mas tiempo lo que aumenta la posibilidad
de que puedas venderle tus productos o servicios.
5.- Da para recibir Quieres que tus Prospectos se Suscriban a tu Boletn?, entonces ofrceles contenido
gratis y relevante, es la mejor manera de ganarte su confianza, la confianza es un paso previo muy
importante antes de que decidan comprar tus productos o servicios. Posterior a la suscripcin tambin
puedes enviarle informacin peridicamente, bien sea cursos, seminarios e incluso software gratis que
apoye y le sirva como una herramienta de complemento a la informacin relevante de su inters.
6.- Diseo sencillo pero Elegante Un sitio web sencillo no tiene por que ser poco atractivo, al contrario
de los que mucha gente piensa, los sitios web que ms oportunidades de negocios tiene y que mas
venden actualmente en la red son precisamente aquellos que son sencillos pero elegantes. Muy
importante sin errores gramaticales, un lugar con errores ortogrficos denota poca profesionalidad y

3

genera rechazo y desconfianza en los usuarios. No debe tener colores de fondo chillones, debe ser
agradable a la vista y sus textos con un tamao adecuado y fcil de leer para todo el mundo.
7.- Ponle un mapa a tu sitio Si tu sitio web es muy grande lo mejor es tener un mapa del sitio para
facilitarle conseguir a tus usuarios lo que estn buscando.
8.- Informacin Bsica Siempre, hay que incluir el nombre, la direccin, y telfonos en nuestro sitio web.
Resulta asombrosa la cantidad de negocios que circulan por la red que dan la impresin de estar
hurfanos o acfalos, carecen de informacin bsica del responsable, lo cual genera sin duda
desconfianza y poca credibilidad para el usuario, tambin hay que un e-mail de contacto de ser posible
en todas y cada una de las pginas que componen el sitio.
9.- FAQs (Preguntas Frecuentes) Si tienes que responder a las mismas preguntas una y otra vez, lo mejor
es hacer una pgina con las respuestas a esas preguntas frecuentes, tus visitantes solo tienen que
consultarlas para despejar rpidamente sus dudas relacionadas con tus productos o servicios.
10.- Ofrceles un Glosario de Trminos Una excelente manera de que tus prospectos vuelvan una y otra
vez a tu negocio es poner a su disposicin, un glosario de trminos con la informacin que necesitan,
volvern una y otra vez a consultar sus dudas y tendrs ms posibilidades de ofrecerles tus productos o
servicios.
Conclusin El sitio web debe estar diseado para atrapar y despertar el inters del usuario desde un
primer momento, y de esta manera el prospecto pase el mayor tiempo posible dentro del sitio web, de
cara a que logres que pueda ver tus productos o servicios, y antes de que piense que lo que esta
buscando esta en otra parte y se marche.
HTML5
Qu es HTML5?
En los ltimos aos, las tecnologas para el diseo y la programacin web han avanzado mucho, pero los
esfuerzos se han centrado en potenciar el uso de AJAX. El lenguaje de etiquetas HTML, sin embargo,
permaneca sin cambios desde su ltima revisin en 1999, quedando obsoleto en muchos aspectos.
Entonces, en 2004, los principales desarrolladores de navegadores (Apple, Opera y Mozilla) iniciaron una
colaboracin para crear aplicaciones web, el WHATWG. Como no poda ser de otra manera el W3C se
uni a la iniciativa en 2006, cuando empezaron a desarrollar la nueva versin. En 2009 nace por fin
HTML5.
Las necesidades actuales estn en la lnea de hacer que la experiencia de navegacin sea ms interactiva,
que las pginas estn realmente enfocadas al usuario.

4

HTML 5 ofrece muchas posibilidades que permiten convertir una pgina web en una aplicacin web. Por
ello no es de extraar que se refieran a esta versin como a la versin de Aplicaciones web 1.0.
Las nuevas etiquetas HTML de esta versin estn muy enfocadas, adems, a lograr una web semntica.
Al etiquetar cada elemento de modo que quede perfectamente descrita su naturaleza, su contenido y la
relacin que guarda con el resto de elementos, facilitamos que se puedan tratar sus datos de un modo
ms automatizado. Veamos un ejemplo para entenderlo mejor: Si existe una etiqueta llamada <article>
que contiene artculos de webs y blogs, es ms sencillo crear un sitio web que se dedique a filtrar y
mostrar clasificados los artculos de otras pginas en funcin de sus contenidos, porque le resultar ms
fcil identificarlos como tales.
Es difcil aprender HTML 5?
En realidad no. La forma de trabajar es la misma que con anteriores versiones, el uso de las etiquetas y
atributos es idntico, y muchas de las etiquetas se mantienen. Eso s, hay que adaptarse. Para sacarle el
mximo jugo hay que manejar tanto HTML, como CSS y JavaScript. Si controlas estos tres lenguajes,
adaptarte te resultar sencillo.

Cmo afectar esto a mi sitio web?
Puedes decidir utilizar estas novedades, o seguir haciendo las cosas como las hacas hasta ahora, eso es
una decisin que debers valorar teniendo en cuenta el esfuerzo que te supondra actualizarte. Debes
tener en cuenta que puedes introducir elementos de HTML 5 en tu pgina, conviviendo con elementos
de versiones anteriores. Lo que s que te recomendamos es que empieces a incorporar algunas de las
etiquetas que ayudan a definir los elementos de la pgina, ya que en el futuro cada vez ms aplicaciones
y buscadores se valdrn de estas etiquetas; utilizarlas favorecer tu posicionamiento y el acceso a tus
contenidos.
Cuando hablamos de cambios no podemos dejar de mencionar los problemas que pueden ocasionar. En
este caso el principal problema es que an se est definiendo el lenguaje. Al no encontrarse
estandarizado los navegadores an no soportan al 100% sus novedades. Por lo tanto, antes de decidir
implementar algo, es aconsejable que te informes de si esto generar problemas de compatibilidades.
Desde luego, es cuestin de tiempo que el lenguaje se convierta en un estndar y los navegadores
permitan todas sus funciones, como tambin lo es que los usuarios tomen consciencia de que deben
mantener sus navegadores actualizados para disfrutar de todos los contenidos que la web les ofrece.

5

Como ejemplo puedes probar el divertido logo de Google en conmemoracin a Les Paul. Est creado
ntegramente utilizando estas tecnologas, algo que, hasta hace poco, habra sido impensable crear sin el
uso de flash o java.
Observa que dependiendo de la cuerda que rasgues sonar una nota u otra. Puedes pulsar el botn de
grabacin y se guardar la meloda que intrpretes. Al detener la grabacin, Google te proporciona un
enlace corto que te permitir compartir dicha grabacin con los dems. Si no funciona en tu navegador
puedes actualizarlo.
En eso se resume HTML 5: permite la interaccin del usuario y proporciona una experiencia muy similar
a la que se obtendra con una aplicacin de escritorio, pero sin necesidad de instalaciones.
Por qu es importante HTML5?
Hace aos hablbamos de la Web 2.0. No se invent nada nuevo y cuando Tim Oreilly acu el trmino
identific un cambio en el mercado, otro tipo de internet que se adapta al cambio de los tiempos y a
muchos nuevos perfiles que habitan en el mundo digital.
Por suerte no fue slo un cambio de dgitos y el marketing no fue suficiente para que se llenaran la boca
de Web 3.0 o Web semntica. All no se identificaba nada y la frmula no funcion del todo.
Por eso quiero hablarles de HTML5. La magia de esta unin de tecnologas agrupada en un solo trmino
no es inventar nada nuevo, sino unir esfuerzos que por primera vez tienen a toda la industria empujando
hacia una direccin y que identifican un cambio que ya sucedi en como debemos hacer la web hoy
mismo.
HTML5 es el presente de la web y si no ests asimilando lo que est pasando ya eres parte de
la vieja generacin de desarrolladores. Eso tendra que tenerte preocupado.
Entender HTML5 es entender que hoy nos conectamos desde telfonos mviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters y hoy
hablamos de equipos multidiciplinarios de empresas de tecnologa que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de informacin en los proyectos
que estn reiventando mercados y generando trfico e ingresos.
Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnolgicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en cdigo en el
navegador ms cercano a tu pantalla. Es una de sus ms importantes estrategias de posicionamiento y es
una de sus ms fuertes apuestas de reclutamiento.
Novedades

6

La forma en que se crean pginas web ha cambiado, y ha cambiado para adaptarse a la filosofa que
surgi con la aparicin de la web 2.0. Para entender mejor estas tendencias y lo que suponen vamos a
analizar los cambios que se han aplicado.
Las reglas bsicas que se plantearon a la hora de actualizar a HTML 5 fueron:
Basarse en HTML, CSS, DOM y Javascript.
Reducir la necesidad del uso de plugins, como por ejemplo flash.
Mejorar el tratamiento de errores.
Crear etiquetas que reemplacen el uso de scripts.
Lenguaje que pueda utilizarse en cualquier tipo de dispositivo, como mviles, PDA's, etc.
Introduccin y las Nuevas Etiquetas de HTML5
HTML5 es la actualizacin de HTML, el lenguaje en el que es creada la web. HTML5 tambin es un
trmino de marketing para agrupar las nuevas tecnologas de desarrollo de aplicaciones web:
HTML5, CSS3 y nuevas capacidades de JavaScript.
La versin anterior y ms usada de HTML, HTML4, carece de caractersticas necesarias para la
creacin de aplicaciones modernas basadas en un navegador. El uso fuerte de JavaScript ha
ayudado a mejorar esto, gracias a frameworks como jQuery, Sproutcore, entre otros.
Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que superaran
las habilidades de un navegador: Audio, video, webcams, micrfonos, datos binarios, animaciones
vectoriales, componentes de interfaz complejos, entre muchas otras cosas. Ahora HTML5 es capaz
de hacer esto sin necesidad de plugins y con una gran compatibilidad entre navegadores.
Nuevas etiquetas de HTML5
HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo que tienes en HTML normal
seguir funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo nico que tienes que
hacer es colocar este DOCTYPE antes de la etiqueta <html>:
<!DOCTYPE html>
Es un DOCTYPE mucho ms simplificado que XHTML5 (cuyas reglas siguen siendo usadas) y te
permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes programado deje de
funcionar.
Las principales etiquetas HTML5 nuevas no tienen una representacin especial en pantalla. Todas
se comportan como un <div> o un <span>. Pero cada una tiene un significado semntico superior a
un simple div o span.


7

<header>
Hacer cosas como <div id=header> es un poco estpido cuando el 99% de los proyectos web
tienen una cabecera. <header> est diseada para reemplazar la necesidad de crear divs sin signifi-
cado semntico.
<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un ttulo y un tagline explicando
el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo
usar otro h1 en el sitio.
En el HTML actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> est diseado para que ah coloques la botonera de navegacin
principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde estn todos los
posts. En un video de youtube, habra un section para el video, uno para los datos del video, otro
para la zona de comentarios.
<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post sera un article.
En un post del blog, el post y cada uno de sus comentarios sera un <article>.
<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en un aside. En
un blog, obviamente el aside es la barra lateral de informacin. En el home de un peridico, puede
ser el rea de indicadores econmicos.

<footer>
Este es obvio. Es el pie de pgina y todo lo que lo compone.
Atencin <div> no est muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando
necesites una caja con objetivos de diseo grfico o cualquier cosa que no tenga significado
semntico. Slo usa las etiquetas semnticas de HTML5 donde sean necesarias.
Ejemplo de blog hecho con HTML5
<header>
<hgroup>
<h1>El blog de mlw.io</h1>

8

<h2>Este es el blog de III Tcnico IBBS</h2>
</hgroup>
</header>
<nav>
Aqu va la botonera de navegacin
</nav>
<section>
<article>Aqu va un post, con su titulo en h2</article>
<article>Aqu va un post, con su titulo en h2</article>
<article>Aqu va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, amenazas de copyright, etc.
</footer>
Las etiquetas nuevas importantes de HTML5
Las etiquetas semnticas, a pesar de ser claves para posicionamiento en buscadores y buen
desarrollo web, no son la razn por la que todo el mundo habla de HTML5. Video, audio y animacin
vectorial estn en la lista de prioridades y en la boca de todas las personas que evangelizan su uso.
Especficamente, las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada navegador soporta codecs
diferentes de video, lo que hace necesario recodificar un video en mltiples codecs. En un futuro
captulo hablamos un poco del drama que este tag est generando.
<audio>
Lo mismo que video, pero sin video. Puede usar mltiples formatos, en especial mp3, pero tambin
depende del navegador.
<input *>
Input ya exista como la etiqueta para insertar cajas de texto y botones. Ahora es ms poderosa, con
la capacidad de insertar cajas tipo email que se autovalidan, calendarios tipo date, sliders,
nmeros, entre otras.
<canvas>
Un rea de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
Canvas es el sustituto de flash.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash.

9


COMPARACION ENTRE HTML Y HTML5 CON RESPECTO A LA ESTRUCTURA DEL CODIGO

Encabezado <header>
Pie <footer>
Zona de navegacin <nav>
Secciones de la pgina <section>
Artculos <article>
Informacin que sale del flujo normal del contenido, como definiciones o aclaraciones, ampliacin
de la informacin...<aside>
Estas nuevas etiquetas proporcionan soluciones ante demandas existentes. Esto no quiere decir que
deje de emplearse <div>, sino que deja de ser imprescindible para maquetar.