1

DISEO WEB
DISEO WEB

Definiciones y maquetacin
Objetivo
Conocer definiciones de diseo web flexible, maquetacin, HTML5 Y CSS3
Entender la estructura html5 y CSS3

Qu es Responsive Design?
Una pgina web Responsive Design es una pgina web que detecta el tamao de pantalla del
dispositivo mediante el cual est siendo visualizada y adapta el diseo web para una lectura
ptima.

Por qu es tan importante?

Porque cada vez ms usuarios se conectan a internet desde tablets y smartphones. Se calcula
que para 2015 los usuarios se conectarn ms desde tablets y smartphones que desde PC de
escritorio.
Una pgina web que no est optimizada para tablets y smartphones es ms dificil de leer. El
usuario debe hacer zoom para ampliar el texto, y muchos elementos quedan fuera de la pantalla.

DISEO WEB
En cambio una pgina con diseo web Responsive Design mostrar los textos y fotos
perfectamente adaptados para una cmoda lectura. Incluso se pueden mostrar u ocultar ciertos
elementos segn el dispositivo. Por ejemplo, en un mvil ser ms importante un botn de
llamada directa o un mapa.
Ventajas del responsive design:

Va a seguir funcionando en el futuro para cualquier nuevo dispositivo que sea inventado. Porque
detecta el tamao de pantalla, NO el dispositivo.

Fcil de mantener y actualizar, porque usa un slo cdigo fuente para todos los dispositivos.

Mejora el posicionamiento SEO. Google recomienda el responsive design.

Qu es Responsive Design?
Una pgina web Responsive Design es una pgina web que detecta el tamao de pantalla del
dispositivo mediante el cual est siendo visualizada y adapta el diseo web para una lectura
ptima.
En vueloIV diseo web barcelona realizamos todas nuestras nuevas pginas web con este
mtodo porque en lugar de tener que disear y programar pginas web diferentes para cada
dispositivo, mediante el mtodo llamado responsive design se desarrolla una sola pgina
especificando como se debe ver en cada dispositivo.

Por qu es tan importante?

Porque cada vez ms usuarios se conectan a internet desde tablets y smartphones. Se calcula
que para 2015 los usuarios se conectarn ms desde tablets y smartphones que desde PC de
escritorio.
Una pgina web que no est optimizada para tablets y smartphones es ms dificil de leer. El
usuario debe hacer zoom para ampliar el texto, y muchos elementos quedan fuera de la pantalla.

DISEO WEB

En cambio una pgina con diseo web Responsive Design mostrar los textos y fotos
perfectamente adaptados para una cmoda lectura. Incluso se pueden mostrar u ocultar ciertos
elementos segn el dispositivo. Por ejemplo, en un mvil ser ms importante un botn de
llamada directa o un mapa.
Ventajas del responsive design:

Va a seguir funcionando en el futuro para cualquier nuevo dispositivo que sea inventado.
Porque detecta el tamao de pantalla, NO el dispositivo.

Fcil de mantener y actualizar, porque usa un slo cdigo fuente para todos los dispositivos.

Mejora el posicionamiento SEO. Google recomienda el responsive design.

Cmo funciona?
Al escribir el cdigo de la pgina web se establecen el diseo estndar y luego diseos
especiales para que se mostrarn segn el dispositivo, es decir, segn el tamao de pantalla
en la que se est visualizando.
Los tamaos de pantalla habitual ms habituales son:

Grande (ms grandes de 1440px)

Mediana. (entre 1280px y 768px. Aqu entraran pantallas de porttiles y algunas tablets.)

Pequea (menos de 768px. Todos los mviles y algunas tablets.)

Orientacin: Tambin se puede detectar la orientacin horizontal o vertical, ideal para hacer
ajustes finos en tablets.

Ffuente: http://www.maestrosdelweb.com/que-es-responsive-web-design/

DISEO WEB

Qu es una maquetacin web?

La maquetacin
es

la

distribucin

de

los

elementos

en

nuestra

pgina. Piensa
en una pgina
web cualquiera.
Seguro

que

distingues
algunos
elementos, como encabezados, columnas, mens laterales, etc.
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando tablas (<table>). Una
vez entendido este proceso poda resultar sencillo, aunque si no se dominaban las tablas, poda
convertirse en algo tedioso. El problema de las tablas es que generaban una pgina muy
encorsetada, y el cdigo se volva complejo de entender. Adems, algunos buscadores
encontraban problemas al analizar la estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza utilizando capas (<div>),
tambin llamadas divisiones o contenedores. La colocacin de las capas en la pgina se realiza
a travs de CSS. Esto permite, por ejemplo, que podamos pasar de un diseo con un men
lateral a otro con el men en la parte superior, slo cambiando la hoja de estilos.

Qu es HTML5
HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan Hyper Text Markup
Language) usado para estructurar y presentar el contenido para la web. Es uno de los aspectos
fundamentales para el funcionamiento de los sitios.
Esta nueva generacin de HTML, se dice, pronto dominar el desarrollo en internet, pero
introduce algunos cambios importantes que veremos dentro de algunas lneas. Por ende, para
los desarrolladores de sitios web es importante conocer las ventajas de HTML5, considerando
que algunas entidades se estn moviendo en esta direccin. No solamente Google con su
navegador Chrome, hace unos aos, sino tambin Adobe hace unos meses, que removi el
soporte de Flash para Android para dar paso a la llegada de HTML5.
Las ms importantes de las nuevas etiquetas creadas son:

DISEO WEB

article: esta etiqueta sirve para definir un artculo, un comentario de usuario o una
publicacin independiente dentro del sitio.

header, footer: estas etiquetas individuales ahorran tener que insertar IDs para cada uno,
como se sola hacer anteriormente. Adems, se pueden insertar headers y footers para
cada seccin, en lugar de tener que hacerlo nicamente en general.

nav: la negacin puede ser insertada directamente en el markup, entre estas etiquetas, que
nos permitirn hacer que nuestras listas oficien de navegacin.

section: con esta etiqueta, una de las ms importantes de las novedades, se puede definir
todo tipo de secciones dentro de un documento. Por ponerlo de forma sencilla, funciona de
una forma similar a la etiqueta div que nos separa tambin diferentes secciones.

audio y video: estas son las dos ms importantes etiquetas de HTML5, dado que nos
permiten acceder de forma ms simple a contenido multimedia que puede ser reproducido
por casi todo tipo de dispositivos; marcan el tipo de contenido que estar en su interior.

embed: con esta etiqueta se puede marcar la presencia de un contenido interactivo o

aplicacin externa.

canvas: finalmente, esta etiqueta nos permite introducir un lienzo dentro de un documento,
para poder dibujar grficos por vectores; ser necesario el uso de JavaScript.

HTML 5 estructura bsica

HTML 5 y las etiquetas estructurales

Estas nuevas etiquetas son muy tiles para definir la maquetacin o estructura de distribucin
de un sitio:

DISEO WEB

Fuente; http://www.w3schools.com/tags/

Qu es CSS3?
Mientras que HTML nos permite definir la estructura una pgina web, las hojas de estilo en
cascada (Cascading Style Sheets o CSS) son las que nos ofrecen la posibilidad de definir las
reglas y estilos de representacin en diferentes dispositivos, ya sean pantallas de equipos de
escritorio, porttiles, mviles, impresoras u otros dispositivos capaces de mostrar contenidos
web.

Fuente: http://www.w3schools.com/css/default.asp
http://josejfernandez.com/curso-html-maquetacion-semantica/