PROTOTIPADO WEB

DISEO
Patricio Rodrguez M.
@taller_media
lunes 12 de agosto de 2013
Diseador Grco/Crossmedia
Universidad de Valparaso
Magister en Marketing y Comunicaciones
Desarrollador web desde 1998
Diploma Web Manager / Academia Mac
Adobe Trainer
Director de proyectos y community manager en
particulas.cl
Patricio Rodrguez M.
lunes 12 de agosto de 2013
Presentacin
del curso
REALIZAR MAQUETAS DE CORRECCIN Y
PRESENTACIN DE PROYECTOS DE DISEO,
PARA DIFERENTES MEDIOS Y SOPORTES DE
ACUERDO A LOS REQUERIMIENTOS DEL
PROYECTO.
lunes 12 de agosto de 2013
Identica lenguaje de marcado para codicacin de documentos web,
de acuerdo a los requerimientos del proyecto.
Codica documentos web aplicando lenguaje de marcado, en funcin
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, segn requerimientos de diseo del proyecto.
Identica lenguajes de hojas de estilo que denen aspectos visuales del
diseo, de acuerdo a los requerimientos del proyecto web.
qu debe de
aprender el alumno?
lunes 12 de agosto de 2013
Identica lenguaje de marcado para codicacin de documentos web,
de acuerdo a los requerimientos del proyecto.
Codica documentos web aplicando lenguaje de marcado, en funcin
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, segn requerimientos de diseo del proyecto.
Identica lenguajes de hojas de estilo que denen aspectos visuales del
diseo, de acuerdo a los requerimientos del proyecto web.
qu debe de
aprender el alumno?
HTML5
lunes 12 de agosto de 2013
Identica lenguaje de marcado para codicacin de documentos web,
de acuerdo a los requerimientos del proyecto.
Codica documentos web aplicando lenguaje de marcado, en funcin
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, segn requerimientos de diseo del proyecto.
Identica lenguajes de hojas de estilo que denen aspectos visuales del
diseo, de acuerdo a los requerimientos del proyecto web.
qu debe de
aprender el alumno?
CSS3
lunes 12 de agosto de 2013
ESTO ES PARTE DE
UN PROCESO
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
INTRODUCCIN A
LA WEB
lunes 12 de agosto de 2013
como se comporta internet hoy (nuestro mercado)
lunes 12 de agosto de 2013
como se comporta internet hoy (nuestro mercado)
lunes 12 de agosto de 2013
como se comporta internet hoy (nuestro mercado)
lunes 12 de agosto de 2013
como se comporta internet hoy (nuestro mercado)
lunes 12 de agosto de 2013
COMO BUSCAMOS
EN LA WEB
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
integracin digital de herramientas multimedia para
denicin de proyectos web
que debemos
aprender?
lunes 12 de agosto de 2013
armar documentos para la web desde
su diseo, optimizacin y vinculacin
entre lenguajes de programacin
lunes 12 de agosto de 2013
diseo basado en estndares
proceso productivo
del diseo web
lunes 12 de agosto de 2013
arquitectura de contenidos
dene las categoras, pginas y ujo de navegacin de un sitio web
lunes 12 de agosto de 2013
wireframe
estructura de alambre, que
dene la diagramacin de un
documento web
lunes 12 de agosto de 2013
mock up
maqueta nal que presenta la
propuesta grca de un
documento, lnea visual de
un sitio
lunes 12 de agosto de 2013
html, css, javascript... (html5, css3)
para esto debemos
aprender a usar los
lenguajes de
programacin
lunes 12 de agosto de 2013
siglas de HyperText Markup Language (Lenguaje de
Marcado de Hipertexto)
HTML se escribe en forma de etiquetas, rodeadas por
corchetes angulares (<,>)
html
lunes 12 de agosto de 2013
Nuevos elementos, ms semnticos
Un conjunto de APIs
Retrocompatible
Una nueva losofa
QU ES HTML5?
lunes 12 de agosto de 2013
soporte HTML5
*ltima beta
lunes 12 de agosto de 2013
aplicable
dispositivos
mviles
lunes 12 de agosto de 2013
CODIFICACIN
!DOCTYPE
Esta instruccin le indica al navegador que el
documento debe procesarse segn la
codicacin html5.
<!DOCTYPE html>
HTML 5
lunes 12 de agosto de 2013
CODIFICACIN
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 excepcin de la instruccin
<!DOCTYPE html>
lunes 12 de agosto de 2013
CODIFICACIN
CODIFICACIN
<meta charset=utf-8/>
HTML 5
Esto es para indicarle que estamos trabajando con el idioma
espaol y que nos reconozca los caracteres especiales, tldes y
otros elementos propios del idioma.
lunes 12 de agosto de 2013
CODIFICACIN
LINK
<link rel=stylesheet href=style.css/>
HTML 5
Dene relaciones con recursos externos, como puede ser el estilo.
El atributo rel dene el tipo de relacin, stylesheet: Indica que es un
recurso de estilo tipo CSS
lunes 12 de agosto de 2013
menos cdigo
lunes 12 de agosto de 2013
estructura de un
documento html
lunes 12 de agosto de 2013
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>foo</title>
<link rel=stylesheet href=style.css/>
</head>
</html>
lunes 12 de agosto de 2013
estructura de las
etiquetas
<nombre_etiqueta> ............................</nombre_etiqueta>
lunes 12 de agosto de 2013
La mayor parte del contenido de las pginas HTML
habituales est formado por texto, llegando a ser ms del
90% del cdigo de la pgina. Por este motivo, es muy
importante conocer los elementos y etiquetas que dene
HTML para el manejo del texto.
texto
lunes 12 de agosto de 2013
el cdigo es
interpretado
lunes 12 de agosto de 2013
no basta con codicar
para poder encontrar
lunes 12 de agosto de 2013
mejorar la situacin de un sitio web en
buscadores (Google, Yahoo!, Bing, Ask). Se
trata de una disciplina que se desarrolla desde
hace aos (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)
lunes 12 de agosto de 2013
El robot del buscador se pasa la vida
recorriendo la red, de enlace en enlace, sin
pausa. Va leyendo las pginas 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.
CMO FUNCIONA?
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
Las metatags son etiquetas html que se incorporan en el encabezado
de una pgina web y que resultan invisibles para un visitante normal,
pero de gran utilidad paranavegadores u otros programas que
puedan valerse de esta informacin.
Su propsito es el de incluir informacin (metadatos) de referencia
sobre la pgina: autor, ttulo, fecha, palabras clave, descripcin, etc.
<meta>
lunes 12 de agosto de 2013
<meta name='atributo' content='contenido del atributo'>
<meta>
lunes 12 de agosto de 2013
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
representacin grca'>
description
lunes 12 de agosto de 2013
Incorporar palabras claves para optimizar el
proceso de SEO del documento en los motores
de bsqueda.
<meta name='keywords' content='geometra,
proyeccin, ortogonal, diedro, punto, recta, plano,
poliedro, rebatimiento'>
keywords
lunes 12 de agosto de 2013
Integra el nombre del desarrollador o equipo a
cargo del documento
<meta name='author' content='Patricio RM'>
author
lunes 12 de agosto de 2013
hoja de estilos en
cascada
lunes 12 de agosto de 2013
Para que sirve?
separacin de los contenidos de los documentos escritos
en HTML, XML, XHTML, HTML5 de la presentacin del
documento con las hojas de estilo, incluyendo
elementos tales como los colores, fondos,
mrgenes, bordes, tipos de letra..., modicando as la
apariencia de una pgina web de una forma ms sencilla
lunes 12 de agosto de 2013
CSS es un lenguaje formal (que se escribe en un
archivo de texto), que dene la presentacin de un
documento Html, Xml, Xhtml o Html5.
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
Cmo 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.
lunes 12 de agosto de 2013
CSS dene una serie de trminos que permiten
describir cada una de las partes que componen los
estilos CSS.
lunes 12 de agosto de 2013
preguntas??
lunes 12 de agosto de 2013