Introducción a la web

PROTOTIPADO WEB
DISEÑO
Patricio Rodríguez M.
@taller_media
lunes 12 de agosto de 2013

Diseñador Gráﬁco/Crossmedia
Universidad de Valparaíso
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 Rodríguez M.

Presentación
del 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?

representar.
¿qué debe de
aprender el alumno?
HTML5

representar.
¿qué debe de
aprender el alumno?
CSS3

ESTO ES PARTE DE
UN PROCESO

INTRODUCCIÓN A
LA WEB

como se comporta internet hoy (nuestro mercado)

COMO BUSCAMOS
EN LA WEB

integración digital de herramientas multimedia para
deﬁnició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
deﬁne las categorías, páginas y ﬂujo de navegación de un sitio web

wireframe
estructura de alambre, que
deﬁne la diagramación de un
documento web

mock up
maqueta ﬁnal que presenta la
propuesta gráﬁca 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

Nuevos elementos, más semánticos
Un conjunto de APIs
Retrocompatible
Una nueva ﬁlosofí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
codiﬁcació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
Deﬁne relaciones con recursos externos, como puede ser el estilo.
El atributo rel deﬁne 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 deﬁne
HTML para el manejo del texto.
texto

el código es
interpretado

no basta con codiﬁcar
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)

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>

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áﬁca'>
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..., modiﬁcando 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 deﬁne 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 deﬁne una serie de términos que permiten
describir cada una de las partes que componen los
estilos CSS.

preguntas??

Introducción a la web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a Introducción a la web

Similar a Introducción a la web (20)

Más de iConstruye

Más de iConstruye (20)

Último

Último (20)

Introducción a la web