TALLER DISEÑO DE PAGINAS WEB
Tema Diseño de páginas web usando tecnologías como HTML5, CSS3, Responsive design.
Introducción
Actualmente el mundo de la web se ha posicionado fuertemente en el mercado, por este motivo se ha propuesto un taller de diseño de páginas web, que abarcara el diseño con tecnologías nuevas como lo son HTML5, CSS3, Responsive Design.
Las páginas webs están compuesta por uno o varios documentos html, relacionados entre sí mediante hipervínculos (enlaces). Además estos documentos pueden contener otros elementos como pueden ser imágenes, sonidos, animaciones multimedia, aplicaciones.
En el transcurso del taller, se abarcara una sección de conocimientos básicos en la que se dará a conocer los fundamentos teóricos necesarios para el curso, la siguiente sección es totalmente práctica en la que se englobara semánticas para el diseño web como HTML5, CSS3y manejando un nuevo concepto como lo es Responsive Design, que no es mas que la adaptación del diseño web al entorno del usuario.
El taller va dirigido a participantes que deseen aprender fundamentos del diseño web de manera práctica, para cuestionar sus habilidades posteriormente dentro del diseño web.
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
Marco teórico 1. HTML5 HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un término de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.
La versión anterior y más usada de HTML, HTML4, carece de características necesarias para la creación de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript ha ayudado a mejorar esto, gracias a frameworks como jQuery, jQuery UI, 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, micrófonos, 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.
HTML4 y HTML5 son 100% compatibles entre sí. Todo el código 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>:
Código: <!DOCTYPE html>: Es un DOCTYPE mucho más simplificado que XHTML (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.
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
Las principales etiquetas HTML5 nuevas no tienen una representación especial en pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un significado semántico superior a un simple div o span.
<header> Hacer cosas como <div id="header"> es un poco estúpido cuando el 99% de los proyectos web tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado semántico.
<hgroup> Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo 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, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav> Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>. Sólo puedes tener un <nav> por página.
<section> Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts. En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona de comentarios. TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside> Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer> Este es obvio. Es el pie de página y todo lo que lo compone.
2. CSS3 CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.
(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
A pesar de que la recomendación oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los principales navegadores comerciales, como Netscape e Internet Explorer, tan tempranamente como en el año 1998, la situación de entonces, comúnmente conocida como la “guerra de los navegadores”, hacía que los intereses comerciales de las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran en el camino de las CSS.
Nuevas propiedades
Bordes: border-color, border-image, border-radius, box-shadow.
Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
Color: HSL colors, HSLA colors, RGBA colors opacity.
Texto: text-shadow, text-overflow.
Interface: box-sizing, resize.
Selectores: attribute selectors.
Formatos: media queries, multiple column layout, speech.
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
3. RESPONSIVE DESIGN El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. El Responsive design, diseño receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del diseño Web, la cual consiste en reacomodar los elementos que componen el website según el tamaño de dispositivo que la reproduzca.
Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.
De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones ad-hoc para versiones móviles, por ejemplo, una aplicación específica para iPhone, otra para móviles Android, etc.
Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas. TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
También se evitarían errores al acceder al sitio web en concreto desde los llamados "social links", es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook, Twitter, etc y que pueden acabar en error dependiendo de qué enlace se copió (desde qué dispositivo se copió) y desde qué dispositivo se accede.
Objetivos del taller:
Exponer los fundamentos teóricos del taller.
Construir una página web usando HTML5.
Optimizar el diseño de la página web con CSS3 como herramienta.
Manejar un diseño web adaptable al entorno del usuario mediante Responsive Design.
Descripción del taller: El taller está orientado a que los participantes puedan aprender los fundamentos del diseño web de manera rápida y fácil. Durante el taller diseñaremos una página web usando hojas de estilos en cascada para mejorar el diseño, y responsive design para nuestro diseño sea adaptable. Al finalizar el taller el participante será capaz de realizar el diseño de páginas web usando nuevas tecnologías y capaz de construir una página básica usando HTML5.
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
Tareas a realizar durante el taller: 1. Presentación del taller 2. Fundamentación Teórica sobre tecnologías a usar. 3. Construcción de páginas web en html5. 4. Optimización de diseño web usando CSS3. 5. Manejo de Responsive Design en páginas web.
Recursos didácticos a usar:
Computadora
Proyector
Diapositivas
Herramientas del taller
Internet
Recursos del taller
Material entregado a los asistentes:
Tríptico
Temario del taller
Herramientas
Recursos digitales
TALLER DISEÑO DE PAGINAS WEB
TALLER DISEÑO DE PAGINAS WEB
Tatiana Pizarro Ochoa Edwin Cango Piedra Jeampierre Valarezo Padilla Alvaro Feijoo Carrión
TUTORA: Ing. Nancy Loja
ESCUELA DE INFORMÁTICA
TALLER DISEÑO DE PAGINAS WEB