PLAN DE CURSO TECNOLOGÍA E INFORMÁTICA 2019

PRIMER PERIODO

Utilizo adecuadamente herramientas informáticas de uso común para la búsqueda y procesamiento de la información y la comunicación de ideas.

Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas
en multimedia.

Evaluó las implicaciones para la sociedad de la protección de la propiedad intelectual en temas como desarrollo y utilización de tecnología

OBJETIVOS DE GRADO:

Analizar y valorar críticamente los componentes y la evolución de los sistemas tecnológicos y las estrategias para su desarrollo.

Tener en cuenta principios de funcionamiento y criterios de selección para la utilización eficiente y segura de artefactos, productos, servicios, procesos y sistemas tecnológicos del entorno.

Resolver problemas tecnológicos y evaluar las soluciones teniendo en cuenta las condiciones, restricciones y especificaciones del problema planteado.

EJES :

Naturaleza y evolución de la tecnología, Apropiación y uso de la tecnología, solución de problemas con tecnología, Tecnología y sociedad.

ESTÁNDAR:

• Utilizo adecuadamente herramientas informáticas de uso común para la búsqueda y procesamiento de la información y la comunicación de ideas.• Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas en multimedia.• Evaluó las implicaciones para la sociedad de la protección de la propiedad intelectual en temas como desarrollo y utilización de tecnología

COMPETENCIAS:

Identifica las tecnologías de la información y la comunicación (TIC) para aprender, investigar, crear y comunicarse con otros en el mundo tratando temas sociales, actuando de manera Ética y responsable.

Utiliza editores de texto para diseñar páginas web teniendo claro cuáles son las etiquetas y atributos necesarios para tener mejores resultados en el diseño

LOGROS

Identifica la importancia que tienen los sitios web para la publicidad

Reconoce los diferentes comando del lenguaje HTML.

Utilizo adecuadamente herramientas informáticas de uso común para la búsqueda y

procesamiento de la información y la comunicación de ideas.

Identificación de los derechos de autor aplicado al software y a los archivos gráficos,
textos, audio y vídeo.

Utilizo responsable y autónomamente las tecnologías de la información y comunicación (TIC) para aprender, investigar y comunicarme con otros en el mundo

HTML

El HTML (Hyper Text Markup Language) 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.

EDITORES

Un editor es un programa que nos permiten redactar documentos, Algunos de los editores visuales con los que se pueden crear páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, entre otros.

Para crear páginas web escribiendo directamente el código HTML se utiliza la herramienta Wordpad o el Bloc de notas.

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.

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.

A continuación tenemos un ejemplo en el que tenemos la etiqueta <Body..> y dentro de esta anidada la etiqueta <b>

ejemplo 1

<body>
Hola a todos. <b>Aunque nadie puede volver atrás y lograr un nuevo comienzo, cualquiera puede empezar ahora y lograr un nuevo final</b>
</body>

¿Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.

Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.

Un ejemplo de los atributos sería:

<html>
<head>
<title>Etiquetas y atributos</title>
</head>

<Body bgcolor="#E0F8F7" Hola a todos. <b>Aunque nadie puede volver atrás y lograr un nuevo comienzo, cualquiera puede empezar ahora y lograr un nuevo final</b>

</body>
</html>

ETIQUETAS BÁSICAS

<html></html>
Crea un documento HTML

<head></head>
Crea el título y otra información que no se visualizará en la página web

<body></body>
Es la parte visible de la página

Header Tags

<title></title>
Pone el nombre del documento en la barra del título

Atributos del Body

<body bgcolor=?>
Crea el color de fondo, usando nombres o valores hex

<body text=?>
Crea el color del texto, usando nombres o valores hex

<body link=?>
Crea el color de los enlaces, usando nombres o valores hex

Tags de texto

<hl></hl>
Crea un título grande

<h6></h6>
Crea un título pequeño

<b></b>
Crea texto en negritas

<i></i>
Crea texto en itálicas

<tt></tt>
Crea texto teletipo

<font size=?></font>
Crea el cuerpo de la fuente de 1 a 7

<font color=?></font>
Da el color de la fuente, usando nombres o valores hex

Enlaces

<a href="URL"></a>
Crea un hipervínculo

<a href="mailto:EMAIL"></a>
Crea un enlace de email

<a name="NAME"></a>
Crea un enlace dentro del documento

<a href="#NAME"></a>
Vincula a ese target dentro del documento

Formatting

<p></p>
Crea un párrafo nuevo

<p align=?>
Alinea un párrafo (izquierda, centro, derecha)

<br>
Inserta un salto de línea

<blockquote>
</blockquote>
Justifica el texto a ambos lados

<ol></ol>
Crea un lista numerada

<li></li>
Precede cada ítem de una lista y le agrega un número

<ul></ul>
Crea una lista con puntos

Elementos Gráficos

<img src="name">
Agrega una imagen

<img src="name" align=?>
Alinea una imagen an image

<img src="name" border=?>
Crea el grosor del borde de la imagen

<hr>
Inserta una linea horizontal

<hr size=?>
Crea la altura de una linea

<hr width=?>
Crea el ancho de la linea, en porcentaje o números absolutos

<hr noshade>
Inserta una linea horizontal sin sombra

Tablas

<table></table>
Crea una tabla

<tr></tr>
Setea cada row de la tabla

<td></td>
Crea cada celda de la tabla

<th></th>
Crea el borde de la tabla (una celda normal, con texto centrado y resaltado)

Atributos de las Tablas

<table border=#>
Crea el grosor del borde de la tabla

<table cellspacing=#>
Crea la cantidad de espacio entre las celdas

<table cellpadding=#>
Crea la cantidad de espacio entre el borde de las celdas y su contenido

<table width=# or %>
Crea el ancho de la tabla - en pixel o en porcentaje de acuerdo al ancho del documento

<tr align=?> or <td align=?>
permita la alineación delas celdas (izquierda, centro, derecha)

<tr valign=?> or <td valign=?>
Permite la alineación vertical de las celdas (arriba, nedio, abajo)

LOGRO: Aplica los conceptos básicos para diseñar una página web.

IDENTIFICADOR DEL TIPO DE DOCUMENTO <HTML>

Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>.

ESTRUCTURA DE UNA PÁGINA

Título de la página <title>

Para asignar un título a una página es necesario escribir el texto deseado entre las

Etiquetas <title> y </title>.

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.

Cuerpo del documento <body>

El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Se pueden definir hasta 6 tamaños de encabezado, realizándolo con las etiquetas<h1> a <h6>.El 1 define la letra más grande y el 6 la más pequeña.

Actividad 1

PÁRRAFOS

Crear párrafos con <P>

La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos específicos:

<P ALIGN=left>
Define un párrafo y alinea el texto a la izquierda(left).

<P ALIGN=right>
Define un párrafo y alinea el texto a la derecha (right).

<P ALIGN=center>
Define un párrafo y centra el texto (center).

<P ALIGN=JUSTIFY>
Justifica el texto ( Alinea a la izquierda y derecha)

Actividad 2

<P ALIGN="LEFT">: Se utiliza para alinear a la izquierda el párrafo.
<P ALIGN="RIGHT">: Se utiliza para alinear a la derecha los párrafos.
<P ALIGN="CENTER">: Se utiliza para centrar los párrafos

Formatear el texto <font>

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

SALTOS DE LÍNEA <BR>

Esta etiqueta reemplaza la tecla INTRO, No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

ACTIVIDAD 3

1. Copiar la siguiente practica en el bloc de notas.

2. Guárdalo como reflexion.html.

ACTIVIDAD 4

Realizar una página web con las siguientes características:

1. Colocar titulo a la pestaña.
2. Colocar color de fondo
3. Los títulos y subtítulos deben tener un color , tamaño de texto y tipo de letra diferente al del resto del texto.
4. Utilizar alineación.
5. Mínimo 6 párrafos y cada uno con 10 renglones como mínimo ,para salto de línea utilizar la etiqueta <br>.
6. Colocar Regleta

AUTOEVALUACIÓN PRIMER PERIODO

SEGUNDO PERIODO

ESTÁNDAR

• Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas en multimedia.

• Identifico los pasos del proceso de planeación y gestión de proyectos.

LOGROS

• Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas en multimedia.

• Identifico los pasos del proceso de planeación y gestión de proyectos.

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen.

Las medidas son WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.

<BODY>
<MARQUEE WIDTH=70% HEIGHT=40> En lugar de amor, de dinero, de fama, dame la verdad.
</MARQUEE>
</BODY>

El color de fondo de la marquesina es con el atributo BGCOLOR.

<BODY>
<MARQUEE BGCOLOR=#7070ff> Abre tus brazos al cambio, pero no dejes ir tus valores
</MARQUEE>

</BODY>

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

<BODY>
<MARQUEE BEHAVIOR=slide> No malgastes tu amor en alguien que no lo valora
</MARQUEE>
</BODY>

<BODY>
<MARQUEE BEHAVIOR=alternate> La sinceridad y la verdad son la base de toda la virtud
</MARQUEE>
</BODY>

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).

<BODY>
<MARQUEE DIRECTION=right> Cualquier cosa que cambia tus valores cambia tu comportamiento.
</MARQUEE>
</BODY>

O hacia arriba o abajo con down y up.

<BODY>
<MARQUEE HEIGHT=50 DIRECTION=up> El amor establece las bases de todos los valores humanos
</MARQUEE>

</BODY>

Los atributos HSPACE Y VSPACE , definirían el espacio horizontal y vertical del texto fuera de la marquesina.

<BODY>
<MARQUEE BGCOLOR=yellow VSPACE=20> Hoy en día la gente sabe el precio de todo y el valor de nada.
</MARQUEE>
Otro texto.
</BODY>

<BODY>
<CENTER>
<MARQUEE WIDTH=50% BGCOLOR=#ffff00> Siempre es el momento correcto para hacer lo correcto.
</MARQUEE>
</CENTER>
</BODY>

con la etiqueta <FONT>:

<BODY>
<CENTER>
<MARQUEE WIDTH=70% BGCOLOR=#ffff00>
<FONT FACE=arial COLOR=red SIZE=5>
La amistad es duradera mientras sepas comprenderla
</FONT>
</MARQUEE>
</CENTER>

</BODY>

Y podremos poner imágenes en vez de texto.

<MARQUEE WIDTH="80%" BEHAVIOR="alternate"> <IMG SRC=" "> </MARQUEE>

ACTIVIDAD 1

Realizar la siguiente Práctica

Numeración y Viñetas
En la numeración se utiliza la instrucción <OL></OL>. Cada uno de los elementos de la lista está precedido de la instrucción <LI>. En la instrucción <OL> se puede incluir el tipo de numeración:

type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.

Los tipos posibles son :
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)

Las viñetas se representan con la instrucción <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. En la instrucción <UL> se puede incluir el tipo de viñeta:
disk = Indica un punto
circle = Indica un punto sin relleno
square = Indica un cuadrado

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias".

Actividad 2

Actividad 3

TABLAS

<TABLE> <TR> <TD>

Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:

<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila <th> y </th> si es una fila de cabecera<TD> y </TD> señalan una celda.

La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contienen el mismo número de celdas.

EJEMPLO

<HTML>

<HEAD>

<TITLE>Ejemplo </TITLE>

</HEAD>

<BODY>

<H1>Tablas básicas</H1>

<TR>

<TH>NOMBRE</TH>

<TH>APELLIDO</TH>

<TH>CEDULA</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

ARREGLOS DE BORDES

CELLPADDING=” Valor Numérico”: Fija el espacio entre el borde exterior de la cerlda y el borde interior.

CELLSPACING=”Valor Numérico”: Fija el espacio entre el contenido y el borde interior.

EJEMPLO 1

<tr>

<td>Enero</td>

<td>Febrero</td>

<td>Marzo</td>

</tr>

<tr>

<td>Abril</td>

<td>Junio</td>

</tr>

</table>

COLOR DE FONDO

Para cambiar del color de fondo,basta con escribir el atributo BGCOLOR dentro del elemento de la tabla que se desea cambiar.

PARA CAMBIAR EL COLOR A LA TABLA

<TABLE BGCOLOR>=”Código de color”>

PARA CAMBIAR EL COLORA LA FILA

PARA CAMBIAR EL COLOR DEL BORDE

EJEMPLO 2

Fijar el color a la tabla

<tr>

<td>Enero</td>

<td>Febrero</td>

<td>Marzo</td>

</tr>

<tr>

<td>Abril</td>

<td>Junio</td>

</tr>

</table>

PARA CAMBIAR EL COLOR DEL BORDE

EJEMPLO 3

<tr>

<td>Enero</td>

<td>Febrero</td>

<td>Marzo</td>

</tr>

<tr>

<td>Abril</td>

<td>Junio</td>

</tr>

</table>

ACTIVIDAD 4

Nota 1: Darle formato a las páginas (color de fondo, tamaño del texto, color de texto, tamaño, marquesina, regleta, imagen, salto de linea).

AUTOEVALUACIÓN SEGUNDO PERIODO

TERCER PERIODO

ESTÁNDAR

Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas en multimedia.

Analizo y describo factores culturales y tecnológicos que inciden en la sexualidad, el control de la natalidad, la prevención de enfermedades transmitidas sexualmente y las terapias reproductivas.

Logros

Utiliza adecuadamente las etiquetas HTML avanzadas para un mejor diseño de los sitios Web.

Identifica cada uno de los pasos para publicar un sitio web en Internet.

Utilizo adecuadamente herramientas informáticas de uso común para la búsqueda y procesamiento de la información y la comunicación de ideas.

Hipervínculo a otra página del mismo sitio <a>

El elemento más importante que tiene una página de Internet es el hipervínculo, estos nos permiten cargar otra página en el navegador.

Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros).

La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:

<a href="pagina2.html">Noticias</a>

Lo nuevo que aparece en este elemento es el concepto de una propiedad. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor.

El valor de la propiedad debe ir entre comillas dobles.

La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo.

ACTIVIDAD 1

Crear dos páginas web con los nombres : pagina1.html y pagina2.html. Configurar las páginas con todo lo visto en clase, cambiar los encabezados <h1> por <font>, size para el tamaño del texto.

pagina1.html

pagina2.html

ACTIVIDAD 2

Anclas

Llamadas desde la misma página

La sintaxis para definir un ancla es:

<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervínculo, más allá que se utiliza el mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre del ancla.

Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>

Vemos que en la propiedad href indicamos el nombre del ancla.

Haremos un ejemplo, donde dispondremos una lista de hipervínculos que llaman a una serie de anclas dispuestas en la misma página:

PRACTICA 1

Digitar el siguiente código en el bloc de notas y personalizarlo aplicando lo visto en clase.

ACTIVIDAD 3

Realizar una página web aplicando todo lo visto en clase en los tres periodos, mínimo 4 páginas tema libre, las cuales deben tener enlace entre ellas e hipervinculo a paginas ya existentes de Internet relacionadas con el tema escogido para ampliar la información.

ACTIVIDAD 4

CÓDIGOS CSS

IMAGEN DE FONDO: Con este código podrán poner un fondo de pantalla en su web que no se mueve es decir que al bajar por el menú dará el efecto de que la imagen no se mueve, solo se copia en el block de notas y se pone el código url de la imagen donde les indicara y luego solo copiarlo en texto por encima de la página.

<style> body { background-image: url(aqui va el url de la imagen); background-repeat: no-repeat; background-attachment: fixed } </style>.

Transformar el cursor en una mira: Transformá la clásica flechita de Windows en una mira de disparo encima de la página.

<style type="text/css">  </style>

BARRA DE NAVEGACIÓN CON ESTILOS:

La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de Documento). En este caso, se trata de la versión 4.01 de HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

El texto que esté dentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese lugar como un comentario de referencia para nosotros mismos.

AÑADIR ALGUNOS COLORES

Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como fucsia y la siguiente línea lo que hace es darle color al fondo.

<style type="text/css">

body {

color: #FA58D0;

background-color: #190707 }

</style>

AÑADIR TIPO DE LETRA

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.

font-family: Georgia, "Times New Roman",

Times, serif;

h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

PRACTICA 2

“ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. .

Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.

AÑADIR UNA BARRA DE NAVEGACIÓN

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú).

padding-left: 11em;

para mover el menú

ul.navbar {

position: absolute;

top: 2em;

left: 1em;

width: 9em }

PRACTICA 4

DAR ESTILO A LOS ENLACES

Crear una carpeta en la memoria o escritorio del computador con el nombre de estilos.
Digitar el siguiente código y guardarlo con el nombre de redessociales.html en la carpeta creada

PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.

Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.

Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:

body {
padding-left: 18em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: Black }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 6em;
left: 4em;
width: 15em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: Pink;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }

Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo redessociales.html, y guarda la hoja de estilo como “miestilo.css”.

Vuelve a la ventana que muestra el código HTML Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<link rel="stylesheet" href="miestilo.css">
</head>

<body>

De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.

Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.

Actividad

Escoge un tema libre y realiza la actividad completa con las cuatro páginas de enlace, es decir en total se deben tener 5 páginas , la principal y las otra 4 con el mismo tema y conservando el estilo que diseñaste en las clases anteriores, personaliza a tu gusto conservando estética y creatividad.

AUTOEVALUACION TERCER PERIODO

CUARTO PERIODO

ESTÁNDARES

· Interpreto y represento ideas sobre diseños, innovaciones mediante el uso de registros, textos, diagramas, figuras, prototipos, empleando para ello (cuando sea posible) herramientas informáticas

· Desarrolla soluciones publicitarias, informativas tipo Web con herramientas especializadas en multimedia

· Asume una actitud crítica frente al desarrollo de la tecnología, el bienestar humano y el uso de los recursos

LOGROS

Maneja la herramienta Publisher aplicando logos, y presentaciones para sitios Web

Reconoce las diferentes herramientas que brinda Publisher.

Analiza el papel de la tecnología y su relación con las necesidades humanas.

Plantea diversas formas de utilización de la tecnología con parámetros éticos y sostenibles.

Microsoft Publisher

CONCEPTOS BÁSICOS

Publisher es la herramienta de autoedición más potente y popular de Microsoft. Ésta permite crear una amplia gama de publicaciones, desde folletos hasta pancartas, pasando por las tarjetas de presentación para la empresa. Las distintas funciones y herramientas de Publisher facilitan, asimismo, la producción de estas publicaciones.

De hecho, Publisher proporciona tres caminos distintos para la creación de los diferentes tipos de publicaciones:

- Asistentes: Dispone de asistentes para casi todos los tipos de publicaciones que pueda imaginar.
Los asistentes muestran los pasos necesarios para crear una publicación y ofrecen una gran flexibilidad para personalizar la publicación.
- Conjuntos de Diseños: Puede crear una publicación que utilice los mismos atributos de diseño y maquetación que otras publicaciones de la misma familia de diseño.
- Publicaciones partiendo de cero: Para disfrutar de mayor flexibilidad, puede crear publicaciones a partir de publicaciones en blanco.

Actividad 1

En Microsoft Publisher realizar el anuncio de la feria del libro, un concierto o un evento deportivo que se celebre en el mes de septiembre en Medellín. Utiliza las plantillas de Anuncio (escoger plantilla de oferta o aeropuerto).

Ejemplo

Actividad 2

Realizar afiche utilizar hoja en blanco

Ejemplo

Actividad 3

En Microsoft Publisher realizar la publicidad de una agencia de viajes donde se promueve paquetes turísticos a nivel nacional e internacional. Utiliza las plantillas de Anuncio (escoger plantilla de oferta), Pancarta (puede escoger la plantilla de oferta o evento) y Folleto.

Busque imágenes de Internet o diseñe sus propios logos utilizando las autoformas e imágenes prediseñadas, recuerde que puede cambiar el color, estilo y forma de la imagen según su necesidad.

Dentro de un cuadro de texto también puede insertar imágenes y acomodar el texto según su creatividad.

Cada una de las plantillas debe tener coherencia y hablar de la misma publicidad.

Actividad 4

1. Realizar la imagen publicitaria para la fiesta de fin de año de la comuna 5 ( terminación del año 2019) donde debe tener en cuenta lugar del evento, artistas invitados, hora, patrocinadores, tener en cuenta para la actividad afiches, folletos, boleteria, anuncios.
2. Dicha fiesta de fin de año debe ser promovida también con una página web, donde se debe aplicar todo lo visto en código HTML (está página debe tener mínimo dos paginas para ver su navegabilidad y funcionamiento de los link).

AUTOEVALUACION CUARTO PERIODO