introducción a la web
DESCRIPTION
Introducción a los conceptos preliminares de la producción web, modelo de prototipados y explicación de las etiquetas de marcado.TRANSCRIPT
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.
lunes 12 de agosto de 2013
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.
lunes 12 de agosto de 2013
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?
lunes 12 de agosto de 2013
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
lunes 12 de agosto de 2013
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?
CSS3
lunes 12 de agosto de 2013
ESTO ES PARTE DEUN PROCESO
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
INTRODUCCIÓN ALA 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 BUSCAMOSEN LA WEB
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
integración digital de herramientas multimedia para definición de proyectos web
¿que debemos aprender?
lunes 12 de agosto de 2013
armar documentos para la web desde su diseño, optimización y vinculación entre lenguajes de programación
lunes 12 de agosto de 2013
diseño basado en estándares
proceso productivo del diseño web
lunes 12 de agosto de 2013
arquitectura de contenidos
define las categorías, páginas y flujo de navegación de un sitio web
lunes 12 de agosto de 2013
wireframe
estructura de alambre, que define la diagramación de un documento web
lunes 12 de agosto de 2013
mock up
maqueta final que presenta la propuesta gráfica de un documento, línea visual de un sitio
lunes 12 de agosto de 2013
html, css, javascript... (html5, css3)
para esto debemos aprender a usar los lenguajes de programación
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, más semánticosUn conjunto de APIsRetrocompatibleUna nueva filosofía
¿QUÉ ES HTML5?
lunes 12 de agosto de 2013
soporte HTML5
*última beta
lunes 12 de agosto de 2013
aplicable
dispositivos móviles
lunes 12 de agosto de 2013
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
lunes 12 de agosto de 2013
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>
lunes 12 de agosto de 2013
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.
lunes 12 de agosto de 2013
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
lunes 12 de agosto de 2013
menos código
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 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
lunes 12 de agosto de 2013
el código es interpretado
lunes 12 de agosto de 2013
no basta con codificar para poder encontrar
lunes 12 de agosto de 2013
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)
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 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?
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 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>
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 representación gráfica'>
description
lunes 12 de agosto de 2013
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
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?
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
lunes 12 de agosto de 2013
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.
lunes 12 de agosto de 2013
lunes 12 de agosto de 2013
¿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.
lunes 12 de agosto de 2013
CSS define una serie de términos 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