edición multimedia
INTERNET
Patricio Rodríguez M.
@taller_media
Diseñador Gráfico/Crossmedia Universidad de Valparaíso
Desarrollador web desde 1998
Diploma Crossmedia y Web Manager / Acad...
Presentación
del curso
La edición multimedia esta orientada al desarrollo de
documentos ordenados para ser visualizados en...
Tipos de trabajos
a realizar
1. conocer estándares para el diseño de documentos
web
2. integrar contenidos y estructurarlo...
evaluaciones
(2 coef. 1+ 1 coef. 2)
Encargos propuestos por el docente basados en casos de
estudio. 

!
Se propone una tem...
introducción
A LA WEB
did you know?
como se comporta
internet hoy
como se comporta
internet hoy
como se comporta
internet hoy
Internet sigue masificándose, llegando a un 65% de penetración el
2012, un 12% más que el 2011.
Alcanzando un crecimiento ...
Según Edad
15-24 años 21,8 1.850
25-34 años 18,9 1.569
35-44 años 17,2 1.411
45-54 años 18,3 1.493
55+ años 18,1 1.329
13,...
64%
65%
69%
72%
73%
74%
94%
Blogs
Música
Juegos
E-mail
Televisión
Retail
Noticias/Info.
ALCANCE POR TIPO DE SITIOS
Alcance...
evolución de la
comunicación
¿cómo buscamos
EN LA WEB?
introducción a la asignatura
DREAMWEAVER
Dreamweaver
creación de documentos web
Para crear documentos que sean interpretables por un
navegador o browser, debemos c...
el código es
interpretado
lenguaje
HTML
siglas de Hyper Text Markup Language (Lenguaje de
Marcado de Hipertexto)
!
HTML se escribe en forma de «etiq...
elementos
HTML
Los documentos HTML estan compuestos por elementos, estos
a su vez por etiquetas, atributos y el contenido ...
la estructura de este lenguaje es:
!
<etiqueta> contenido </etiqueta>
!
LAS ETIQUETAS SE ABREN Y CIERRAN
PARA PODER VISUAL...
comentarios
HTML
Es importante en un lenguaje de programación que se sepa usar
comentarios ya que estos sirven como guia. ...
comentarios
HTML
Es importante en un lenguaje de programación que se sepa usar
comentarios ya que estos sirven como guia. ...
interfaz de
DREAMWEAVER
BARRA DE MENUS
BARRA DE DOCUMENTO
BARRA DE ESTADO
PANEL DE PROPIEDADES
AREA DE PANELES
PANEL DE SITIOS
VISTA DE DISEÑO DEL DOCUMENTO
VISTA DE CÓDIGO DEL DOCUMENTO
concepto de
sitio web
Un sitio web es una colección de páginas de internet
relacionadas y comunes a un dominio de Internet...
concepto de
sitio web
La forma habitual de crear un sitio consiste en crear una carpeta
en el disco local. Los documentos ...
crear un nuevo
sitio
Una vez creadas las carpetas que formarán la estructura del sitio
local, o por lo menos la carpeta ra...
En Dreamweaver, ir al menú Sitio, nuevo sitio
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í...
Por último en la categoría Configuración Avanzada, asignar la
carpeta predeterminada de imágenes
ver el sitio
El panel Archivos (menú Ventana → Archivos o
tecla F8) es uno de los paneles más importantes
de Dreamweaver, ...
etiquetas básicas
HTML
<!doctype>
Esta instrucción le indica al navegador que el documento debe
procesarse según la codificación html
<html>…</html>
Le indica al navegador donde comienza y termina el contenido
html del documento.
!
En realidad todo el docu...
<head>…</head>
Representa una colección de metadatos acerca del documento,
incluyendo enlaces a, o definiciones de, scripts...
<meta>…</meta>
La etiqueta <meta> se utiliza para añadir información sobre la
página. Esta información puede ser utilizada...
<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 d...
Introducción a la web
Introducción a la web
Introducción a la web
Introducción a la web
Upcoming SlideShare
Loading in …5
×

Introducción a la web

1,852 views

Published on

Conceptos preliminares de lo que es internet y su expansión como medio de comunicación.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,852
On SlideShare
0
From Embeds
0
Number of Embeds
1,199
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introducción a la web

  1. 1. edición multimedia INTERNET Patricio Rodríguez M. @taller_media
  2. 2. 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.
  3. 3. 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)
  4. 4. 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
  5. 5. 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.
  6. 6. introducción A LA WEB
  7. 7. did you know?
  8. 8. como se comporta internet hoy
  9. 9. como se comporta internet hoy
  10. 10. como se comporta internet hoy
  11. 11. 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 36% 38% 40% 44% 47% 52% 58% 58% 65% 2004 2005 2006 2007 2008 2009 2010 2011 2012 81% 38% penetración de internet
  12. 12. Según Edad 15-24 años 21,8 1.850 25-34 años 18,9 1.569 35-44 años 17,2 1.411 45-54 años 18,3 1.493 55+ años 18,1 1.329 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 promedio horas online
  13. 13. 64% 65% 69% 72% 73% 74% 94% Blogs Música Juegos E-mail 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 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
  14. 14. evolución de la comunicación
  15. 15. ¿cómo buscamos EN LA WEB?
  16. 16. introducción a la asignatura DREAMWEAVER
  17. 17. 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.
  18. 18. el código es interpretado
  19. 19. lenguaje HTML siglas de Hyper Text Markup Language (Lenguaje de Marcado de Hipertexto) ! HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)
  20. 20. 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.
  21. 21. la estructura de este lenguaje es: ! <etiqueta> contenido </etiqueta> ! LAS ETIQUETAS SE ABREN Y CIERRAN PARA PODER VISUALIZAR EL CONTENIDO EN UN NAVEGADOR
  22. 22. 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 –>
  23. 23. 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 –>
  24. 24. interfaz de DREAMWEAVER
  25. 25. BARRA DE MENUS
  26. 26. BARRA DE DOCUMENTO
  27. 27. BARRA DE ESTADO
  28. 28. PANEL DE PROPIEDADES
  29. 29. AREA DE PANELES
  30. 30. PANEL DE SITIOS
  31. 31. VISTA DE DISEÑO DEL DOCUMENTO
  32. 32. VISTA DE CÓDIGO DEL DOCUMENTO
  33. 33. concepto de sitio web Un 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).
  34. 34. concepto de sitio web La 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.
  35. 35. 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
  36. 36. En Dreamweaver, ir al menú Sitio, nuevo sitio
  37. 37. 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
  38. 38. Por último en la categoría Configuración Avanzada, asignar la carpeta predeterminada de imágenes
  39. 39. ver el sitio El 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.
  40. 40. etiquetas básicas HTML
  41. 41. <!doctype> Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html
  42. 42. <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>
  43. 43. <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.
  44. 44. <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
  45. 45. <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.

×