enero 16, 2012. html h: hyper. hipervínculos...
TRANSCRIPT
1
Enero 16, 2012.
HTML
H: hyper. Hipervínculos acceso a red hipermedia
Aleatorio
interactivo
T: text información
Contenido (texto, imágenes, videos)
M: Mark up etiquetas
Atributos (<bg color> <B> <i>…
L: Languaje codificación
Configuración documento html
-visible en: Firefox,
explorer y safari, firefox
2
<HTML>
<HEAD> JavaScript
<TITLE> </TITLE>
CURSO
<HEAD>
<BODY>
<p><I>HOLA<><>
</BODY>
</HTML>
El mayor o menor que se llama chevrones
La cabeza (head) es la que da las instrucciones a todo el cuerpo. Hay que ponerle nombre al cuerpo (un nombre para la persona o un tema).
Cuerpo ponemos todos los contenidos, lo que le importa la gente en la vida real (videos, imágenes…)
Cuando las etiquetas tienen una diagonal al principio tiene una diagonal.
El cruce de etiquetas anula la acción.
<p> <i> HOLA </p> </i)
3
Lo correcto es:
<u><em>SALUDOS</em></u>
Cuando estamos navegando en internet y vemos: Menú ver: código fuente.
Desde un block de notas podemos hacer un documento HTML. Archivo guardar como y la extensión se la damos nosotros (.html)
Los números de encabezados van de mayor a menor:
<h6> es el menor de los textos de encabezados y <h1> es el mayor de los textos de encabezados.
<p> etiqueta de apertura de párrafo.
Para insertar imágenes:<p><img src=”...”
F2 abre la imagen para copiar su nombre.
Cuando aparece una hoja rota es porque no está bien ligada la imagen.
Se deberá crear una carpeta RAÍZ es donde se genera todo, donde se generar los objetos y se facilita el acceso a los contenidos. Se deberá organizarlos.
ENERO 17, 2012
INTERACCION – HIPERMEDIA – HTML
TIC usabilidad =
<HTML>
<HEAD>
<TITLE>NOMBRE</title>
</head>
<BODY>
</BODY>
<HTML>
Compatibilidad
Visibilidad
Velocidad de descarga
<table> inicio de tabla
<tr> apertura de celda tabla
<td>1</td>
<td>2<td/> contenido para la celda
</tr> cierre de celda
</table> cierre de tabla
4
DREAM WEAVER (DW)
Se puede utilizar como lo hicimos con el block de notas.
Tenemos que abrir DW y abrir SITE + NEW SITE
SE TIENE UNA OPCIÓN DEL NOMBRE DEL SITIO (PÁGINA) Apuntes sobre TIC. La localización es muy importante ya que es como el archivo raíz que hicimos en el block de notas. Debemos de tener un folder local también en DW (raíz).
5
En seguida se le da un nombre al sitio y el programa no das la opción de buscar en donde se encontrará esa carpeta de la cual extraerá la información. Y en el LOCAL SITE FOLDER estará la ruta de la nueva carpeta en la cual se tendrá toda la información.
6
El servidor es una copia de lo que tenemos en la computadora. Y se puede actualizar desde DW
Hacer un nuevo documento. FILE + NEW
PARA VER EL TIPO DE INTERFAZ SE SELECCIONAMOS EN WINDOW + WORD SPACE + CLASSIC
7
En DW nos aparece un código que es el que normalmente se usa como base y a partir de aquí podemos colocar toda la información necesaria.
Desde el documento del block de notas y publicarlo podemos copiar la información necesaria, en el navegador: VER + CÓDIGO FUENTE (se copia todo lo pegamos en DW) pero solamente lo del BODY. Se puede presentar un problema a la hora de trasladar esto a DW ya que las imágenes se romperán porque no se encuentran en la misma carpeta y para facilitar esta situación se
8
borrará todo el código (por así llamarlo) de la imagen y se volverá a escribir IMG SRC=”(browser)”
Al escribir una TABLE entre los chevrones se da un espacio aparecen varias opciones (atributos para la tabla):
Para publicar seleccionar el mundo o planeta pero siempre deberá de estar guardado en DW para que pueda publicarse en la red (F12):
9
Una manera complicada para acentuar es poner el signo & (ampersand) y nos abrirá una ventana con diferentes signos y acentos. La palabra acentuada se escribirá y antes de poner el acento a la vocal se pone el ampersand y se le quita el acento a ésta y nos mostrará la ventana antes mencionada.
La etiqueta <a> hace los hipervínculos junto con HREF=”URL”. Se deberá tener cuidado en esto porque se deberá abrir la etiqueta “a” y al terminar de escribir la dirección del hipervínculo se agregará un chevron enseguida aparecerá el nombre al que se verá como hipervínculo y se cerrará la etiqueta
10
“a”.
Tarea: buscar información de Nuevas tecnologías de la información y la comunicación.
Para dar color al fondo de la página, a las letras y a los párrafos. En cada etiqueta después del segundo chevron se le da un espacio y aparecen los atributos de cada etiqueta, por ejemplo si tenemos <p >(al dar este espacio aparecerán los atributos):
11
Para hacer comentarios se verán en el párrafo gris:
12
Enero 18, 2012
Ya con una cuenta en google tendremos que Ir a google sites e ir a crear para hacer una página web.
Se creará el sitio dándole un nombre (éste se podrá modificar después ya que este nombre solamente será de prueba).
13
Deberá aparecer una página (como se muestra a continuación) ya que haya acepta el nombre del sitio.
Site map + administrar sitios (éste sirve para subir todos los elementos que integran nuestro sitio) + archivos adjuntos.
14
Nos posicionamos en la pestaña de subir y desde aquí podremos subir los documentos que contendrá nuestra página web.
Para modificar en el lápiz que aparece en la parte de arriba:
15
En la siguiente diapositiva se muestra como se podrá cargar una imagen, solamente se tecleará SUBIR:
16
Enseguida se copiará el código fuente, en la barra de herramientas del lado derecho aparece HTML y daremos click ahí para que aparezca otra ventana en la integraremos ese código.
En mi caso el haber copiado el código exacto generó un problema ya que no se visualizaba y lo que hicimos dejar solamente la etiqueta de BODY y se eliminó todo lo demás.
17
Dirección de mi página toda: https://sites.google.com/site/lauraticurso/
Para cargar una imagen u otras cosas:
1
ENERO 19, 2012
Agregar archivos hipermedia
Entrar al blog ir a administración del sitio y añadir una nueva entrada para agregar un video.
HIPERMEDIA
información
vide
texto
imagen
audio
consumidor
datos
usuario
DISCURSO
RETÓRICA
SENTIDO
APRENDIZ
soportes
vínculos
plataforma
acceso
interacción
productor Hipervínculos
TIC
hipertex
EXPERIENCIA
2
3
Buscar un video en youtube
4
Ya encontrado el video deseado se copiara el título directo de youtube al blog y quién lo subió (esto es como referencia videográfica).
Se copia el título directo y de quién ese video en la entrada del blog en la pestaña de VISUAL. Aquí se recomienda que para que no se borré el video (estando en el modo visual), hay que hacer primero una entrada para el video (o sea escribir una descripción o instrucción de lo que se quiera hacer con ellos). Si son varios hay que hacer todas las entradas necesarias y ya que se esté seguro de esto integrar los videos a la pestaña de HTML.
5
6
Después haber ingresado la dirección se deberá vincular esto se hace en el modo VISUAL y se selecciona el icono de la cadena para hacer un hipervínculo (esto solamente es para dar referencia de quién es el autor de ese video) y aparece una ventana (ya se tiene seleccionada la palabra(s) se da click en el icono INSERTAR ENLACE y dar la URL (copiar dirección completa de arriba del video de youtube) enseguida dar click en DESTINO o TARGET (abrir el enlace en una nueva ventana) y por último seleccionar dar click en INSERTAR (esto se convierte en hipervínculo sin hacer un HTML pero solamente será como texto y éste te llevará a la otra ventana (todavía no aparece el video que necesitamos ver en el blog).
7
Para insertar el video nos pasaremos a la pestaña de HTML y en YOUTUBE aparece una pestaña de COMPARTIR y al seleccionarla nos aparecerá un código que es la dirección corta del video pero esto solamente nos servirá para Word , PDFs o algún otro programa en el cual no se pueda visualizar el video.
Entonces para colocar el video en nuestro blog encontramos debajo del icono de Facebook aparece una flecha y abrimos ahí y aparecerán otros iconos de redes sociales y buscamos la de BLOGGER y éste abre una ventana y hay que
8
seleccionar EDICIÓN DE HTML copiar el código y pegar en el blog en la pestaña de HTML y pegar el código que copiamos del blogger (si no aparece el icono de blogger se copiará la dirección que inicia con <iframe…). Aquí ya no será necesario dar un vínculo porque lo hace directo.
Y se verá así en el BLOG
9
Ingresar a YOUTUBE haremos un canal propio, si se tiene una cuenta en GMAIL esa es la nos dará acceso. Para subir un video a este programa (los videos de 27 megas son muy pesados (720x480) y hay que optimizarlos y esto lo haremos en YOUTUBE.
Seleccionar SUBIR VIDEOS y buscar videos
10
Se pone un nombre (en este caso lo sugirió el mismo programa):
Y aparece la siguiente ventana y seleccionar SELECCIONAR ARCHIVOS DESDE TU COMPUTADORA:
11
Al cargar el video aparecerá la siguiente ventana y debemos darle un título, descripción y etiqueta (ésta nos sirve para agregar conceptos que nos permitan encontrarnos en la red), entre más etiquetas tengamos será más fácil que nos encuentren en la red:
12
Ya que esté guardado daremos click en el link que aparece en donde dice: Tu video se publicará en vivo en un momento en: http//:
GOOGLE BOOKS
Búsqueda libre o
13
Académica (ésta se encontrará en la pestaña más y todavía más)
Los libros deberán aparecer abiertos para que se pueda linkear o vincular (y esto hay que verificarlo con calma para que no nos encontremos con sorpresas más adelante).
La búsqueda puede ser general o particular:
14
Seleccionamos una portada de libro o revista y aparece la siguiente ventana:
Dando click a la portada del libro nos puede aparecer lo siguiente, en ésta nos muestra la cadena que nos muestra el vínculo para poder direccionarlo en el blog (se copiará la dirección del <iframe..>:
15
Después regresaremos al blog para insertarlo en la pestaña de html y aparecerá en el blog.
16
Para vincular nuevas páginas es el siguiente vínculo:
<iframe width:”640” height=”480” src=”http://www.unam.mx” frameborder=”2” allowfullscreen></iframe>
Como se ve dentro de SRC DENTRO (source) se puede poner una dirección para cargar y vincular nuevas páginas.
Enero 20, 2012
ARCHIVOS HIPERMEDIA
Documentos Texto
Video Interactivos Audio
Office suite .txt .rtf .doc (.docx) .xls (.xlsx)
Adobe suite .mov .mpg .avi
Flash .swf Power point .ppt Dreamweaver .app Block de notas .html
.mp3 QUICKTIME .mp4 iTUNES .wav Windows .aif media player
Acrobat Adobe suite .pdf
Web .wmv (dispositivos) .mp4 .3GP Streaming. .FLV
Aplicaciones Web -blogs .cxe -foros -redes
COMPARTIR DOCUMENTOS CON ALUMNOS EN PC
Profesor: Disco c + usuarios + acceso público (se ponen todos los documentos que quiera compartir con los alumnos).
Para que el alumno vea los documentos y pueda tomarlos: equipo + red + computadora del profesor + users + acceso público (y aquí se pondrá una carpeta con los documentos que se compartirán).
Para guardar un archivo en Word y se pueda publicar en el blog, lo podemos salvar de diferentes formas:
17
DOCUMENTOS DE WORD 97-2003(*.doc), el peso no varía mucho y si no tiene OFFICE se guardará en FORMATO RTF (*.rtf) y es un poco más pesado que el (*.doc); TEXTO SIN FORMATO (*.txt); tablas guardar como plantillas y su extensión es (*.dot) es una base (machotes); PDF (*.pdf) éste puede publicarse con diferente peso y tiene una opción que se llama OPTIMIZAR y también podemos ver OPCIONES. Ir a la opción imprimir y desde ahí se puede guardar con (*.pdf). HTML y éste se puede publicar en la red pero aparecerá con errores.
SHIFT + CMD + F =FULL SCREEN en MAC
CTRL + L= FULL SCREEN en MAC (en el escritorio VIEW + FULL SCREEN MODE)
e-mail = 10 mb / blogs= 2mb / sitios=50 mb
8 bits = 1kb
1024 kb = 1mb
1024 mb =1gb
1024 gb =1tb
Para subir POWER POINT se aceptan hasta 20 Mg pero hay que bajar la resolución. Los editables son (*.ppt) o (*.pps). El PDF no es editable y la ventaja es que optimiza el pero pierde los efectos que se han agregado y también éste se puede optimizar un poco más en VERSIÓN OPTIMIZADA.
TIP: Todavía se puede optimizar la presentación en POWER POINT si las imágenes les bajamos la resolución en PHOTOSHOP.
CTRL + e (selecciona en PC)
PRESENTACIÓN CON DIAPOSITIVAS DE POWERPOINT 97-2003 (*.pps) ésta forma es para que no pasé por power point, tiene ventajas como: ya no se podrán hacer cambios en ella y las transiciones se pueden ver tal y como se hicieron (transiciones, efectos y música).
Opciones: (*.gif), (*.jpg), (*.png) o (*.tiff) esto sirve para una secuencia de imágenes. Hacer nueva carpeta y guardar como… esto servirá para no cargar la computadora y solamente se puede poner la memoria en las pantallas de los salones “eses” y con el control remoto se puede pasar en esas pantallas.
Peso recomendable para
18
Cuando no se muestran las extensiones de los archivos
Se selecciona algún documento (sin abrirlo) pero que solamente aparezca el contorno en éste y no en azul:
INCORREC
CORRECT
19
Se presionará la tecla ALT y nos muestra el menú, seleccionar HERRAMIENTAS + OPCIONES DE CARPETA + pestaña VER + deseleccionar OCULTAR LAS EXTENSIONES DE ARCHIVOS PARA…
20
Las pestañas se pueden generar desde PÁGINAS
AÑADIR NUEVA IMAGEN (subir objeto o PDF):
21
22
AÑADIR PRESENTACIÓN DE POWER POINT CONVERTIDA A JPG
Nuevamente en el blog en la opción de EDITAR PÁGINA se selecciona el icono de AÑADIR UNA IMAGEN
Ir al final de la venta y aparecerá OPCIONES DE LA GALERÍA y modificar ORDENAR IMÁGENES POR TÍTULO + INSERTAR GALERÍA
23
En el blog aparecerá de la siguiente manera:
Pero al seleccionar la imagen de la galería no se tiene una vista completa:
24
Las imágenes para mostrar en el blog deberán tener 640 de altura por lo que nos dé por default de anchura.
En el blog tenemos que posicionarnos en la parte MULTIMEDIA + LIBRERÍA MULTIMEDIA y se deberán editar las imágenes:
25
Se abrirá LIBRERÍA MULTIMEDIA y dar click ahí, aparecerán todo lo que se ha integrado al blog; a las imágenes las tendremos que modificar una por una. Seleccionamos en EDITAR en la imagen y tendremos que cambiarle el tamaño a 640 (ya que esto es el ancho que nos da para mostrar las imágenes en el blog):
Editar imagen:
26
Escalar imagen a 640, dar click en escala:
Actualizar medio:
27
Para editar las galerías se seleccionar la imagen que se abajo y en la parte superior izquierda aparece un icono EDITAR GALERÍA
Para borrar:
28
organizar
esquematizar
estructurar
Identificar t
Conducir al usuario a la información
(arquitectura de la información)
MAPA DE NAVEGACIÓN
MAPA
inicio
Inicio varios
Artículos
Notas
Noticias
Acerca de mi curriculum
Trayectoria
Formación
Multimedia definición
Láminas
Presentaciones
Documentos
videos
videos
lecturas
otras
curriculum
link
MAPA
link
MATERIALES DE APOYO -link -Recursos web -Videos
29
Para mostrar algunas cosas que solamente necesitamos vean en un semestre (o algo parecido) seleccionamos la página y editar. Se mostrará del lado derecho ESTADO (de la página) y aparece por default PUBLICADA hay que escoger BORRADOR.
Para que algunos alumnos solamente vean algo:
Añadir página nueva + VISIBILIDAD + EDITAR + protegida con contraseña