ANEXOS
ALUMNOS 3º
TECNOLOGÍAS DE LA
INFORMACIÓN Y
COMUNICACIÓN CON
ÉNFASIS EN
INFORMÁTICA
Elaboró
2
ANEXO 1“LO QUÉ SABES Y ESPERAS DE INFORMÁTICA EN TERCER GRADO”
NOMBRE DE LA ESCUELA: NOMBRE DEL ALUMNO: GRADO: GRUPO:
PREGUNTAS SI NO ESPECIFICA QUÉ HERRAMIENTAS HAS UTILIZADO DE ESOS
PROGRAMAS ¿Has utilizado algún programa o aplicación? Presentaciones Hoja de cálculo Lenguaje HTML Otro(s) RESPONDE
¿Qué nombre reciben los proyectos que se realizaron en primer y segundo grado?
¿Qué relación existe entre los temas vistos en primero y segundo grado con el medio ambiente?
¿Qué esperas realizar haciendo uso de la computadora durante el transcurso del ciclo escolar?
Oax., a _____ de ____________ de 200__.
ANEXO 1 “LO QUÉ SABES Y ESPERAS DE INFORMÁTICA EN TERCER GRADO”
NOMBRE DE LA ESCUELA: NOMBRE DEL ALUMNO: GRADO: GRUPO:
PREGUNTAS SI NO ESPECIFICA QUÉ HERRAMIENTAS HAS UTILIZADO DE ESOS
PROGRAMAS ¿Has utilizado algún programa o aplicación? Presentaciones Hoja de cálculo Lenguaje HTML Otro(s) RESPONDE
¿Qué nombre reciben los proyectos que se realizaron en primer y segundo grado?
¿Qué relación existe entre los temas vistos en primero y segundo grado con el medio ambiente?
¿Qué esperas realizar haciendo uso de la computadora durante el transcurso del ciclo escolar?
3
Livescribe Pulse Smartpen: Este innovador
aparato va grabando lo que tú escuchas mientras
tomas apuntes sobre un papel especial. Si
posteriormente lees tus notas y no las entiendes
bien, simplemente seleccionas la palabra y la
lapicera reproduce el audio en el momento
preciso en que escribiste la palabra.
Inodoro Caroma Profile Smart Dual Flush: En la
parte de arriba te lavas las manos. El agua usada
del lavamanos baja y llena el estanque del
inodoro para ser usado como descarga.
Totalmente ecológico y bien pensado. Pero no te
olvides de usar el lavamanos después de
levantarte… para llenar el estanque obviamente.
Craftsman Nextec Multi-Saw: Para los maestros
chasquilla, esta sierra es sumamente flexible y
portátil, además puede llegar a los lugares más
difíciles
de
cortar.
Procesador Atom de Intel: Pequeño, eficiente y
poderoso. Todo lo necesario para rockear a los
portátiles modernos que tanto usamos a diario.
Milwaukee M-specto: Cámara portátil que
inspecciona los rincones más escondidos. Útil
para contratistas o mecánicos que necesitan ver
más allá de sus ojos o de la flexibilidad de su
cuello.
ANEXO 2
Around View de Nissan: Impresionante sistema
que viene en los autos de lujo infiniti y permite
ver en un monitor los alrededores en 360 grados,
evitando así la
posibilidad de atropellar
a un
niño o chocar un objeto
que a
simple vista no se puede
ver.
Potenco PCG: Generador de energía que crea 40
minutos de energía para productos portátiles con
sólo 2 minutos de esfuerzo muscular.
INNOVACIÓN:
Es un proceso orientado al diseño y
manufactura de productos, en el que la
información y los conocimientos son los insumos
fundamentales para impulsar el cambio técnico.
Incluye la adaptación de medios técnicos, la
gestión e integración de procesos, así como la
administración y comercialización de los
productos.
Secretaría de Educación Publica 2009, Educación básica. Secundaria Programa de Estudio 2006, México, D.F., 82p.
Es la aplicación de nuevas ideas,
conceptos, productos, servicios y prácticas, con la
intención de ser útiles para el incremento de la
productividad. Un elemento esencial de la
innovación es su aplicación exitosa de forma
comercial. No solo hay que inventar algo, sino,
por ejemplo, introducirlo en el mercado para que
la gente pueda disfrutar de ello.
4
ANEXO 2 IMÁGENES
6
ANEXO 3
La información es un fenómeno que proporciona significado o sentido a las cosas, e indica mediante códigos
y conjuntos de datos, los modelos del pensamiento humano. La información por tanto, procesa y genera el
conocimiento humano. Aunque muchos seres vivos se comunican transmitiendo información para su
supervivencia, la diferencia de los seres humanos radica en su capacidad de generar y perfeccionar tanto
códigos como símbolos con significados que conformaron lenguajes comunes útiles para la convivencia en
sociedad, a partir del establecimiento de sistemas de señales y lenguajes para la comunicación.
Es por ello que en Informática existe:
Categorías en los lenguajes de programación los cuales se utilizan actualmente en todo el mundo. Los
lenguajes de programación normalmente se agrupan por su lugar en la evolución de los lenguajes de
programación. En relación son su historia evolutiva, los lenguajes de programación están divididos en tres
categorías:
Lenguajes Máquina
Lenguajes ensamblador
Lenguajes de alto nivel.
Los lenguajes de código máquina son los lenguajes fundamentales. Utilizando un lenguaje máquina, un
programador crea instrucciones en la forma de código máquina (unos y ceros) que una computadora puede
seguir.
Los lenguajes ensamblador fueron desarrollados mediante el uso de abreviaciones cortas del idioma inglés
para representar elementos comunes del código máquina. Para desarrollar software con un lenguaje
ensamblador, un programador debe utilizar un editor de texto (un procesador de texto simple) para crear
archivos de código. Para convertir los archivos fuente en código objeto, el desarrollador utiliza un programa
de traducción especial, llamado ensamblador, para convertir cada línea de código ensamblador en una línea
de código máquina. De ahí proviene el nombre de lenguaje ensamblador.
Los lenguajes de alto nivel fueron desarrollados para que la programación fuera más sencilla. Estos
lenguajes se conocen como lenguajes de alto nivel debido a que su sintaxis es más parecida a los idiomas
humanos que el código de lenguaje ensamblador o máquina.
Lenguajes de desarrollo de la World Wide Web
Lenguaje de marcación de hipertexto (HTML, por sus siglas en inglés). El lenguaje de marcación de
hipertexto es el lenguaje de programación que se utiliza para crear documentos para la World Wide Web.
Utilizando HTML, puede definir la estructura de un documento Web empleando componentes tales como
atributos y etiquetas. Las etiquetas, proporcionan vínculos a otros puntos del documento, a otros
documentos del mismo sitio o a documentos de otros sitios. Las etiquetas HTML también se utilizan para
dar formato a la apariencia de una página Web, insertar imágenes y elementos multimedia e incorporar
componentes que se crean en otros lenguajes de programación como Java o Flash.
El World Wide Web es un sistema distribuido de información basado en hipertexto e hipermedia. Fue
desarrollado en 1990 por un grupo de investigadores, bajo la dirección de Tim Berners-Lee, en el
Laboratorio Europeo de Física en Partículas, CERN, ubicado en Suiza. Ellos definieron los conceptos HTTP,
HTML y URL, que son la trilogía base para construir, localizar y tener acceso a las páginas Web.
7
Las direcciones del Web comienzan con las siglas HTTP que significan HyperText Transport Protocol o
Protocolo de Transporte de Hipertexto. Diseñado como una herramienta para facilitar la transmisión de
documentos compuestos de texto, gráficos y sonidos, el lenguaje HTML (HyperText Markup Languaje) es el
estándar para el diseño y creación de páginas Web. URL es el nombre del localizador de los recursos de
Internet: Uniform Resource Locator o Localizador Uniforme de Recursos.
En inglés website o web site, un sitio web es un sitio (localización) en la World Wide Web que contiene
documentos (páginas web) organizados jerárquicamente. Cada documento (página web) contiene texto y/o
gráficos que aparecen como información digital en la pantalla de un ordenador. Un sitio puede contener
una combinación de gráficos, texto, audio, vídeo, y otros materiales dinámicos o estáticos.
Cada sitio web tiene una página de inicio (en inglés Home Page), que es el primer documento que ve el
usuario cuando entra en el sitio web poniendo el nombre del
dominio
de ese sitio web en un
navegador
. El
sitio normalmente tiene otros documentos (páginas web) adicionales. Cada sitio pertenece y es gestionado
y por un individuo, una compañía o una organización.
A veces se utiliza erróneamente el término página web para referirse a sitio web. Una página web es parte
de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un sitio web es un
conjunto de archivos llamados páginas web.
Bibliografía
Obtenido de la Red http://www.masadelante.com/faq-sitio-web.htm ¿Qué es un Sitio web y Página web? - Definición de Sitio web y Página web.
8
ANEXO 4
Sumario de las etiquetas de HTML
Un documento HTML contiene dos partes distintas: la cabecera (head) y el cuerpo (body).
La cabecera (head) contiene información acerca del documento que no será visualizada en pantalla. El cuerpo (body) contiene todo lo demás que SÍ será visualizado en pantalla.
Estructura de una Página Web
<html>
<head>…</head> <body>…</body> </html>
Estructura HTML
Estructura básica de cualquier documento HTML
<title>...</title> Título del Documento
Va dentro de la etiqueta <head>...</head>
<!-- bla --> Comentario
Notas e información en el cuerpo pero no mostrado en el Browser
<body bgcolor=#XXXXXX> Color de Fondo
Da color al fondo de la página Web.
<body background="archivo.gif"> Textura del Fondo
Usa una imagen gráfica para repetidamente rellenar el fondo de una página web.
<body
TEXT=#XXXXXX LINK=#YYYYYY VLINK=#00HH00>
Texto y Links con Color
Da un color a todo el texto o da el color que el usuario quiera a los links.
Formateo de Texto
<Hn>...</Hn> <Hn
align=center>...</Hn>
Encabezados
Encabezados de sección de tamaño de texto diferente, donde n=1 to 6. align=center para alinear el encabezado en el centro de la página.
<b>...</b> <i>...</i> <tt>...</tt> <u>...</u> <strike>...</strike> Estilo
Aplica negrita, cursiva o terminal (fuente monoespaciada). Otros que pueden funcionar son subrayado y tachado.
<address>...</address> Address Dirección
Texto en cursiva y separado para pies de página.
<blockquote>... </blockquote>
Blockquote
9
<pre>...</pre> Texto PreformateadoMuestra el texto en fuente monoespaciada preservando los espacios y retornos de carro.
&xxxx; Caracteres Especiales
Códigos de caracteres especiales y marcas diacrÌticas.
<blink>...</blink> Blink
Hace parpadear un texto de forma muy poco elegante.
<font size=X>... </font>
Tamaño de Fuente
Cambia el tamaño de una selección de texto donde X=1-7. También puede usar cambios relativos (-1, +2, -1, -2, etc...) con respecto al valor actual de <basefont=Z>.
<big>...</big> <small>...</small>
Tamaño de Fuente
Cambia el tamaño de una selección de texto a mayor o menor tamaño que el texto normal.
<font color=#XXXXXX> ...
</font>
Color de Fuente
Cambia el color de la selección de texto donde XXXXXX es el código hexadecimal para los colores RGB.
<sup>...</sup> <sub>...</sub>
Super/Subíndices
Crea superíndices (p.ej. x3 + 2xy + y2 = 0) o subíndices (p.ej. H2SO4)
Rotura del Texto y Divisiones
<p> Párrafo
Fuerza un nuevo párrafo con una línea en blanco de separación.
<br> Rotura de Línea
Fuerza una nueva línea sin línea blanca de separación.
<hr> <hr width=X size=X align=left|right noshade> Línea Dura
Fuerza una nueva línea con línea sólida de separación. Atributos opcionales:
width especifica la anchura de la línea en la página, donde X es un n™mero de pixeles absoluto o "X%" para una anchura relativa a la ventana del browser;
size especifica el espesor de la línea en pixeles;
align fuerza a que la línea se alinee a un lado de la página en vez de en el centro; noshade dibuja una línea sólida, sin efectos 3D.
<center>... </center> <p align=center>... </p>
Alineación Central
Alinea cualquier cosa al centro de la página.
10
left|center|right>... </div>
Alinea cualquier cosa a la izquierda, centro o derecha de la página.
<table>...</table> <table border=X cellpadding=Y cellspacing=Z>... </table> <tr>...</tr> <td align=left|center|right valign=top|middle|bottom rowspan=X colspan=Y </td> Tabla
Una tabla simple incorpora bordes de 1 pixel y divisiones celulares. Omitiendo el atributo border o estableciendo border=0 se crea una tabla invisible. Los valores de border mayores que 1 crear·n un borde grueso en torno a la tabla. cellpadding es la cantidad de espacio (en pixeles) entre el contenido de la celda y las paredes de la misma. cellspacing determina la anchura de las paredes de las celdas. <tr> son definiciones de filas y <td> son definiciones de datos (una celda). Opciones dela etiqueta <td> son para alineación horizontal y/o vertical dentro de la celda. Los atributos rowspan y colspan se usan para crear celdas que ocupan más de una celda.
Listas <ul> <ol> <li> <li> <li> <li> </ul> </ol> Elementos de Listas
Listas Sin Ordenar <ul> para elementos separados, Listas Ordenadas <ol> para elementos enumerados.
<ul type=xxxx> <li
type=xxxx>
Marcadores para Listas Sin Ordenar
Prevalecen sobre los valores por defecto:
o type=circle type=square type=disc
<ol type=X> <li type=X>
Estilos de Numeración para Listas Ordenadas
Usan diferentes caracteres para las listas:
type=1 (1,2,3...) type=A (A,B,C,...) type=a (a,b,c,...) type=I (I,II,III,...) type=i (i,ii,iii,...) <ol start=i> <li value=j>
Valores de Numeración para Listas Ordenadas
start comenzar· una lista con cualquier número positivo. value renumerar· la lista desde dicho elemento y seguir· hasta que se de un nuevo valor.
<dl> <dt> <dd> <dt> <dd> </dl> Listas Descriptivas
11
Gráficos <img src="archivo.gif"> <img src="archivo.gif" alt="###" align=top|middle|bottom| left|right height=x width=y> Imagen InlineMuestra una imagen dentro de una página web. src (source) es el nombre, ruta de archivo o URL del archivo de la imagen; alt (alternative) es una cadena de texto mostrada en Brrowsers no gráficos o para usuarios con la carga de imágenes desactivada; align controla la relación de la imagen con el texto a su alrededor (top/middle/bottom alinear· UNA línea del texto que siga a la imagen; left/right colocar· la imagen a un lado de la página y el texto a su alrededor); height y width son las dimensiones de la imagen medidas en pixeles.
HiperLinks <a href="archivo.htm">
hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en el mismo directorio/carpeta. <a
href="data/archivo.htm"> hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en una carpeta/directorio llamado "data" en el cual se encuentra el documento HTML.
<a href="../archivo.htm"> hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en una carpeta/directorio un nivel superior a aquel donde se encuentra el documento HTML actual.
URL Uniform Resource Locator
Dirección de Recursos de Internet.
<a href="URL"> hipertexto</a>
Link HiperTexto de Internet
Enlaza con otro sitio Internet especificado por su URL.
<a name="xyz"<...> Anchor con Nombre
Marca una sección de texto dentro de un documento con el nombre "xyz".
<a href="file.htm#xyz"> hipertexto</a>
Link a un Anchor con Nombre
Salta a un anchor con nombre dentro del mismo o distinto documento.
<a href="url"> <img src="file.gif" border=0></a>
Link HiperGr·fico de Internet
imagen inline que act™a como hiperlink al sitio especificado por la URL. Especificando el atributo border=0 se suprimir· la caja alrededor de la imagen.
<a href="mailto: "[email protected]">... </a>
Link de E-Mail de Internet
Envía un e-mail a la dirección especificada.
<img src="image.gif" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> </map>
Mapas de Imágenes desde el Cliente
Mapas de imágenes clickeables interpretadas por el Browser. ... puede estar en cualquier lugar en este u otro archivo HTML. Las coordenadas son las de las esquinas superior izquierda e inferior derecha de una región rectangular.
12
BLOQUE II
13
ANEXO 5
Sistema Técnico
Se estructura por la relación e interdependencia entre los seres humanos, las herramientas o máquinas, los
materiales y el entorno para obtener un producto o una situación deseada.
Es característica de los sistemas técnicos el conocimiento el cual se expresa en las acciones que se llevan a
cabo para la toma de decisiones como para su ejecución y regulación.
Todo sistema técnico es organizado, porque sus elementos interaccionan en el tiempo y el espacio de
manera intencional; es dinámico por que cambia constantemente conforme los saberes avanzan, y es
sinérgico porque de la interacción de sus elementos se logran mejores resultados.
Sinergia: unión de varias fuerzas, causas, etc., para lograr una mayor efectividad.
Evolución de la World Wide Web
La World Wide Web se ha convertido en un vehículo global para el e-commerce, pues ha creado nuevas
formas en las que pueden interactuar los negocios con otros negocios y con los clientes. El e-commerce
significa hacer negocios en línea, por ejemplo, cuando algún consumidor compra un producto a través de la
Web, en lugar de ir a una tienda a comprarlo.
Las tecnologías de e-commerce cambia rápidamente la forma en que los individuos e empresas hacen
negocios. Pueden entrar en línea para comprar un libro, alquilar un automóvil, comprar comestibles o
alquilar películas. Incluso puede hacer que le entreguen una pizza en su casa sin tener que utilizar el
teléfono.
De hecho, la mayor parte de las actividades de e-commerce no se relaciona en ninguna manera con los
consumidores, sino que se llevan a cabo por empresas, las cuales han desarrollado sistemas de redes
complejos que están dedicados al procesamiento de órdenes, administración de inventarios y control de
pagos.
Decenas de miles de compañías en línea satisfacen las necesidades de los consumidores. Los sitios Web de
estas compañías proporcionan información sobre productos y servicios, toman pedidos, reciben pagos y
proporcionan un servicio al cliente inmediato. Los sitios Web orientados al consumidor tienen muchas
formas distintas y cubren toda clase de productos y servicios sin embargo, pueden dividirse en dos
categorías generales: sitios para compras y sitios para finanzas personales.
Los sitios de compras ofrecen servicios como: compra en línea, uso de catálogos en línea, pago de compras.
Y los sitios de finanzas ofrecen servicios como: banca en línea en donde permite crear una cuenta, transferir
fondos, pagar cuentas, además del servicio de finanzas en línea en los cuales se realizan inversiones y
solicitud de préstamos.
Otros servicios que ofrece la Web son: Noticias, charlas interactivas, mensajería instantánea, correo
electrónico.
14
Software de edición de imágenes
La creación o manipulación de una imagen puede involucrarse con un conjunto complejo de procesos.
Debido a que incluso los programas para imágenes más sofisticados no pueden realizar todas las
operaciones que podrían ser requeridas por algunos tipos de imágenes, los diseñadores frecuentemente
utilizan más de una de las cinco categorías principales de software para imágenes con el fin de alcanzar sus
objetivos. Entre esas categorías se incluyen:
Programas de dibujo de imágenes de mapas de bits.
Programas de edición de fotografías.
Programas de dibujo.
Programas de diseño asistido por computadora (CAD).
Programas de imágenes 3-D y de animación.
Bibliografía
Educación básica. Secundaría Programas de Estudio 2006.Definición sistema técnico. Pág. 79
Lectura tomada y modificada del libro Introducción a la computación de Peter Norton sexta edición. Pág. 326-33 y 398 - 399.
15
BLOQUE III
16
ANEXO 6 INTERPOLACIÓN DE MOVIMIENTO
Circulo desplazándose
En esta animación se trata de crear el efecto del círculo desplazándose de izquierda a derecha del escenario, es sencillo y según la complejidad que le pongas se puede lograr un buen efecto.
1. Para comenzar dibujaremos un círculo utilizando la herramienta óvalo en la parte superior izquierda del escenario (recuerda que el escenario es el recuadro blanco).
2. En la línea de tiempos damos clic en fotograma (cuadro que está debajo del número 60) que es esta ocasión será hasta donde llegara nuestra interpolación de movimiento y enseguida clic derecho seleccionando la opción Insertar fotograma clave.
3. En el primer fotograma dar clic derecho a la opción Crear interpolación de movimiento.
4. Podrás observar que en la línea de tiempos del fotograma 1 al 60 cambia de color gris a un color
lavanda.
5. Para lograr el efecto que la pelota baje clic debajo del fotograma 10, clic derecho a la opción Insertar
17
Clic a la herramienta Flecha para seleccionar la pelota y con clic sostenido arrastrar hacia la derecha del escenario.
6. Podrás verificar el movimiento, con un clic sostenido del fotograma 60 al 1. 7. Para ver la animación terminada pulsa las teclas Control y Enter al mismo tiempo.
8. Para guardar la animación ir al menú Archivo Guardar en la carpeta BLOQUE III ANIMACIÓN FLASH con el nombre interpolación. Automáticamente se generan 3 archivos uno con extensión .fla
18
ANEXO 7 CREACIÓN DE ANIMACIÓN FOTOGRAMA POR FOTOGRAMA
Circulo desplazándose
En esta animación se trata de crear el efecto del círculo rebotando en distintas áreas del escenario.
1. Para comenzar dibujaremos un círculo utilizando la herramienta óvalo en la parte superior izquierda del escenario (recuerda que el escenario es el recuadro blanco).
2. Ahora lo que vamos a hacer es a crear un movimiento cuadro por cuadro del círculo por la escena:
3.
Si nos fijamos bien en la línea de tiempo tenemos un pequeño cuadro gris ese cuadro es un fotograma y actualmente nuestra película solo consta de un solo fotograma.19
4. Lo que vamos a hacer ahora es agregar un nuevo fotograma a nuestra escena para esto damos un clic derecho en el fotograma vació de la derecha en la línea de tiempo y seleccionamos “INSERTAR
FOTOGRAMA CLAVE”.
5. Ahora vemos que tenemos 2 fotogramas en la línea de tiempo, nos situamos en el segundo fotograma dando un clic sobre él en la línea de tiempo y en la escena seleccionamos todo el circulo y movámoslo un poco.
6. Repitamos todos los pasos anteriores hasta tener 5 fotogramas y en cada uno de ellos moviendo el círculo a una posición distinta.
7. Para ver la animación terminada pulsa las teclas Control y Enter al mismo tiempo.
8. Para guardar la animación ir al menú Archivo Guardar en la carpeta BLOQUE III ANIMACIÓN FLASH con el nombre fotograma. Automáticamente se generan 3 archivos uno con extensión .fla
20
ANEXO 8
CAPAS
Las capas son como los niveles en que se separa la barra de tiempo en donde podemos poner diferentes objetos
Hagamos un ejemplo para ver su utilidad:
En la lección anterior creamos una interpolación de movimiento de una figura moviéndose de un extremo al otro de la pantalla
Ahora digamos que queremos que una figura se mueva desde la parte superior de la escena hasta la inferior de la escena.
¿Cómo hacemos esto?
Pues aquí es donde necesitaremos crear una nueva capa.
1. Para comenzar dibujaremos un círculo utilizando la herramienta óvalo en la parte superior izquierda del escenario (recuerda que el escenario es el recuadro blanco).
2. Ahora lo que vamos a hacer es a crear un movimiento cuadro por cuadro del círculo por la escena:
3.
Si nos fijamos bien en la línea de tiempo tenemos un pequeño cuadro gris ese cuadro es un fotograma y actualmente nuestra película solo consta de un solo fotograma.21
4. Lo que vamos a hacer ahora es agregar un nuevo fotograma a nuestra escena para esto damos un clic derecho en el fotograma vació de la derecha en la línea de tiempo y seleccionamos “INSERTAR
FOTOGRAMA CLAVE”.
5. Ahora vemos que tenemos 2 fotogramas en la línea de tiempo, nos situamos en el segundo fotograma dando un clic sobre él en la línea de tiempo y en la escena seleccionamos todo el circulo y movámoslo un poco.
6. Repitamos todos los pasos anteriores hasta tener 5 fotogramas y en cada uno de ellos moviendo el círculo a una posición distinta.
7. Para ver la animación terminada pulsa las teclas Control y Enter al mismo tiempo.
8. Para guardar la animación ir al menú Archivo Guardar en la carpeta BLOQUE III ANIMACIÓN FLASH con el nombre fotograma. Automáticamente se generan 3 archivos uno con extensión .fla
22
BLOQUE IV
23
ANEXO 9 Animar Texto por Bloques
Objetivo
Crear una animación sobre un texto separado en bloques de letras cuyo movimiento será tratado de manera
independiente, dando al texto un efecto vistoso que pudiera servir como presentación de entrada a una web u otro tipo de película.
1.- Se selecciona la herramienta Texto y se dibuja un recuadro en el escenario, enseguida escribes el texto
ejemplo: AULA
2.- Seleccionas el texto, ir al menú Texto y seleccionar la fuente y tamaño.
3.- Se selecciona nuevamente el texto, ir al menú Modificar y dar clic a la opción Separar.
4.- Se selecciona todo el texto, ir al
menú Modificar y dar clic a la opción Distribuir en capas.
Debajo del texto Línea de Línea de Tiempo aparecerá cada
una de las capas.
5.- Se debe eliminar la capa que esta demás. Dando clic derecho sobre ella y después en la opción Eliminar
Capa.
6.- El orden en que deben estar cada una de las capas es comenzado primero con la última letra, para ello
debemos ordenar las capas. Se da clic a la primera capa y con un clic sostenido se arrastra al último lugar,
luego clic a la L y se arrastras al penúltimo lugar y se hace los mismo con las letras faltantes, hasta quedar
como se muestra en la figura 2.
24
7.- En la línea del tiempo con un clic sostenido de arriba hacia abajo se selecciona el 10.
Enseguida clic derecho sobre la zona de color azul en la opción Insertar
Fotograma Clave.
8.- Se regresa con un clic sostenido el cuadro rojo hasta el número 1.
9.- Con la herramienta Flecha se selecciona el texto y se arrastra hasta la parte inferior del escenario.
Después que el texto ya se movió regresamos a la línea de tiempo y con clic sostenido movemos el cuadro
rojo hasta el 10cto para ver el efecto de desplazamiento.
10. Con clic sostenido en la línea de tiempo se selecciona del 20 al 25. Después clic derecho sobre la zona
azul y seleccionar la opción Insertar fotograma clave.
11.- Después seleccionamos antes del cinco y después como se muestra en la figura. Enseguida clic derecho
en la opción Crear interpolación de movimiento.
25
12.- Para probar el efecto ir al menú Control en la opción Probar película. El efecto que vas a ver es el
desplazamiento del texto de arriba hacia abajo, pero lo que queremos es animar letra por letra, para ello se
realiza lo siguiente.
En la línea de tiempo clic a la capa de la letra U
Se selecciona del 1 al 10 en la línea del tiempo, cuando este sombreado de color negro con clic sostenido se
mueve la selección dos fotogramas más adelante.
Se repite el mismo procedimiento con las otras capas moviendo dos fotogramas aproximadamente por cada
uno quedando en forma de escalera como se muestra en la figura.
13.- Clic al menú Control en la opción Probar película para que puedas ver el efecto de desplazamiento de
cada una de las letras hacia arriba.
26
BLOQUE V
PROPUESTA DE PLAN DEL PROYECTO DE INNOVACIÓN
(CREACIÓN DEL BLOG DE LA ESCUELA)
ACTIVIDADES
MATERIALES Y EQUIPO
NECESARIO
RESPONSABLE(S)
I. GENERALIDADES DEL BLOG
1.1 Objetivo del Blog
1.2 A qué usuarios esta dirigido el Blog
1.3 Estructuración, Diseño y posibles mejoras del blog
1.4 Contenido
1.5 Presupuesto para su realización
II. EL PROCESO DE DESARROLLO (CREACIÓN DEL BLOG Y
ANIMACIONES)
2.1 Verificación de recursos necesarios
2.1.1 Tecnología (hardware y software)
2.1.2 Alojamiento para animaciones
2.1.3 Presupuesto
2.2 Arquitectura de la información
2.2.1 Especificaciones del diseño del blog
2.2.2 Descripción detallada del blog
2.2.3 Estructura cronológica de las entradas del blog
2.2.4 Realización e incorporación de animaciones
2.3 Construcción del blog
2.3.1 Terminación de todas las entradas del blog
2.3.2 Terminación de diseño y animación
2.3.3 Pruebas y corrección del blog
2.3.4 Pruebas de funcionalidad
2.3.5 Manuales del blog y archivos utilizados
2.4 Seguimiento, evaluación y mantenimiento del blog
III. EVALUACIÓN DEL PROYECTO
1
ANEXO DESCRIPCIÓN DE LAS ACTIVIDADES DE LA PROPUESTA
ESPECIFICACIÓN GENERALES
Con forme la tecnología avanza, las herramientas de la información también avanzan, la entrada del
internet a nuestra vida diaria ha hecho que todo se vuelva más sencillo. Un blog en nuestros días es muy
común, cualquier persona pueda tenerlo, es un espacio en donde se expresa con total soltura la forma de
comunicar, comprende la intención de dar a conocer información de algún tema en específico.
Sencillamente la era de la tecnología ha llegado a innovar la información y no hacerla solamente de manera
verbal, en videos, escrita, o en periódicos, como comúnmente se hacia, siempre y cuando se realicen con el
correcto uso de los recursos.
I. GENERALIDADES DEL BLOG
1.1 ¿Objetivo(s) del blog?
Comprende un escrito con dos o tres objetivos los cuales serán la base del diseño del blog. Se debe incluir
estrategias específicas en torno al cual el blog será diseñado, el tiempo que durará la creación del blog a
fin de asegurarse el éxito del blog.
1.2 A qué usuarios esta dirigido
La siguiente actividad consiste en identificar a los posibles usuarios del blog para que se pueda estructurar
el diseño e información para satisfacer sus necesidades y expectativas. El conocimiento, de antecedentes,
intereses y necesidades de los usuarios varían dependiendo de si son iniciados o usuarios expertos en la
navegación en Internet. Un sistema bien diseñado debe ser capaz de captar a usuarios de todas las
habilidades e intereses.
1.3 Estructuración, Diseño y posibles mejoras del blog
Se debe contemplar la forma en que estará estructurada la información, así como el diseño que tendrá el
blog. Para ello es importante llegar a acuerdos dentro del equipo de trabajo a través del consenso. El
objetivo en esta etapa es determinar los posibles modelos y ver el problema de diseño del blog desde el
punto de vista del usuario.
Se pueden hacer diferentes pruebas preliminares a fin de que el equipo pueda visualizar el blog desde un
punto de vista del usuario. Lo cual puede permitir realizar las mejoras al trabajo.
1.4 Contenido
Una vez que se tiene la idea del blog, el o los objetivos y la estructura general, se puede comenzar a
evaluar el contenido que tendrá que insertarse para cumplir con los planes. La definición del contenido
obligará a tener en cuenta un análisis detallado del contenido existente y los recursos para hacer un
esquema detallado de las necesidades. Una vez que sepa donde está la deficiencia en el contenido, se
podrá centrar en zonas con recursos existentes listos para el uso. Una clara comprensión de las
necesidades también ayudará a desarrollar un calendario realista y el presupuesto para el proyecto. El
desarrollo de contenidos es la más difícil, la mayor parte del tiempo que consume parte de cualquier sitio.
II. EL PROCESO DE DESARROLLO (CREACIÓN DEL BLOG Y ANIMACIONES)
En esta fase corresponde analizar la información que se necesita para justificar el presupuesto y los
recursos necesarios. Este es también el momento de definir el alcance de los contenidos, la funcionalidad
interactiva, el apoyo tecnológico necesario, la profundidad y la amplitud de los recursos de información
que se necesita para su creación y cumplir con las expectativas del usuario.
2
2.1.1. Tecnología (hardware y software)
¿Qué sistema operativo utilizar?
- Windows, Macintosh, UNIX, Linux, o Mozilla, Internet Explorer.
¿Qué versión de flash?
¿Qué equipo fotográfico utilizar?
2.1.2. Alojamiento para animaciones
2.1.3. Presupuesto
Hardware y software para el desarrollo
2.2. Arquitectura de la información
En esta etapa es necesario precisar el contenido y la organización del diseño de blog. El equipo deberá
definir todos los contenidos, describir lo que es necesario, y definir la estructura organizativa del trabajo
dela elaboración de blogs.
Una vez que una arquitectura de contenidos se ha esbozado, se debe construir prototipos para poner a
prueba lo que se siente al moverse navegar en el blog. Los prototipos son útiles por dos razones. En
primer lugar, son la mejor forma de poner a prueba la navegación y el desarrollo de la interfaz de usuario.
Los prototipos deben incorporar lo necesario para evaluar con precisión. En segundo lugar, la creación de
un prototipo permite a los diseñadores valorar cómo se ve el sitio y la forma en que la interfaz de
navegación apoya el diseño de la información.
2.2.1 Especificaciones de diseño del blog
2.2.2 Descripción detallada del blog
2.2.3 Estructura cronológica de las entradas del blog
2.2.4 Realización e incorporación de animaciones
2.3. Construcción del blog
En esta fase, el proyecto adquiere su aspecto y, el diseño gráfico se crea y se aprueba. Ahora, las
ilustraciones, las fotografías, y otros gráficos o contenidos audiovisuales para el sitio ya se pueden ver. La
investigación, la escritura, la organización, el montaje y edición del contenido de texto también se realiza
en esta etapa.
El objetivo es producir todo el contenido funcional de los componentes.
2.3.1 Terminación de todas las entradas del blog
2.3.2 Terminación de diseño y animación
2.3.3 Pruebas y corrección del blog
2.3.4 Pruebas de funcionalidad
2.3.5 Manuales del blog y archivos utilizados
2.4. Seguimiento, evaluación y mantenimiento del blog
Nunca se puede abandonar un sitio una vez que la producción se ha terminado y se ha publicado, además
de dar a conocer la dirección URL del sitio a una audiencia más grande. La estética y los aspectos
funcionales de un sitio necesitan constantemente de atención y cuidado, especialmente si un grupo de
personas comparte la responsabilidad de la actualización de contenidos. Alguien tendrá que ser
responsable de la coordinación y control de los nuevos contenidos y los vínculos funcionales. Los enlaces
en la Web son perecederos, y tendrá que comprobar periódicamente que los enlaces a otros sitios siguen
funcionando.
ANEXOS
DOCENTE 3º
TECNOLOGÍAS DE LA
INFORMACIÓN Y
COMUNICACIÓN CON
ÉNFASIS EN
INFORMÁTICA
Elaboró
ANEXO 1
INTERPRETACIÓN DE LA DESCRIPCIÓN DEL TERCER GRADO POR BLOQUES
Criterio Cognitivo (Conocimientos).
BLOQUE I Tecnología, información e innovación.
Características del mundo actual (información).
Conocimiento de instrumentos y desarrollo de habilidades cognitivas y procedimentales.
Uso de información (TIC, la tradicional) información diferente del conocimiento.
Información para la innovación.
Criterio Sociocultural.
BLOQUE II Campos tecnológicos y diversidad cultural.
Los cambios técnicos en diversos contextos socioculturales. Cómo el Cambio técnico está
relacionado con el cambio cultural.
Revisión de técnicas e insumos utilizados en contextos, tiempos y propósitos diferentes.
Análisis sistémico a creaciones técnicas.
Técnicas comunes en los campos tecnológicos.
Criterio Naturaleza.
BLOQUE III Innovación técnica y desarrollo sustentable.
Análisis de las características de los sistemas técnicos.
Principios de desarrollo sustentable en los sistemas técnicos.
Innovaciones sustentables.
Normatividad ambiental para los sistemas técnicos.
Evaluación de sistemas tecnológicos para innovar según el contexto.
Propuestas para el aprovechamiento adecuado de los recursos (reúso, buen uso).
Criterio Gestión.
BLOQUE IV Evaluación de los sistemas tecnológicos
Evaluación integral de los sistemas tecnológicos.
El principio precautorio y normatividad en las innovaciones.
Implementación de sistemas de control.
BLOQUE V Proyecto de Innovación
Análisis de proceso de innovaciones tecnológicas y sus implicaciones en el cambio técnico.
Análisis de la flexibilidad de los procesos técnicos.
El uso de la información de usuarios para la innovación.
ATENTAMENTE
ANEXO 2
LA HISTORIA DE INTERNET
Las semillas de Internet se sembraron en 1969, cuando la Agencia de Proyectos de Investigación Avanzada
(ARPA, por sus siglas en inglés) de Departamento de Defensa de Estado Unidos comenzó a conectar
computadoras en distintas universidades y empresas relacionadas con el ejército. La red resultante fue
llamada ARPANET. El objetivo de este primer proyecto fue el de crear una gran red de computadoras con
múltiples rutas de conexión. ARPANET tenía una segunda razón, permitir que personas de ubicaciones
remotas tuvieran la oportunidad de compartir recursos computacionales escasos.
Al principio ARPANET era básicamente una red grande que sólo servía a unos cuantos usuarios, pero se
extendió rápidamente. Inicialmente, la red incluía cuatro computadoras host principales. Una
computadora host es parecida a un servidor de red, el cual proporciona servicios a otras computadoras que
se conectan con él. Las computadoras host de ARPANET proporcionaban servicios de transferencia de
archivos y de comunicaciones.
La red cruzó a través del Atlántico hasta Europa en 1973. A mediados de la década de los ochenta, otra
agencia federal, la Fundación Nacional para la Ciencia (NSF, por sus siglas en inglés) se unió al proyecto
después de que el Departamento de Defensa dejó de financiar la red. Además de que ARPANET no podría
manejar la carga, en respuesta, la NSF creó una red nueva de capacidad más alta llamada NSFnet, el enlace
entre ARPANET, NSFnet y otras redes se llamo Internet.
A principios de los años noventa, el interés en Internet comenzó a extenderse, el sistema que había sido
creado como una herramienta para sobrevivir en la guerra encontró la forma de llegara a las empresas y
hogares. Actualmente Internet conecta miles de redes y cientos de millones de usuarios en todo el mundo.
Bibliografía
ANEXO 3
Nota: el orden en que los alumnos coloquen los diferentes tipos de computadoras, puede variar al que a continuación se presenta. Lo que no varía
es el nombre, características e imagen de cada uno de ellas.
Supercomputadoras
Son las computadoras más poderosas que se fabrican y físicamente están entre las más grandes. Estos sistemas pueden procesar enormes cantidades de datos y los más rápidos pueden realizar más de un billón de cálculos pos segundo. Algunas pueden alojar miles de procesadores. Se utilizan para el trazo del genoma humano, el pronóstico del clima y en la modelación de procesos complejos como la fisión nuclear.
Mainframe
Se utilizan en organizaciones grandes, en donde, con frecuencia muchas personas necesitan utilizar los mismo datos. Cada usuario accede a sus recursos mediante un dispositivo llamado terminal.
Teléfonos inteligentes
Algunos se desempeñan como computadoras PC miniatura, debido que que ofrecen características que avanzadas que no se encuentran normalmente en los móviles, puedes acceder desde ellos a la Web, correo electrónico, cámaras digitales o reproductores de música.
Computadoras de escritorio
Es el tipo más común de computadoras personales, estás máquinas no sólo permiten a las personas hacer sus trabajos, sino que se pueden utilizar para establecer comunicaciones, producir música, jugar juegos y muchas otras funciones.
Computadoras Laptop
Tienen ese nombre debido a que las personas frecuentemente colocan estos dispositivos sobre sus regazos. Estas computadoras pueden funcionar con corriente alterna o baterías especiales.
Tablet PC
Es el desarrollo más reciente de computadoras, son muy ligeras y aceptan la introducción de datos con una pluma especial(llamada stylus o pluma digital) que se utiliza para tocar la pantalla o escribir directamente sobre ella, muchas también cuentan con software especial que acepta la entrada de voz del usuario.
Ejemplo de las tarjetas a elaborar para realizar la actividad.
SUPERCOMPUTADORAS
MAINFRAME TELÉFONOS
INTELIGENTES
COMPUTADORAS
DE
ESCRITORIO
COMPUTADORAS
LAPTOP
TABLET
PC
ANEXO 5
TIPOS DE ESTRUCTURA DE PÁGINAS WEB
La Estructura
La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar el sitio.
Planifique la estructura antes de empezar
Antes de crear un conjunto de páginas web uno ha de tener una idea clara de cómo va a ser la estructura de dichas páginas, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará, pero si el sitio va a albergar un gran número de páginas es recomendable usar algún tipo de programa que permita manejar estructuras de tipo grafo.
Jerárquica
La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida, esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.
Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.
Lineal
La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior.
Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante.
Lineal con jerarquía
Este tipo de estructura es una mezcla de las dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea.
Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro.
Red
La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente.
Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.
Un grafo en el ámbito de las ciencias de la computación es una estructura de datos.
ANEXO 6
Ejemplos
ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
<html><head>
<title> Mi primer página </title> <!—se usa para identificar únicamente a cada documento y se muestra en la barra de título de la ventana del Browser -->
</head>
<body> Este es mi primer ejercicio en HTML </body> </html>
UTILIZANDO ENCABEZADOS
<html> <head>
<title> Mi primer página </title> </head>
<body> Este es mi primer ejercicio en HTML </body>
<h1> Mis Datos </h1> <h2> Lugar de nacimiento</h2> <h2> Fecha de nacimiento</h2> <h3> Música favorita </h3> <h3> Pasatiempo favorito </h3> </html>
UTILIZANDO SEPARACIÓN DE PÁRRAFOS
<html> <head>
<title> Mi primer página </title> </head>
<body> Este es mi primer ejercicio en HTML </body> <h1> Mis Datos </h1>
Mi nombre es Juan Antonio López Hernández, mis papás son Antonio López Sánchez y mi mamá Josefina Hernández Hernández,<p> tengo dos hermanos José y Carmen de 14 y 9 años respectivamente. <h2> Lugar de nacimiento</h2>
Oaxaca de Juárez, Oax.
<h2> Fecha de nacimiento</h2> <h3> Música favorita </h3> <h3> Pasatiempo favorito </h3> </html>
UTILIZANDO SEPARACIÓN CON LÍNEA
<html> <head>
<title> Mi primer página </title> </head>
<body> Este es mi primer ejercicio en HTML </body>
<hr>
<h1> Mis Datos </h1>
Mi nombre es Juan Antonio López Hernández, mis papás son Antonio López Sánchez y mi mamá Josefina Hernández Hernández,<p> tengo dos hermanos José y Carmen de 14 y 9 años respectivamente. <h2> Lugar de nacimiento</h2>
Oaxaca de Juárez, Oax.
<h2> Fecha de nacimiento</h2> <h3> Música favorita </h3> <h3> Pasatiempo favorito </h3> </html>
UTILIZANDO LISTAS DESORDENADAS
<html> <head>
<title> Mi primer página </title> </head>
<body> Este es mi primer ejercicio en HTML </body> <hr>
<h1> Mis Datos </h1>
Mi nombre es <b>Juan Antonio López Hernández</b>, mis papás son Antonio López Sánchez y mi mamá Josefina Hernández Hernández,<p> tengo dos hermanos José y Carmen de 14 y 9 años respectivamente.
<h2> Lugar de nacimiento</h2> Oaxaca de Juárez, Oax.
<h2> Fecha de nacimiento</h2> <h3> Música favorita </h3> <ul> <li> Rock <li> Reggeton <li> Pop </ul> <h3> Pasatiempo favorito </h3> </html>
Sumario de las etiquetas de HTML PARA EL DOCENTE
Estructura de una Página Web
<html>
<head>…</head> <body>…</body> </html>
Estructura HTML
Estructura básica de cualquier documento HTML
<title>...</title> Título del Documento
Va dentro de la etiqueta <head>...</head>
<!-- bla --> Comentario
Notas e información en el cuerpo pero no mostrado en el Browser
<body bgcolor=#XXXXXX> Color de Fondo
Da color al fondo de la página Web.
<body background="archivo.gif"> Textura del Fondo
Usa una imagen gráfica para repetidamente rellenar el fondo de una página web.
<body
TEXT=#XXXXXX LINK=#YYYYYY VLINK=#00HH00>
Texto y Links con Color
Da un color a todo el texto o da el color que el usuario quiera a los links.
Formateo de Texto
<Hn>...</Hn> <Hn
align=center>...</Hn>
Encabezados
Encabezados de sección de tamaño de texto diferente, donde n=1 to 6. align=center para alinear el encabezado en el centro de la página.
<b>...</b> <i>...</i> <tt>...</tt> <u>...</u> <strike>...</strike> Estilo
Aplica negrita, cursiva o terminal (fuente monoespaciada). Otros que pueden funcionar son subrayado y tachado.
<address>...</address> Address Dirección
Texto en cursiva y separado para pies de página.
<blockquote>... </blockquote>
Blockquote
Indenta y desplaza texto para citas largas.
<pre>...</pre> Texto Preformateado
Muestra el texto en fuente monoespaciada preservando los espacios y retornos de carro.
&xxxx; Caracteres Especiales
<blink>...</blink> Blink
Hace parpadear un texto de forma muy poco elegante.
<font size=X>... </font>
Tamaño de Fuente
Cambia el tamaño de una selección de texto donde X=1-7. También puede usar cambios relativos (-1, +2, -1, -2, etc...) con respecto al valor actual de <basefont=Z>.
<big>...</big> <small>...</small>
Tamaño de Fuente
Cambia el tamaño de una selección de texto a mayor o menor tamaño que el texto normal.
<font color=#XXXXXX> ...
</font>
Color de Fuente
Cambia el color de la selección de texto donde XXXXXX es el código hexadecimal para los colores RGB.
<sup>...</sup> <sub>...</sub>
Super/Subíndices
Crea superíndices (p.ej. x3 + 2xy + y2 = 0) o subíndices (p.ej. H2SO4)
Rotura del Texto y Divisiones
<p> Párrafo
Fuerza un nuevo párrafo con una línea en blanco de separación.
<br> Rotura de Línea
Fuerza una nueva línea sin línea blanca de separación.
<hr> <hr width=X size=X align=left|right noshade> Línea Dura
Fuerza una nueva línea con línea sólida de separación. Atributos opcionales:
width especifica la anchura de la línea en la página, donde X es un n™mero de pixeles absoluto o "X%" para una anchura relativa a la ventana del browser;
size especifica el espesor de la línea en pixeles;
align fuerza a que la línea se alinee a un lado de la página en vez de en el centro; noshade dibuja una línea sólida, sin efectos 3D.
<center>... </center> <p align=center>... </p>
Alineación Central
Alinea cualquier cosa al centro de la página.
<div align= left|center|right> ...
</div>
División
Alinea cualquier cosa a la izquierda, centro o derecha de la página.
<table>...</table> <table border=X cellpadding=Y cellspacing=Z>... </table> <tr>...</tr> <td align=left|center|right valign=top|middle|bottom rowspan=X colspan=Y </td> Tabla
Una tabla simple incorpora bordes de 1 pixel y divisiones celulares. Omitiendo el atributo border o estableciendo border=0 se crea una tabla invisible. Los valores de border mayores que 1 crear·n un borde grueso en torno a la tabla. cellpadding es la cantidad de espacio (en pixeles) entre el contenido de la celda y las paredes de la misma. cellspacing determina la anchura de las paredes de las celdas. <tr> son definiciones de filas y <td> son definiciones de datos (una celda). Opciones dela etiqueta <td> son para alineación horizontal y/o vertical dentro de la celda. Los atributos rowspan y colspan se usan para crear celdas que ocupan más de una celda.
Listas <ul> <ol> <li> <li> <li> <li> </ul> </ol> Elementos de Listas
Listas Sin Ordenar <ul> para elementos separados, Listas Ordenadas <ol> para elementos enumerados.
<ul type=xxxx> <li
type=xxxx>
Marcadores para Listas Sin Ordenar
Prevalecen sobre los valores por defecto:
o type=circle type=square type=disc
<ol type=X> <li type=X>
Estilos de Numeración para Listas Ordenadas
Usan diferentes caracteres para las listas: type=1 (1,2,3...) type=A (A,B,C,...) type=a (a,b,c,...) type=I (I,II,III,...) type=i (i,ii,iii,...) <ol start=i> <li value=j>
Valores de Numeración para Listas Ordenadas
start comenzar· una lista con cualquier número positivo. value renumerar· la lista desde dicho elemento y seguir· hasta que se de un nuevo valor.
<dl> <dt> <dd> <dt> <dd> </dl> Listas Descriptivas
Listas con elementos de texto <dt> y definiciones indentadas <dd>
Gráficos <img src="archivo.gif"> <img src="archivo.gif" alt="###" align=top|middle|bottom| left|right height=x width=y> Imagen Inline
Muestra una imagen dentro de una página web. src (source) es el nombre, ruta de archivo o URL del archivo de la imagen; alt (alternative) es una cadena de texto mostrada en Brrowsers no gráficos o para usuarios con la carga de imágenes desactivada; align controla la relación de la imagen con el texto a su alrededor (top/middle/bottom alinear· UNA línea del texto que siga a la imagen; left/right colocar· la imagen a un lado de la página y el texto a su alrededor); height y width son las dimensiones de la imagen medidas en pixeles.
HiperLinks
<a href="archivo.htm"> hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en el mismo directorio/carpeta.
<a
href="data/archivo.htm"> hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en una carpeta/directorio llamado "data" en el cual se encuentra el documento HTML.
<a href="../archivo.htm"> hipertexto</a>
Link HiperTexto Local
Enlaza con otro documento en una carpeta/directorio un nivel superior a aquel donde se encuentra el documento HTML actual.
URL Uniform Resource Locator
Dirección de Recursos de Internet.
<a href="URL"> hipertexto</a>
Link HiperTexto de Internet
Enlaza con otro sitio Internet especificado por su URL.
<a name="xyz"<...> Anchor con Nombre
Marca una sección de texto dentro de un documento con el nombre "xyz".
<a href="file.htm#xyz"> hipertexto</a>
Link a un Anchor con Nombre
Salta a un anchor con nombre dentro del mismo o distinto documento.
<a href="url"> <img src="file.gif" border=0></a>
Link HiperGr·fico de Internet
imagen inline que act™a como hiperlink al sitio especificado por la URL. Especificando el atributo border=0 se suprimir· la caja alrededor de la imagen.
<a href="mailto: "[email protected]">... </a>
Link de E-Mail de Internet
Envía un e-mail a la dirección especificada.
<img src="image.gif" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> </map>
Mapas de Imágenes desde el Cliente
Mapas de imágenes clickeables interpretadas por el Browser. ... puede estar en cualquier lugar en este u otro archivo HTML. Las coordenadas son las de las esquinas superior izquierda e inferior derecha de una región rectangular.
ANEXO 7 DEFINICIONES
BLOG
Un blog, o en español también una bitácora, es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente. El nombre bitácora está basado en los cuadernos de bitácora. Cuadernos de viaje que se utilizaban en los barcos para relatar el desarrollo del viaje y que se guardaban en la bitácora. Aunque el nombre se ha popularizado en los últimos años a raíz de su utilización en diferentes ámbitos, el cuaderno de trabajo o bitácora ha sido utilizado desde siempre. Este término inglés blog o weblog proviene de las palabras web y log ('log' en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bitácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en la web (en línea).
WIKI
Un wiki, o una wiki, es un sitio web cuyas páginas web pueden ser editadas por múltiples voluntarios a través del navegador web. Los usuarios pueden crear, modificar o borrar un mismo texto que comparten. Los textos o «páginas wiki» tienen títulos únicos. Si se escribe el título de una «página wiki» en algún lugar del wiki, esta palabra se convierte en un «enlace web» a la página web.
En una página sobre «alpinismo» puede haber una palabra como «piolet» o «brújula» que esté marcada como palabra perteneciente a un título de página wiki. La mayor parte de las implementaciones de wikis indican en el URL de la página el propio título de la página wiki (en Wikipedia ocurre así: http://es.wikipedia.org/wiki/Alpinismo), facilitando el uso y comprensibilidad del link fuera del propio sitio web. Además, esto permite formar en muchas ocasiones una coherencia terminológica, generando una ordenación natural del contenido.
La aplicación de mayor peso y a la que le debe su mayor fama hasta el momento ha sido la creación de enciclopedias colaborativas, género al que pertenece la Wikipedia. Existen muchas otras aplicaciones más cercanas a la coordinación de informaciones y acciones, o la puesta en común de conocimientos o textos dentro de grupos.
La mayor parte de los wikis actuales conservan un historial de cambios que permite recuperar fácilmente cualquier estado anterior y ver 'quién' hizo cada cambio, lo cual facilita enormemente el mantenimiento conjunto y el control de usuarios destructivos. Habitualmente, sin necesidad de una revisión previa, se actualiza el contenido que muestra la página wiki editada.
Definiciones consultadas de las siguientes direcciones electrónicas: http://es.wikipedia.org/wiki/Blog y
ANEXO 8 GUÍA DE PREGUNTAS PARA CREAR UN BLOG
Enseguida que los alumnos respondan la primera pregunta que plantea el docente se continúa con lo siguiente:
1.- Posteriormente el docente pide a los alumnos que identifiquen ¿en cuántos
pasos se crea un blog? y ¿qué se debe hacer en la ventana que abrió?, las respuestas de los alumnos deben ser: En 3 pasos Crear cuenta, asignar un
nombre al blog, elegir una plantilla y lo que se debe hacer es llenar el
formulario con los datos que ahí se solicitan, tales como: correo electrónico, contraseña, el nombre que se va a utilizar para firmar sus entradas del blog. Finalmente dar clic en
2.-Nuevamente el docente pregunta ¿qué hacer ahora? El docente pide a los
alumnos que observen la parte superior donde se encuentra el logo de Eblogger y que observen en que paso se encuentran de la creación de su blog. Y que anoten en su libreta la dirección de su blog, ya que con ella accederán posteriormente para visualizarla.
3.- En el paso 2 que es Elegir una plantilla, se pregunta a los alumnos ¿qué hacer?
Se pretende que los alumnos elijan una plantilla y clic a continuar. Enseguida muestra una pantalla donde dice que se ha creado el blog y que se puede comenzar a publicar, clic al botón.
4.- El docente pide a los alumnos que identifiquen los elementos que integran la pantalla de creación de entradas, se
pregunta a los alumnos ¿cuál es la función de cada uno de los iconos que se encuentran en la barra de herramientas? Se pretende que los alumnos por si solos de acuerdo a lo que ya saben identifiquen para que sirve cada icono, en caso contrario que verifiquen que al pasar el puntero del mouse sobre cada icono muestra su función.
Una vez que los alumnos identificaron cada uno de los iconos de la barra de herramientas, el docente pide a los alumnos que comiencen a capturar su información del tema que previamente se les solicito en la sesión anterior.
El docente les indica a los alumnos que pueden ir dando formato a su información haciendo uso de alguna herramienta de la barra de herramientas (ejemplo: Fuente, tamaño, color de texto y alineación de los títulos de su documento, entre otros), además de explorar que hay en las pestañas de Configuración, diseño y monetizar.
En caso de que algún alumno desee agregar imágenes el docente solo guiará al alumno en caso de tener dudas (pág. 7 Manual Blogger), en cuanto haya terminado se pide que comente a los alumnos, qué fue lo que hizo para poder agregar una imagen.
