Issuu on Google+

EDICIÓN MULTIMEDIA CROSSMEDIA

Patricio Rodríguez M. @taller_media martes 6 de agosto de 2013


Patricio Rodríguez M. Diseñador Gráfico/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 martes 6 de agosto de 2013


Presentaci贸n del curso

Desarrollo de proyectos multimedia para internet por medio de herramientas digitales

martes 6 de agosto de 2013


¿qué tipos de trabajos realizaremos? 1. conocer estándares para el diseño de documentos web 2. utilizar lenguajes de programación, pensando en una web semántica (con sentido para el usuario) 3. realizar dirección de arte para web

martes 6 de agosto de 2013


INTRODUCCIÓN A LA WEB

martes 6 de agosto de 2013


did you know? martes 6 de agosto de 2013


como se comporta internet hoy (nuestro mercado)

martes 6 de agosto de 2013


como se comporta internet hoy (nuestro mercado)

martes 6 de agosto de 2013


como se comporta internet hoy (nuestro mercado)

martes 6 de agosto de 2013


como se comporta internet hoy (nuestro mercado)

martes 6 de agosto de 2013


COMO BUSCAMOS EN LA WEB

martes 6 de agosto de 2013


martes 6 de agosto de 2013


驴que debemos aprender? integraci贸n digital de herramientas multimedia para definici贸n de proyectos web

martes 6 de agosto de 2013


armar documentos para la web desde su dise帽o, optimizaci贸n y vinculaci贸n entre lenguajes de programaci贸n martes 6 de agosto de 2013


proceso productivo del diseĂąo web diseĂąo basado en estĂĄndares

martes 6 de agosto de 2013


arquitectura de contenidos

define las categorĂ­as, pĂĄginas y flujo de navegaciĂłn de un sitio web martes 6 de agosto de 2013


wireframe

estructura de alambre, que define la diagramaci贸n de un documento web martes 6 de agosto de 2013


mock up

maqueta final que presenta la propuesta grĂĄfica de un documento, lĂ­nea visual de un sitio martes 6 de agosto de 2013


para esto debemos aprender a usar los lenguajes de programaci贸n html, css, javascript... (html5, css3)

martes 6 de agosto de 2013


html siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) HTML se escribe en forma de ÂŤetiquetasÂť, rodeadas por corchetes angulares (<,>)

martes 6 de agosto de 2013


¿QUÉ ES HTML5? Nuevos elementos, más semánticos Un conjunto de APIs Retrocompatible Una nueva filosofía

martes 6 de agosto de 2013


soporte HTML5

*Ăşltima beta

martes 6 de agosto de 2013


aplicable

dispositivos m贸viles martes 6 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. HTML 5

<!DOCTYPE html>

martes 6 de agosto de 2013


CODIFICACIÓN

ELEMENTO RAIZ 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>

HTML 5

<html lang=es>

martes 6 de agosto de 2013


CODIFICACIÓN

CODIFICACIÓN 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.

HTML 5

<meta charset=”utf-8”/>

martes 6 de agosto de 2013


CODIFICACIÓN

LINK 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 HTML 5

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

martes 6 de agosto de 2013


menos c贸digo martes 6 de agosto de 2013


estructura de un documento html

martes 6 de agosto de 2013


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


estructura de las etiquetas

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

martes 6 de agosto de 2013


texto 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.

martes 6 de agosto de 2013


el c贸digo es interpretado

martes 6 de agosto de 2013


no basta con codificar para poder encontrar

martes 6 de agosto de 2013


SEO (SEARCH ENGINE OPTIMIZATION) 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.

martes 6 de agosto de 2013


¿CÓMO FUNCIONA? 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.

martes 6 de agosto de 2013


martes 6 de agosto de 2013


<meta> 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. martes 6 de agosto de 2013


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

martes 6 de agosto de 2013


description 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'>

martes 6 de agosto de 2013


keywords 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'>

martes 6 de agosto de 2013


author

Integra el nombre del desarrollador o equipo a cargo del documento <meta name='author' content='Patricio RM'>

martes 6 de agosto de 2013


hoja de estilos en cascada

martes 6 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 martes 6 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.

martes 6 de agosto de 2013


martes 6 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.

martes 6 de agosto de 2013


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

martes 6 de agosto de 2013


preguntas?? martes 6 de agosto de 2013


Introducción a la web