Introducción a la web
-
Upload
pandresnet -
Category
Education
-
view
370 -
download
0
description
Transcript of Introducción a la web
![Page 1: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/1.jpg)
edición multimedia INTERNET
Patricio Rodríguez M.@taller_media
![Page 2: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/2.jpg)
Diseñador Gráfico/Crossmedia Universidad de Valparaíso Desarrollador web desde 1998 Diploma Crossmedia y Web Manager / Academia Mac Adobe Trainer (Illustrator, Indesign, Photoshop, Dreamweaver, Flash) Certificación Photoshop ACA, Dreamweaver ACA Docente Crossmedia en Academia Mac Director de proyectos y community manager en pandres.net
Patricio Rodríguez M.
![Page 3: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/3.jpg)
Presentación del curso
La edición multimedia esta orientada al desarrollo de documentos ordenados para ser visualizados en internet, creando nodos informativos denominados sitios web que conjugan distintos formatos como textos, imágenes, audios y vídeos (multimedios)
![Page 4: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/4.jpg)
Tipos de trabajos a realizar
1. conocer estándares para el diseño de documentos web
2. integrar contenidos y estructurarlos visualmente en documentos web
3. realizar dirección de arte para web
![Page 5: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/5.jpg)
evaluaciones (2 coef. 1+ 1 coef. 2)
Encargos propuestos por el docente basados en casos de estudio. !Se propone una temática común para todos los alumnos y se resuelven desde una propuesta conceptual y una entrega formal.
![Page 6: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/6.jpg)
introducción A LA WEB
![Page 7: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/7.jpg)
did you know?
![Page 8: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/8.jpg)
como se comporta internet hoy
![Page 9: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/9.jpg)
como se comporta internet hoy
![Page 10: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/10.jpg)
como se comporta internet hoy
![Page 11: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/11.jpg)
![Page 12: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/12.jpg)
ALCANCE DE INTERNET
Internet sigue masificándose, llegando a un 65% de penetración el 2012, un 12% más que el 2011.
Alcanzando un crecimiento de 38% en los últimos 5 años y un 81% acumulado desde el 2004.
Evolución Penetración Internet
Base: Hombres y Mujeres, mayores de 13 años, residentes en Santiago y principales ciudades del país.Fuente: Estudio General de Medios (EGM) Base Julio-Dic 2012, Ipsos
36% 38% 40%44% 47%
52%58% 58%
65%
2004 2005 2006 2007 2008 2009 2010 2011 2012
81%
38%
penetración de internet
![Page 13: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/13.jpg)
Promedio de horas por visitante
Promedio de páginas por
visitante
Promedio de minutos por
visita
Promedio de visitas por visitante
Promedio visitas por día de uso
Audiencia total 19,5 1.611 25 46 2,8
Según sexo Hombres 21,4 1.799 26 49 2,9 Mujeres 17,6 1.424 24 43 2,6
Según Edad 15-24 años 21,8 1.850 27 49 2,9 25-34 años 18,9 1.569 26 44 2,8 35-44 años 17,2 1.411 24 43 2,7 45-54 años 18,3 1.493 23 47 2,7 55+ años 18,1 1.329 23 48 2,6
INTENSIDAD DE USO DE INTERNET
Internet es un medio con alta intensidad de uso, ofreciendo una alta frecuencia de visita y
de consumo.
Chile se encuentra entre los 4 países que más horas
consumen al mes, dentro de Latinoamérica.
13,8
17,2
18,8
18,9
19,5
21,5
24,1
35,6
26,1
Puerto Rico
Venezuela
México
Colombia
Chile
Perú
Argentina
Brasil
Latinoamérica
Horas Promedio Online Mes – Marzo 2013
Fuente: comScore Media Metrix, Marzo 2013
promedio horas online
![Page 14: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/14.jpg)
64%
65%
69%
72%
73%
74%
94%
Blogs
Música
Juegos
Televisión
Retail
Noticias/Info.
ALCANCE POR TIPO DE SITIOS
Alcance de Categorías Clave - Marzo 2013
El uso de internet de los chilenos no sólo es intensivo en cantidad de horas, si no también es extensivo en cantidad y diversidad de contenidos. Es así como, casi la
totalidad de los usuarios (más del 90% de alcance) buscan en internet: buscadores, servicios, entretenimiento, estilos de vida, portales, directorios, redes sociales,
contenido multimedial y noticias.
Respecto del promedio mundial, Chile se destaca, especialmente, en los contenidos de Estilo de vida, Televisión y Música, donde hay una mayor brecha de alcance.
Fuente: comScore Media Metrix, Marzo 2013
94%
95%
96%
96%
96%
97%
97%
97%
Multimedia
Redes Sociales
Directorios
Portales
Estilo de vida
Entretenimiento
Servicios
Búsqueda/ Navegación
Mundial
89%
94%
91%
70%
95%
80%
88%
80%
80%
77%
39%
67%
55%
47%
55%
Mundial
navegación por categorías
![Page 15: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/15.jpg)
evolución de la comunicación
![Page 16: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/16.jpg)
¿cómo buscamos EN LA WEB?
![Page 17: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/17.jpg)
![Page 18: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/18.jpg)
![Page 19: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/19.jpg)
introducción a la asignatura DREAMWEAVER
![Page 20: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/20.jpg)
Dreamweaver creación de documentos web
Para crear documentos que sean interpretables por un navegador o browser, debemos considerar el manejo de ciertos conceptos que nos permitan visualizar la información. !Debemos reconocer la existencia de ciertos lenguajes de programación para la construcción de este contenido.
![Page 21: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/21.jpg)
el código es interpretado
![Page 22: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/22.jpg)
lenguaje HTML
siglas de Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto) !HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)
![Page 23: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/23.jpg)
elementos HTML
Los documentos HTML estan compuestos por elementos, estos a su vez por etiquetas, atributos y el contenido del elemento:
Este es un elemento de párrafo, <p> viene de paragraph. Todas los elementos tienen como inicial sus nombres en ingles.
![Page 24: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/24.jpg)
la estructura de este lenguaje es: !
<etiqueta> contenido </etiqueta> !
LAS ETIQUETAS SE ABREN Y CIERRAN PARA PODER VISUALIZAR EL CONTENIDO EN UN NAVEGADOR
![Page 25: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/25.jpg)
comentarios HTML
Es importante en un lenguaje de programación que se sepa usar comentarios ya que estos sirven como guia. Un comentario en HTML empieza con <!—y termina con –>
![Page 26: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/26.jpg)
comentarios HTML
Es importante en un lenguaje de programación que se sepa usar comentarios ya que estos sirven como guia. Un comentario en HTML empieza con <!—y termina con –>
![Page 27: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/27.jpg)
interfaz de DREAMWEAVER
![Page 28: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/28.jpg)
BARRA DE MENUS
![Page 29: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/29.jpg)
BARRA DE DOCUMENTO
![Page 30: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/30.jpg)
BARRA DE ESTADO
![Page 31: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/31.jpg)
PANEL DE PROPIEDADES
![Page 32: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/32.jpg)
AREA DE PANELES
![Page 33: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/33.jpg)
PANEL DE SITIOS
![Page 34: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/34.jpg)
VISTA DE DISEÑO DEL DOCUMENTO
![Page 35: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/35.jpg)
VISTA DE CÓDIGO DEL DOCUMENTO
![Page 36: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/36.jpg)
concepto de sitio webUn sitio web es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet1 Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocolo HTTP de Internet. !Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información (un gigantesco entramado de recursos de alcance mundial).
![Page 37: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/37.jpg)
concepto de sitio webLa forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. !Esto es lo que se conoce como sitio local.
![Page 38: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/38.jpg)
![Page 39: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/39.jpg)
crear un nuevo sitio
Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio. !En Dreamweaver, ir al menú Sitio, nuevo sitio
![Page 40: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/40.jpg)
En Dreamweaver, ir al menú Sitio, nuevo sitio
![Page 41: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/41.jpg)
En la ventana de diálogo agregar un nombre al sitio y determinar por medio del icono de la carpeta, cual es la carpeta raíz de nuestro sitio
![Page 42: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/42.jpg)
Por último en la categoría Configuración Avanzada, asignar la carpeta predeterminada de imágenes
![Page 43: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/43.jpg)
ver el sitioEl panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.
![Page 44: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/44.jpg)
etiquetas básicas HTML
![Page 45: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/45.jpg)
<!doctype>
Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html
![Page 46: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/46.jpg)
<html>…</html>
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>
![Page 47: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/47.jpg)
<head>…</head>
Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. !No se visualiza en un navegador, pero es información relevante para los motores de búsqueda a fin de interpretar un documento y posicionarlo.
![Page 48: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/48.jpg)
<meta>…</meta> La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores. !Los buscadores consultan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar. !!author: expresa quien es el autor del contenido del documento !description: entrega una breve descripción o resumen del contenido ordenado del documento
![Page 49: Introducción a la web](https://reader030.fdocuments.us/reader030/viewer/2022020306/557b4956d8b42a0d388b4dab/html5/thumbnails/49.jpg)
<title>…</title>
Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.