Introducción a la web

PROTOTIPADO WEBDISEÑO

Patricio Rodríguez M.

@taller_media

lunes 12 de agosto de 2013

Diseñador Gráfico/CrossmediaUniversidad de ValparaísoMagister en Marketing y ComunicacionesDesarrollador web desde 1998Diploma Web Manager / Academia MacAdobe TrainerDirector de proyectos y community manager en particulas.cl

Patricio Rodríguez M.


Presentacióndel curso

REALIZAR MAQUETAS DE CORRECCIÓN Y PRESENTACIÓN DE PROYECTOS DE DISEÑO, PARA DIFERENTES MEDIOS Y SOPORTES DE ACUERDO A LOS REQUERIMIENTOS DEL PROYECTO.


Identifica lenguaje de marcado para codificación de documentos web, de acuerdo a los requerimientos del proyecto.

Codifica documentos web aplicando lenguaje de marcado, en función de los requerimientos del proyecto.

Genera maquetas de prueba de sitios web usando lenguaje de marcado y hojas de estilo, de acuerdo a los requerimientos del proyecto a representar.

Aplica aspectos visuales en prototipo utilizando lenguaje de hojas de estilos, según requerimientos de diseño del proyecto.

Identifica lenguajes de hojas de estilo que definen aspectos visuales del diseño, de acuerdo a los requerimientos del proyecto web.

¿qué debe de aprender el alumno?








HTML5








CSS3


ESTO ES PARTE DEUN PROCESO




INTRODUCCIÓN ALA WEB


como se comporta internet hoy (nuestro mercado)








COMO BUSCAMOSEN LA WEB



integración digital de herramientas multimedia para definición de proyectos web

¿que debemos aprender?


armar documentos para la web desde su diseño, optimización y vinculación entre lenguajes de programación


diseño basado en estándares

proceso productivo del diseño web


arquitectura de contenidos

define las categorías, páginas y flujo de navegación de un sitio web


wireframe

estructura de alambre, que define la diagramación de un documento web


mock up

maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio


html, css, javascript... (html5, css3)

para esto debemos aprender a usar los lenguajes de programación


siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto)

HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)

html


http://es.wikipedia.org/wiki/Par%C3%A9ntesis

http://es.wikipedia.org/wiki/Par%C3%A9ntesis

Nuevos elementos, más semánticosUn conjunto de APIsRetrocompatibleUna nueva filosofía

¿QUÉ ES HTML5?


soporte HTML5

*última beta


aplicable

dispositivos móviles


CODIFICACIÓN

!DOCTYPE

Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html5.

<!DOCTYPE html>

HTML 5


CODIFICACIÓN

ELEMENTO RAIZ

<html lang=es>

HTML 5

Le indica al navegador donde comienza y termina el contenido html del documento.

En realidad todo el documento debe estar contenido entre las etiquetas <html></html>, con la única excepción de la instrucción <!DOCTYPE html>


CODIFICACIÓN

CODIFICACIÓN

<meta charset=”utf-8”/>

HTML 5

Esto es para indicarle que estamos trabajando con el idioma español y que nos reconozca los caracteres especiales, tíldes y otros elementos propios del idioma.


CODIFICACIÓN

LINK

<link rel=”stylesheet” href=”style.css”/>

HTML 5

Define relaciones con recursos externos, como puede ser el estilo.

El atributo rel define el tipo de relación, stylesheet: Indica que es un recurso de estilo tipo CSS


menos código


estructura de un documento html


<!DOCTYPE HTML><html><head><meta charset=”utf-8”><title>foo</title><link rel=”stylesheet” href=”style.css”/></head>

</html>


estructura de las etiquetas

<nombre_etiqueta> ............................</nombre_etiqueta>


La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.

texto


el código es interpretado


no basta con codificar para poder encontrar


mejorar la situación de un sitio web en buscadores (Google, Yahoo!, Bing, Ask…). Se trata de una disciplina que se desarrolla desde hace años (desde que Google revolucionó la forma que tenemos los usuarios de enfrentarnos a la web) y consiste e preparar los sitios web para que el buscador los encuentre.

SEO(SEARCH ENGINE OPTIMIZATION)


http://periodistaseo.com/2011/11/25/el-secreto-de-google/

http://periodistaseo.com/2011/11/25/el-secreto-de-google/

El robot del buscador se pasa la vida recorriendo la red, de enlace en enlace, sin pausa. Va leyendo las páginas que se encuentra, las interpreta de acuerdo con una serie de criterios y las va guardando en un inmenso índice: la mayor base de datos que existe.

¿CÓMO FUNCIONA?



Las metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad paranavegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc.

<meta>


http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/HTML

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/P%C3%A1gina_web

http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/Navegador_web

http://es.wikipedia.org/wiki/Metadato

http://es.wikipedia.org/wiki/Metadato

<meta name='atributo' content='contenido del atributo'>

<meta>


Permite incorporar un resumen que de cuenta cual es la estructura de contenidos del documento html.

<meta name='description' content='Sitio dedicado al estudio de los sistemas de representación gráfica'>

description


Incorporar palabras claves para optimizar el proceso de SEO del documento en los motores de búsqueda.

<meta name='keywords' content='geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento'>

keywords


Integra el nombre del desarrollador o equipo a cargo del documento

<meta name='author' content='Patricio RM'>

author


hoja de estilos en cascada


¿Para que sirve?

separación de los contenidos de los documentos escritos en HTML, XML, XHTML, HTML5 de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando así la apariencia de una página web de una forma más sencilla


CSS es un lenguaje formal (que se escribe en un archivo de texto), que define la presentación de un documento Html, Xml, Xhtml o Html5.



¿Cómo funciona?El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo.

Debemos seleccionar la etiqueta de HTML que deseamos afectar por medio de atributos visuales para posteriormente asignar valores a los atributos.


CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS.


preguntas??


Education

Introducción a la web