Vistas a la página totales

viernes, 13 de febrero de 2015

ENCUADRE DECIMO PRIMER PERIODO

DOCENTE: CESAR DARIO VARGAS GONZALEZ

http://www.lecturasparacompartir.com/dereflexion.html


ÁREA: TECNOLOGIA E INFORMATICA
ASIGNATURA: INFORMATICA
GRADO: DECIMO
PERIODO ESCOLAR: PRIMERO
COMPETENCIA: Formar mujeres líderes, calificadas y competentes en gestión contable y financiera, tecnología e informática; para que desde su trabajo cumpla una misión evangelizadora que contribuya a la construcción de una sociedad digna.
DESEMPEÑO: Realiza aplicaciones sencillas utilizando código HTML como herramienta de diseño, manifestando actitudes de respeto e interés por aprender.

INDICADORES DE  DESEMPEÑO:
·       Describe y apropia conceptos acerca de programación en HTML.
·       Investiga y apropia conceptos del entorno de HTML.
·       Manifiesta interés por la apropiación de nuevos conceptos.
·       Muestra interés por la robótica y la aplicación de esta.
.    Demuestra interés por temas tecnológicos y por la investigación de estos.
FUNCIONES COGNITIVAS
ENTRADA
  • Percepción clara y precisa, apropiación de vocabulario.
ELABORACIÓN
  • Facilidad para distinguir datos relevantes de los irrelevantes
SALIDA
  • Precisión y exactitud en la comunicación de respuestas.
OPERACIONES MENTALES: Análisis, Identificación, Conceptualización, Diferenciación, Comparación, Generalización

FECHA
CURSOS
TEMAS Y SUBTEMAS
ESTRATEGIAS
CRITERIO DE EVALUACIÓN


HTML:
Hipervínculos

Se realiza la lectura de reflexión “Maestro que es el amor” para analizar su contenido en grupos y a manera personal, ¿Cómo demuestro ser un una persona que no me doy por vencido? (evangelización), hacer un listado de todas las acciones que se mencionen en dicha lectura. Identificar la función que cumplen estas palabras. ¿Qué expresan? ¿Qué relación tienen con los sujetos? ¿Cómo se modifican?


Se dan las normas básicas dentro del aula de clase y el laboratorio de sistemas, además se le informará que el comportamiento no adecuado dentro de los mismos tiene consecuencia de una nota de menos 0,5 en la calificación de los talleres.

Se realizará una retroalimentación de lo visto en clase



Participación asertiva a través de preguntas de reflexión sobre la lectura



Hipervínculos:
·       Hiperenlace <a>
·       Tipos de referencias
·       Destino del enlace
·       Formato de los enlaces
·       Puntos de fijación. Anclas


Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.

Hiperenlace <a>
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

Tipos de referencias
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
Punto de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".

Destino del enlace
_blank: Abre el documento vinculado en una ventana nueva del navegador.
 _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
 _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador.

Formato de los enlaces
Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Puntos de fijación. Anclas
Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento. Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices.

Se realizará una retroalimentación de lo visto en clase

La estudiante a través de socialización conoce y emplea la sintaxis de cada etiqueta y atributo para el enlace de páginas en html



·       Hiperenlace <a>
·       Tipos de referencias
·       Destino del enlace
·       Formato de los enlaces
·       Puntos de fijación. Anclas

Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.

Hiperenlace <a>
Por ejemplo, para insertar el enlace: Visita www.aulaclic.com
Habría que escribir:
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>


Tipos de referencias
Por ejemplo, "http://www.aulaclic.com" tendrá el mismo efecto que http://www.aulaclic.com/index.htm
Para insertar el enlace:
Habría que escribir:
<a href="http://www.aulaclic.com">Visita www.aulaclic.com</a>

Destino del enlace
Para insertar el enlace:
Visita www.aulaclic.com en una ventana nueva
Habría que escribir:
<a href="http://www.aulaclic.com" target="_blank">Visita www.aulaclic.com en una ventana nueva</a>Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

Formatos de enlaces
Por ejemplo, al insertar el siguiente código:
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
<a href="http://www.aulaclic.com" target ="_blank">www.aulaclic.com</a>



Puntos de fijación. Anclas
Por ejemplo, para insertar un punto de fijación delante del siguiente texto:
Texto con ancla
Habría que escribir:
<a name="miancla"></a>Texto con anclaComo puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla.

Se realizará una retroalimentación de lo visto en clase

La estudiante aplica correctamente los pasos y estructuras de los atributos y etiquetas para el enlace de una página y otra en html.



Hipervínculos:
·       Hiperenlace <a>
·       Tipos de referencias
·       Destino del enlace
·       Formato de los enlaces
·       Puntos de fijación. Anclas

Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.
 Se realizaran ejercicios en la sala de sistemas como por ejemplo:
1 Abrir el documento menu.htm, de la carpeta originales/flores del curso.
2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
3 Asociar a la palabra Inicio un enlace a la página inicio.htm, a la palabra Productos un enlace a la página productos.htm y a la palabra Pedidos un enlace a la páginapedidos.htm, las páginas inicio.htm, productos.htm y pedidos.htm se encontrarán en el mismo directorio que la página menu.htm. Las páginas se abrirán en la misma ventana.
4 Guardar los cambios y comprobar el funcionamiento del enlace a la página Inicio.htm en un navegador (las páginas productos.htm y pedidos.htm se incorporarán más adelante) .

Se realizará una retroalimentación de lo visto en clase

La estudiante desarrolla programas en html que permita crear vínculos en, tipos de referencias, destino del enlace, formatos del enlace y puntos de fijación de una página con otra.



Tablas:
·       Tablas <table>
·       Fila <tr>
·       Columna <td>
·       Formato de tabla
·       Formato de celda
·       Encabezado de columna
·       Título de la tabla
·       Combinar celdas

Se realiza la lectura de reflexión “Grabado en piedra” para analizar su contenido en grupos y a manera personal, ¿Cómo demuestro ser un una persona que no me doy por vencido? (evangelización), hacer un listado de todas las acciones que se mencionen en dicha lectura. Identificar la función que cumplen estas palabras. ¿Qué expresan? ¿Qué relación tienen con los sujetos?
Para crear relaciones en Access 2007 primero deberemos acceder a la ventana Relaciones deberemos hacer clic en el botónRelaciones que se encuentra en la pestaña Herramientas de base de datos. Aparecerá el cuadro de diálogo Mostrar tabla de la derecha esperando indicarle las tablas que formarán parte de la relación a crear.

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.


Fila <tr>
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.

Columna o celda <td>
Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Formato de tabla

Sabado
Domingo
Curso HTML
Curso Dreamweaver
Curso Frontpage
Curso Flash


Formato de celdas

bado
Domingo
Curso HTML
Curso Dreamweaver
Curso Frontpage
Curso Flash


Encabezado de columna <th>
Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.

Título de la tabla
No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) yvalign (con los valores bottom y top).

Combinar celdas
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda


Se realizará una retroalimentación de lo visto en clase


Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.
Fila
Tablas:
·       Tablas <table>
·       Fila <tr>
·       Columna <td>
·       Formato de tabla
·       Formato de celda
·       Encabezado de columna
·       Título de la tabla
·       Combinar celdas
Columna
<table border="1">
  <tr>
    <td>Sabado</td>
    <td>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>
Formato de tabla
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
  ...
</table>
Encabezado de columna
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center">
  <tr>
    <th>Sabado</td>
    <th>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso Dreamweaver</td>
  </tr>
  <tr>
    <td>Curso Frontpage</td>
    <td>Curso Flash</td>
  </tr>
</table>
Título de la tabla
Por ejemplo, si escribiéramos el siguiente código:
<table width="50%" border="1" align="center">
  <caption align="right" valign="top">Titulo de la tabla<tr>
  <tr>
    <th>Sabado</td>
    ...
  
</tr>
</table>
Se realizará una retroalimentación de lo visto en clase

La estudiante aplica correctamente los pasos y estructuras de los atributos y etiquetas para la creación de tablas y formatos de celdas en html



Tablas:
·       Tablas <table>
·       Fila <tr>
·       Columna <td>
·       Formato de tabla
·       Formato de celda
·       Encabezado de columna
·       Título de la tabla
·       Combinar celdas

Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.
Se desarrollaran ejercicios en la sala de informática sobre tablas en html, ejemplo:
Abrir el documento instalaciones.htm, de la carpeta deportes.
Modificar la tabla que aparece para dejarla así:
http://www.aulaclic.es/html/graficos/tablaactividades.gif
Guardar los cambios y comprobar el funcionamiento en un navegador.

Se realizará una retroalimentación de lo visto en clase



Se realiza la lectura de reflexión “Debe ser un nerd” para analizar su contenido en grupos y a manera personal, ¿Cómo demuestro ser un una persona que no me doy por vencido? (evangelización), hacer un listado de todas las acciones que se mencionen en dicha lectura. Identificar la función que cumplen estas palabras. ¿Qué expresan? ¿Qué relación tienen con los sujetos? ¿Cómo se modifican?


Se dan las normas básicas dentro del aula de clase y el laboratorio de sistemas, además se le informará que el comportamiento no adecuado dentro de los mismos tiene consecuencia de una nota de menos 0,5 en la calificación de los talleres.

Imagen <img>
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.
Para insertar una imagen es necesario insertar la etiqueta <img>.Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src.
Texto alternativo
Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.
Borde de una imagen
En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.
Tamaño de una imagen
A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador. El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página.
Alineación de una imagen
La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Se realizará una retroalimentación de lo visto en clase

La estudiante es capaz de crear a través de programas,  tabla en html, introducir filas y columnas, aplicar formato de tabla y celdas y construir título de tabla junto con la combinación de celdas.




























La estudiante a través de socialización conoce y emplea la sintaxis de cada etiqueta y atributo insertando imagen y aplicando  formato de la misma en html



Imagen:
·       Imagen <img>
·       Texto alternativo
·       Borde de una imagen
·       Tamaño de una imagen
·       Alineación de una imagen

Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.

Imagen
Habría que escribir:
<img src="imagenes/logo_animales.gif">

Texto alternativo
Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código:
<img src="gatito.gif" alt="Imagen gato" >

Borde de una imagen
Habría que escribir:
<img src="imagenes/logo_animales.gif" border="4" >

Tamaño de una imagen
Habría que escribir:
<img src="imagenes/logo_animales.gif" width="200" height="80">

Alineación de una imagen
Habría que escribir:
PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales


Se realizará una retroalimentación de lo visto en clase

La estudiante aplica correctamente los pasos y estructuras de los atributos y etiquetas para insertar imagen y formato de la misma en html



Imagen:
·       Imagen <img>
·       Texto alternativo
·       Borde de una imagen
·       Tamaño de una imagen
Alineación de una imagen
Se inicia la clase recordando las normas tanto en el aula como en la sala de informática, además se pide el cuaderno a máximo 5 estudiantes para revisión en el transcurso de la clase.


Se realizaran ejercicios en la sala de informática aplicando imágenes en html, como por ejemplo:

Abrir el documento menu.htm, de la carpeta flores. Sustituir la palabra FLORES por la imagen logo_flores.gif que se encuentra en la carpeta imagenes de la carpeta flores, la imagen deberá tener flores como texto alternativo y el texto que hay a su derecha debe quedar a media altura de la imagen. 3 Guardar los cambios y comprobar el funcionamiento en un navegador

Se realizará una retroalimentación de lo visto en clase

La estudiante desarrolla programas en html que permita crear imagen y modificarla a través de la aplicación adecuada de la sintaxis de etiquetas y atributos.