Apoyos Tecnológicos III: julio 2013

viernes, 19 de julio de 2013

Software para la elaboración de horarios de clases

Una de las tareas básicas de cualquier centro escolar es la generación de horarios. En la mayoría de los casos, los maestros presentan distintas situaciones en cuanto a su disponibilidad de horario, por lo que la tarea puede tornarse compleja.

Una solución para esto es el software llamado ASC HORARIOS.

Este software permite capturar la información relativa a la cantidad de clases, días, maestros, materias, grupos y disponibilidades, y genera horarios que traten de cumplir con estos requerimientos.

Para descargar el software, haz clic aquí.

viernes, 12 de julio de 2013

Distintos formatos en el texto

En esta práctica veremos distintas formas en las que se puede presentar un texto.

Copia y pega el siguiente código en bloc de notas y guárdalo como sextapagina.html

<html>
<head>
<title>
La quinta página web
</title>
</head>
<body bgcolor="#00ff00">
<center><h1>Distintos formatos de texto</h1></center>
<hr>
<br>
En un texto, se pueden aplicar distintos formatos; a continuación se presentan los más usuales:

<ul>
<li><b>Texto predeterminado (PRE)</b>: Es un texto que aparece como si estuviera escrito con máquina de escribir. Por ejemplo: <pre>Este es un texto muy antiguo</pre>
<li><b>Formato de texto (FONT)</b>: En esta etiqueta se pueden presentar distintos parámetros para modificar el texto. Por ejemplo: <font face="Arial" color="#012345" size="6">Este es un texto con letra Arial, en un color extraño y con un tamaño diferente al resto del texto. </font>
<li><b>Texto en negrita (B)</b>: Muestra el texto en negrita. El ejemplo lo puedes notar en cada una de las viñetas que aparecen en esta lista.
<li><b>Texto en cursiva (I)</b>: Muestra el texto en <i>cursiva</i>
<li><b>Texto subrayado (U)</b>: Coloca una línea debajo del texto <u>de esta manera</u>
<li><b>Texto tachado (S)</b>: Coloca una línea en medio del texto. <s>Como si algo estuviera mal </s>
<li><b>Texto agrandado (BIG)</b>: Muestra en texto en un tamaño <big>mayor</big>
<li><b>Texto disminuido (SMALL)</b> Muestra el texto en un tamaño <small>menor</small>
</ul>
<p>Por consiguiente, podemos aplicar muchos y muy distintos formatos a nuestros textos.
<p><marquee>Un texto que viaja de un lado a otro es porque quizá sea interesante.</marquee>
</body>
</html>

CONTESTA:
¿Qué significan los textos entre paréntesis de cada una de las viñetas?
¿Qué significa MARQUEE?

lunes, 8 de julio de 2013

Fondo de color

En una página web, es muy importante utilizar la mayor cantidad de recursos gráficos para lograr nuestra intención. En este tema, usaremos un atributo nuevo para la etiqueta BODY y usaremos otra etiqueta nueva: FONT.

Cuando escribimos la etiqueta BODY, podemos agregar la palabra BGCOLOR (color de fondo), un signo de = y, entre comillas, el código del color que queramos utilizar (puedes ver estos códigos en el siguiente enlace.

Por ejemmplo:

<body bgcolor="#0000FF">

Nos dará un fondo de color azul.

Después de la etiqueta BODY, podemos escribir la etiqueta FONT con sus atributos FACE (nombre de la fuente), COLOR (color de la fuente) y SIZE (tamaño de la fuente).

Por ejemplo:

<font color="#993366" size="4" face="Arial">HOLA</font>

Nos dará otro resultado.

Copia el siguiente código:

<html> <head> <title> Quinta página </title> </head>
<body bgcolor="#0000FF">
<font color="#FF0000" size="6" face="Arial">
<center><h1>El Principito</h1>
<br><i>CAPÍTULO VI</i></center>
<p><hr><p>
Ah, principito! así fui comprendiendo poco a poco tu pequeña vida melancólica. Por mucho tiempo no habías tenido por distracción más que la dulzura de las puestas de sol. Me enteré de este nuevo detalle el cuarto día a la mañana, cuando me dijiste:
<p>- Me encantan las puestas de sol. Vamos a ver una puesta de sol...
<br>- Pero hay que esperar...
<br>- Esperar qué ?

- Esperar a que se ponga el sol.

Primero pareciste muy sorprendido, y luego te reíste de ti mismo. Y me dijiste:

- Siempre creo que estoy en casa !

En efecto. Cuando es el mediodía en Estados Unidos, el sol, como todo el mundo sabe, se pone en Francia. Bastaría poder ir a Francia en un minuto para asistir a la puesta del sol. Lamentablemente, Francia está demasiado alejada. Pero en tu planeta tan pequeño, te alcanzaba con correr tu silla algunos pasos. Y mirabas el crepúsculo cada vez que lo deseabas...

- Un día, vi al sol ponerse cuarenta y tres veces !

Y un poco más tarde agregabas:

- Sabes... cuando se está tan triste a uno le gustan las puestas de sol...

- El día de las cuarenta y tres veces estabas entonces muy triste ? Pero el principito no respondió.

Ejercicio

Utiliza tus conocimientos ( :D ) en HTML para crear una página que contenga:

Encabezado
Descripción personal
Caracteres especiales (acentos)
Negritas, cursivas

Copia en el comentario tu código :)

Caracteres especiales

Esta es una página muy importante, porque por fin podremos utilizar acentos, la letra "ñ", etc.

Los caracteres especiales son aquellos que no son comunes en todos los lenguajes, por lo que para HTML debemos escribir un código específico. Para verlo con un ejemplo, copia el siguiente código.

<html>
<head>
<title> Caracteres Especiales </title></head>
<body>
<h1><center>Caracteres Especiales</center></h1>
<br><hr><br>
En la escritura de nuestro idioma (español) existen palabras agudas, graves o esdrújulas. Estas son las reglas de acentuación:

<ul>
<li>Las <b>palabras agudas</b> son aquellas que tienen la fuerza de la acentuación en la última sílaba. Llevan tilde cuando terminan en "n", "s" o vocal. Por ejemplo: <i>blasón, constitución, serán. </i>
<li>Las <b>palabras graves</b> son aquellas que tienen la fuerza de la acentuación en la penúltima sílaba. Llevan tilde cuando terminan en cualquier consonante menos "n" o "s". Por ejemplo: <i> carácter, lápiz.</i>
<li>Las <b>palabras esdrújulas</b> tienen la fuerza de acentuación en la antepenúltima sílaba. Todas llevan tilde. Por ejemplo: <i>rémora, México, etcétera.
</ul>
</body>
</html>

Contesta en el comentario:

¿Cómo se ponen los acentos en el código HTML?
Para qué sirven las etiquetas <b> y <i>?

Encabezados

Teclea en bloc de notas el siguiente texto:

<html>
<head>
<title>
Tercera pagina
</title>
</head>
<body>
<h1><center>La tercera pagina</center></h1>
<p><hr><p>
En esta pagina veremos los niveles de encabezado que pueden realizarse; observa el comportamiento de cada una de las etiquetas:
<p><h1>Texto con h1</h1>
<br><h2>Texto con h2</h2>
<br><h3>Texto con h3</h3>
<br><h4>Texto con h4</h4>
<br><h5>Texto con h5</h5>
<br><h6>Texto con h6</h6>
<p>Estos fueron los encabezados.
</body>
</html>

Guárdalo como paginatres.html y contesta:

¿Cómo se utilizan los encabezados en HTML?

viernes, 5 de julio de 2013

Listas numeradas y no numeradas

Copia y pega en Bloc de Notas el siguiente código. Guárdalo como paginados.html

<html>
<head>
<title>
Segunda pagina
</title>
</head>
<body>
<center><h1>La segunda pagina</h1></center>
<p><hr><p>
En esta segunda pagina utilizaremos las listas ordenadas y no ordenadas (recuerden que el codigo esta en ingles, por lo que sera ol y ul respectivamente). Se utilizara etiqueta de apertura y de cierre para englobar la lista y se utilizara otra etiqueta para cada uno de los elementos (list item, li)
<p>Un ejemplo de lista numerada es: "Animales fantasticos"
<br>
<ol>
<li>Sirena
<li>Dragon
<li>Gnomo
</ol>
<p>Como podemos notar, a cada elemento se le asigno la etiqueta li para numerarlo.
<p>Tambien tenemos las listas no numeradas. Un ejemplo es: "Comida favorita"
<br>
<ul>
<li>Pizza
<li>Hamburguesas
<li>Enchiladas
</ul>
<p>Asi podemos hacer listas en nuestras paginas.
</body>
</html>

Contesta en comentarios:

¿Qué significan las etiquetas OL, UL, LI, P, BR, HR?

Saludos.

lunes, 1 de julio de 2013

Etiquetas

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>

Todas las etiquetas que estudiaremos están en inglés, por lo que no es muy difícil prever qué hará cada una de ellas. ¿Qué significan las siguientes palabras? ¿Qué harán en nuestros documentos HTML?

Head:

Title:

Body:

Center:

Size:

Color:

Font:

Face:

Principios básicos HTML

A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web.

Qué es HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

A lo largo de este curso vamos a trabajar con el Bloc de notas para crear nuestras páginas, ya que se trata de un editor de textos muy sencillo de manejar, que nos permitirá crear páginas a través del código HTML.

Ejercicio: Primera página web

Abre la aplicación Bloc de Notas y teclea CON MUCHO CUIDADO lo siguiente (si no alcanzas a ver, puedes dar clic en la imagen):

Guarda tu documento en el Escritorio como primerapagina.html

En el escritorio da doble clic en el icono de página web que aparece en el escritorio y observa el resultado.

Cada etiqueta representa una acción.

¿Qué hace la etiqueta <title> ?
¿Qué hace la etiqueta <center> ?
¿Qué hace la etiqueta <h1>?
¿Por qué algunas etiquetas incluyen / ?

Ejercicio - Código Fuente

Busca en el explorador la opción "Ver Código Fuente", y contesta:

¿Qué palabras en inglés puedes identificar?
¿Qué símbolos puedes identificar?
¿Para qué crees que sirven?

Comenta...

Lenguaje HTML - Evaluación Diagnóstica

Antes de comenzar el siguiente tema, contesta estas preguntas:

1. ¿Cómo se hace una página web?
2. ¿Siempre ha sido igual el procedimiento para crear una página web?
3. ¿Cualquier persona puede hacer una página web?
4. ¿Qué se necesita para hacer una página web?
5. ¿Sabes qué significa HTML?

Comenta...