Grado Decimo ~ .

CLASE 1

REGLAMENTO SALA DE INFORMÁTICA

Conducta de entrada

Video: Reglas importantes en una sala de informatica https://www.youtube.com/watch?v=FazkRLADUtU

Teoría: Escribo en mi cuaderno las normas que debo cumplir en la sala de informática .

DOCUMENTO DE LAS REGLAS

Los estudiantes que hagan uso de cualquiera de las salas de informática del Colegio INEM “Carlos Arturo Torres”, deben tener en cuentas las siguientes pautas para su buen uso:

1. Ingresar al aula en completo orden y disciplina llevando únicamente el material autorizado por el docente.

2. Ingresar acompañado de personas autorizadas.

3. Diligenciar el formato de uso de equipos escribiendo únicamente la información allí solicitada

4. Revisar el equipo antes de utilizarlo, si existe algún inconveniente informar de inmediato al docente que lo esté acompañando

5. Ingresar y mantener las manos completamente aseadas

6. No rayar los elementos que hacen parte de las sala (monitores, teclados, mesas, pad mouse, planillas, etc.)

7. Mantener la sala en perfecto estado de orden y aseo

8. Realizar solo los trabajos y actividades autorizadas por los docentes.

9. No ingerir ningún tipo de alimentos dentro de la sala

10. Trabajar en silencio, en el equipo asignado y mantener un excelente comportamiento.

11. Utilizar los equipos de audio sólo cuando se le indique.

12. No manipular los cables, ni la caja de control de fluido eléctrico sin previa autorización.

13. Mantener la configuración original de los equipos de cómputo, no colocar fondos o protectores de pantalla que obstaculicen el normal desarrollo de las clases.

14. Mantener los equipos en su sitio, no intercambiar teclados, mouse, monitores o cualquier otro componente de hardware.

15. No instalar o desinstalar ningún tipo de software sin la autorización del docente.

16. Hacer uso correcto de la red.

17. Por ningún motivo tratar de hacer reparaciones en caso de daños voluntarios o involuntarios; informe inmediatamente al docente sucedido el hecho; asumir las consecuencias de la autoría de sus actividades dentro de la sala.

18. Las USB manipuladas dentro del aula, deben ser previamente vacunados o formateados, para evitar la propagación de virus informáticos.

19. Ingresar únicamente a los sitios de internet permitidos por el docente.

20. Apagar adecuadamente los computadores

21. Al finalizar la clase, las mesas, sillas, equipos y materiales deben quedar ordenados y limpios.

22. Organizar el trabajo a realizar, de otra forma el tiempo será insuficiente y no se cumplirá con los objetivos propuestos.

NOTA. El incumplimiento de las anteriores pautas, originan la aplicación del Manual de convivencia de la institución.

Práctica: Reflexiono sobre las reglas que se debe seguir en la sala de informática y tengo presente cuales debo corregir para desempeñar un buen trabajo en el aula.

CLASE 2

CORREO ELECTRÓNICO

Objetivo:
Reconocer el correo electrónico como un servicio que permite el intercambio de mensajes a través de sistemas de comunicación electrónicos.

Conducta de entrada
Video crear correo: https://edu.gcfglobal.org/es/crear-un-correo-electronico/aprende-a-crear-un-correo-gmail/1/

Video adjuntar un archivo: https://www.youtube.com/watch?v=9jcf6NB3LQs

Teoría: Consulta y copia en el cuaderno de informática la teoría sobre: Que es un Correo electrónico, Como crear un correo en Gmail, Como Adjuntar y enviar archivos

Práctica: De acuerdo con el Video sopa de letras en Excel: https://www.youtube.com/watch?v=YcV2slEkbvs ,

Realice una sopa de letras con los nombres de los 10 Mejores Proveedores de Correo Electrónico: Gmail, Outlook.com, Cloud Mail, Yahoo Mail, AOL Mail, Zoho Mail, GMX Email, Yandex Mail, Mail.com, Lycos.com.

Guarde el archivo en su carpeta.

CLASE 3

REDES SOCIALES
Conducta de entrada:
Video: Las redes sociales, documental: https://www.youtube.com/watch?v=o5Rpfsw5AGs

Teoría: Realiza en su cuaderno de informática una línea de tiempo sobre el desarrollo de las redes sociales a partir de 1995.

Practica: Hacer una presentación en Power Point en donde presenta las 10 redes sociales más populares.

Video Las Redes Sociales Y Sus Consecuencias:

https://www.youtube.com/watch?v=W9EmjmCjvuk

video, https://www.youtube.com/watch?v=tpSgub81Skg

Practica: Hacer una presentación en prezi específicamente sobre esa red social que más te llame la atención

Guardar este archivo su carpeta y lo envía al correo asignado por el profesor.

CLASE 4

EDITORES DE VIDEO

Objetivo: conocer diferentes alternativas para editar un video como parte fundamental en el proceso de creación de contenido.

Conducta de entrada:
Video: https://www.marketingandweb.es/marketing/programas-edicion-videos/

Teoría: El vídeo se ha convertido en un elemento clave dentro de las estrategia de mercadeo, y gracias a los diferentes programas para editar vídeos gratis o editores de vídeos profesionales ésta tarea se ha convertido en más sencilla.

En este artículo vas a encontrar editores de vídeos gratis tanto para Windows, Mac y Linux, y como cada vez utilizamos más y más el móvil en nuestro día a día se incluyen varias de las mejores aplicaciones para editar vídeos gratis con el móvil.

· consulta y copia en su cuaderno de informática: ¿Que son editores de video, tipos?.

EDITOR DE VÍDEOS PROFESIONAL

Placeit – Video Maker

Si buscas un programa para crear y editar videos profesionales de forma rápida y sencilla, este es Placeit Video Maker. Tiene una gran cantidad de plantillas predefinidas que puedes utilizar en tus vídeos.

Como por ejemplo: Vídeos de diapositivas, Historias para Instagram, Plantillas de introducción, Demos de productos. Tiene una biblioteca con más de 1300 audios para poder utilizar en tus vídeos.

1.- Adobe Premier Pro CC

Adobe Premier Pro CC es un programa de edición profesional muy potente y versátil.
Es uno de los software de edición de vídeo más utilizado por los profesionales del video marketing..

FUNCIONES:

Puedes trabajar en secuencias y con cualquier formato.

Puedes añadir efectos de color y Looks para combinar la iluminación y el color de diferentes planos.

Te permite reducir automáticamente el volumen de la música en los vídeos.

Pero lo mejor de todo es que se integra a la perfección con el resto de la familia Adobe, por lo que si sabes utilizar los diferentes programas puedes crear auténticas maravillas.

Plataforma: Windows, Mac y Cloud (Nube).

2. ADOBE AFTER EFFECTS

Adobe After Effects es el complemento ideal a Premier por la gran cantidad de cosas que puedes hacer si sabes manejar ambas herramientas.

El problema es que After Effects sí que tiene una curva de aprendizaje bastante más elevada, por eso no todas las personas consiguen dominar este programa.

Características:

Puedes crear introducciones y transiciones de vídeos, Pues crear animaciones de logos incluso de personajes, Deslizar los títulos, hacerlos animados, Añadir efectos explosivos, Añadir movimiento a cualquier elemento que quieras.

Plataforma: Windows, Mac y Cloud (Nube).

3.- FINAL CUT PRO

Es un potentísimo editor de vídeo profesional para Mac con el podrás auténticas maravillas con él.

Características

Permite la edición de audio y gráficos animados. Puedes incluso editar vídeo a 360º.

Tiene un sistema de grabación de color avanzada.

Puedes añadir, cortar y juntar clips sin ningún problema de sincronización.

Edición multicámara que te permite sincronizar hasta 64 ángulos con diferentes formatos. Puedes crear títulos profesionales en 2D y 3D.

EDITOR DE VÍDEOS GRATIS PARA WINDOWS

1. – WINDOWS MOVIE MAKER

Windows Movie Maker es uno de los programas gratis para editar vídeos más conocidos y utilizados por los usuarios de Windows.

Alguna de las funciones que vas a poder realizar son:

Puedes añadir textos, efectos, animaciones con transiciones y otro tipo de efectos para personalizar tu vídeo.

Tiene una función incorporada que permite compartir los vídeos directamente en YouTube, Facebook, etc.

Puedes cortar, acelerar un vídeo o ralentizarlo.

También tiene incorporado un editor de audio para ajustar la música o añadir diferentes efectos. Por lo tanto, también es un programa para hacer vídeos con fotos y música.

2.- VIDEO EDITOR WONDERSHARE FILMORA

Wondershare Filmora es un gran editor de vídeo gratuito con el podrás crear proyectos audiovisuales muy profesionales y además es muy sencillo de utilizar.

Características

Plataforma: Windows y Mac.

Trabaja con diferentes formatos: Un amplio soporte para diferentes formatos, incluyendo MP4, AVI, MOV, AVCHD y más.

Dispone de las herramientas más utilizadas en los editores de vídeos: Le permite cortar, recortar, cortar, dividir y combinar en unos pocos clics.

Dale el acabado que quieras: Varios filtros y efectos visuales para retocar el vídeo. Puedes añadir elementos animados para darle un toque diferente a tus vídeos.

Aunque sea gratis también puede considerarse como un editor de vídeo profesional por todas las funcionalidades que incorpora, como por ejemplo la eliminación del ruido, vista previa de tus fotogramas, etc.

3.- LIGHTWORKS

Lightwork es un editor de video profesional muy potente que te permitirás crear vídeos de una altísima resolución (4 K) y trabajar tanto en formato SD como HD.

Este editor profesional de video se ha utilizado en películas desde hace 25 años como; El lobo de Wall Street, Pulp Fiction, La Conficencial, Hugo, El Discurso del Rey y muchas más…

Además su interface es simple e intuitiva y es bastante sencilla la edición y el corte del tiempo de los vídeos.

Plataforma: Windows, Mac y Linux. Precio: Gratis (versión limitada)

4.- IVSEDITS

IvsEdits es un software para editar vídeo no lineal y muy flexible. Está realizado en Italia, y podremos crear y editar vídeos de una grandísima calidad (4K / 2K / HD / SD).

IvsEdits es un programa de edición de vídeo gratuito, pero pese a eso cuenta con muchas funcionalidades de un editor de vídeo profesional.

Entre sus principales características destacan: añadir efectos especiales, añadir o cortar música, editar vídeos en tiempo real, etc.

Plataforma: Windows.

Precio: Gratis.

5.- VSDC Free Video Editor

Probablemente sea uno de los editores de vídeo gratis más desconocidos y simples, pero si buscas una herramienta para hacer una edición rápida, esta es tu herramienta.

Características:

Podrás trabajar con formatos muy comunes como el AVI, MP4, etc. Podrás editar, cortar y unir clip.

Diseño minimalista y fácil de utilizar.

Te permite aplicar filtros y transiciones. Precio: Gratis

6.- Avidemux

El interface de Avidemux es bastante feo, pero cumple su cometido para hacer ediciones rápidas como cortes y nuevo montaje de nuestro vídeo.

Avidemux es un editor de vídeo gratis para PC que aunque no esté en español , es de software libre y por lo tanto está disponible para las principales plataformas.

Características:

Compatible con la mayoría de formatos de vídeos: Es compatible con muchos tipos de archivos, incluyendo AVI, MPEG compatible DVD, MP4 y ASF, usando una variedad de codecs.

Plataforma: Windows, Mac y Linux. Precio: Gratis

PROGRAMAS DE EDICIÓN DE VÍDEO PARA WINDOWS DE PAGO

1. - Camtasia: Screen Recorder and Video Editor

Puedes probar esta herramienta de manera gratuita durante 30 días,

Características:

Plataforma: Windows y Mac

Uso principal: Creación de guías o manuales en vídeo, gracias a que permite grabar y capturar todo lo que ocurra en la pantalla de tu ordenador.

Efectos de vídeo impresionantes: Crea efectos y animaciones de vídeo espectaculares e incorpóralo a la edición de tu proyecto en Camtasia.

Configuración de audio avanzada: Añade efectos de audio y realizar una configuración avanzada para que el sonido de tus vídeos sorprenda a tus seguidores.
Precio: 278,97 €

2.- AVS Video Editor

AVS Video Editor es otro de los editores de vídeo para Windows que puedes utilizar para conseguir un acabado más profesional.

Entre otras funciones te va a permitir:

Recortar y dividir los vídeos, Mezclas diferentes vídeos y cambiar su posición, Tiene una amplia variedad de efectos y transiciones, Puedes añadir títulos y subtítulos, Editar el audio,Incluso estabilizar las grabaciones de vídeo que estén más temblorosas.

En cuanto a los formatos que soporta:

Edición rápida de vídeos HD: Edita AVI HD, TOD, AVCHD, MOD, MTS/M2TS, etc. con AVS Video Editor. Gracias a la tecnología de cache integrada la edición del vídeo HD se hace más rápida.

Soporta un gran número de formatos de vídeo: Soporta todos los formatos de vídeo claves. Edita y guarda archivos de vídeo en los códecs AVI, VOB, MP4, DVD, WMV, 3GP, MOV, MKV, H.263/H.264, etc.

Precio: 29 €/año o 39 € versión ilimitada.

3.- Movie Studio 13

Movie Studio 13 es un programa de edición de vídeo para principiantes y fácil de utilizar. Podrás crear y editar vídeos de una manera muy sencilla y en muy pocos clics.

Características Plataforma: Windows

Películas, presentaciones y más: Añade fotos y vídeos a la línea temporal y empiece a crear. Arrastra archivos dentro de la línea temporal para ordenarlos exactamente como lo desee.

Toque sus ediciones: Movie Studio es táctil en los PC táctiles, lo que significa que usar un ratón para arrastrar y soltar clips en la línea temporal es cosa del pasado. Edite, añada transiciones y efectos y grabe voiceover, todo con un toque.

Precio: 46,95 €

MEJORES APLICACIONES PARA EDITAR VÍDEOS GRATIS CON EL MÓVIL

Cada vez utilizamos más el móvil para cualquier cosa y a veces para pequeñas ediciones estas app nos pueden ser muy útiles.

1. FilmoraGo – App para editar vídeos

FilmoraGo es una app para editar vídeos desde el móvil gratis que cuenta con una multitud de herramientas con la que vas a poder hacer vídeos muy divertidos.

Entre algunas de sus características podemos destacar:

Puedes mezclar fotos y vídeos, Previsualizar los clips, Reproducción inversa de los vídeos, Ralentizar o acelerar los vídeos, Crear textos y títulos.

Plataforma: IOS y Android.

2. Inshot – Editor de vídeo y foto música

Inshot es otra app para editar vídeos desde el móvil con la que vas a poder añadir música y otros efectos.

Características:

Es compatible con la mayoría de formatos como MP4, MOV, AVI, 3GP, etc, Puedes combinar múltiples vídeos con efectos, Recortar y comprimir vídeos.

Plataforma: IOS y Android.

3. VideoShot – App para cortar vídeos

Otra app para editar vídeos en español que puedes utilizar es VideoShot que además también te permite elaborar diapositivas.

Es una app que suele utilizarse para editar vídeos para redes sociales como YouTube, Instagram o Facebook por su facilidad de uso y sencillez.

Características:

Reconocimiento facial, Filtros modernos, Retoque de rostro, de cuerpo y automático, Compresión de vídeo, Estilos de texto y fuentes para subtítulos, Música para añadir a tus vídeos o subirla directamente desde tu móvil.

Adaptado de:https://www.marketingandweb.es/marketing/programas-edicion-videos/

Práctica: Utilizando Power Point realiza un organigrama sobre los programas para crear y editar videos

CLASE 5

Programas para crear y editar vídeos

Objetivo: Reconocer los diferentes programas de editar videos

Conducta de entrada

Teoría: Ver la presentación llamada ( editores de video.pptx).

EDITORES DE VÍDEO.pptx

NEM " CARLOS ARTURO TORRES " TUNJA

DEPARTAMENTO DE TECNOLOGIA E INFORMATICA

Práctica:

En tu cuaderno Investigar dos editores de vídeo fuera de los que están en la presentación.y tomar tomar fotos de evidencia de lo consultado y enviar al los correos correspondientes.

Realizar el paso a paso de la instalación de (WONDERSHARE FILMORA.doc)

(WONDERSHARE FILMORA.doc)

1. Descarga el programa Filmora

Lo primero que tienes que hacer es descargar el instalador de Wondershare Filmora. Para ello, puedes acceder desde este link https://filmora.wondershare.com/es/editor-de-video/?gclid=EAIaIQobChMI6tqJ_erz6AIVmYjICh1JyA9KEAAYASAAEgIbFPD_BwE

2. Una vez que estén en esta página lo primero que van hacer es dar click en descargar gratis y como puedes ver inmediatamente se descarga el instalador

3. lo siguiente es que vamos a dar click en mostrar carpeta y después saldrá el instalar y daremos click derecho y ejecutar como administrador el instalador

4 . Esperar que termine la instalación

5.vamos a dar iniciar ahora

CLASE 6

1. Introducción

objetivo:Reconocer las herramientas que trae wondershare filmora.

Conducta de entrada

practica: Ver el video 1 paso a paso de Introducción

video 1 paso a paso

2. Importar Medios

Conducta de entrada

practica: Ver el video 2 paso a paso de importar medios

Video 2 paso a paso

practica: Después de haber vistos los dos vídeos que son inducción e importa medios realizar lo siguiente

1. El estudiante realizará un video sobre el tema momentos que más lo han conmovido en esta crisis
mundial del COVID 19 (Tiempo máximo del video 60 minutos ).

2. Hacer una presentación utilizando la herramienta Power point. para explicar con tus propias palabras para que sirve cada pestaña que son

* Transiciones

* Efectos

* Añadir carpeta

CLASE 7

Que es HTML

Objetivo: Conocer un poco sobre HTML.

Video: https://www.youtube.com/watch?v=cqMfPS8jPys

Teoría Leer y analizar lo correspondiente a la temática

Practica: Desarrollar en mi cuaderno que es un HTML y como se complementan con css. (HTML.doc)

(HTML.doc)

HTML es el principal lenguaje informático con el que se escriben las páginas web. Las páginas web son vistas por el usuario mediante unos programas llamados navegadores o "browsers". Por lo tanto el HTML es el lenguaje que usan los navegadores para mostrar las páginas webs al usuario.

Este lenguaje nos permite insertar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, el HTML nos permite introducir referencias a otras páginas Web por medio de los enlaces hipertexto.

El HTML se creó en un principio con una finalidad distinta que la de crear páginas Web, pero al crearse Internet, se tomó como lenguaje de referencia para los navegadores. Con el tiempo se han ido creando distintas versiones, que han tratado de estandarizar este lenguaje, de forma que las páginas puedan verse igual en los diferentes navegadores. Numerosos estándares se han presentado ya. Aquí estudiaremos la versión HTML 4.01. Admitida por todos los navegadores y dispositivos que visionan páginas web. La última versión es el HTML 5, la cual es una ampliación del HTML 4.0 y que intenta adaptar el lenguaje HTML al concepto de una web más dinámica. Los navegadores tienen que adaptarse a esta nueva versión del HTML, por lo que las versiones antiguas de los navegadores no admiten muchas de las nuevas características del HTML 5.

Como ha hemos dicho, el HTML no se creó en principio para visionar páginas web, por lo que pronto se quedó corto para organizar, optimizar y automatizar el funcionamiento de las webs. Como complemento a HTML surgieron otros lenguajes que permitieran un desarrollo normal y más sencillo de las páginas web. El primero de ellos es CSS, con el que indicaremos colores, tamaños, estilos de letra, posición de elementos, etc. Más tarde se incorporan JavaScript, para páginas dinámicas, PHP y otros lenguajes que permiten recopilar información e interactuar con el usuario, para hacer páginas más interesantes.

HTML y CSS

Tal como hemos visto anteriormente, HTML y CSS se complementan, ya que usando sólo HTML conseguiremos páginas que se parecen más a una página de libro que a una web. Con CSS indicamos el estilo de la web, no sólo colores, tamaños y otros elementos de estilo, sino también la posición y distribución de los elementos en la página.

En este manual tenemos la opción de aprender CSS a la vez que HTML, para ello, al final de cada página indicaremos dónde debemos continuar. Tendremos pues la opción de seguir sólo el manual de HTML, o también la de seguir los manuales de HTML y CSS al mismo tiempo.

NAVEGADORES

Un navegador es el programa donde visualizamos las páginas web. Por ejemplo Internet Explorer, Google Chrome u otro similar. Como es obvio, necesitamos al menos un navegador para ver los resultados de nuestro trabajo, aunque en realidad es conveniente tener instalados varios navegadores. No todos los navegadores funcionan de la misma manera ni muestran las páginas igual. Puede haber pequeñas (o grandes) diferencias entre uno y otro. Debemos contrastar los resultados en varios de ellos, necesitamos evidentemente tener instalados los navegadores más usados por los internautas y que abarquen prácticamente la totalidad de cuota de mercado, para asegurarnos que nuestra página la verán igual (o de forma muy parecida) la gran mayoría de los internautas.

Práctica: leer y analizar el paso a paso para así poder realizar una página web.

Realizar una página web

El Editor De Texto.doc

Las páginas web son un tipo de archivos de texto que pueden ser leídos por los navegadores. Por lo tanto crear una web consiste en crear este tipo de archivos. Vamos a hacer aquí un primer ejercicio que consiste en escribir un texto en un navegador web. Para ello necesitaremos un programa o aplicación que sea un editor de texto plano.

Un editor de texto plano es una aplicación que nos permite crear archivos de texto, y sólo texto, sin más añadidos. No podemos usar los procesadores de texto como el "Word" de Microsoft Office o el "Open Office", ya que estos no son "editores de texto" sino "procesadores de texto".

Lo que necesitamos es una aplicación que pueda guardar el texto sin más. En Windows tenemos el "Bloc de notas" o el "WordPad", en el que podemos crear archivos de texto plano.

Lo primero que debemos crear una carpeta en la cual guardaremos todos los archivos que vayamos haciendo a lo largo de este paso a paso. Esta carpeta la hemos puesto dentro de: Bibliotecas/Mis documentos y la hemos llamado "HTML". De esta manera ordenamos los archivos que van a componer nuestra web, y los tenemos localizados. Tú puedes hacer lo mismo o guardarlos en otra carpeta que puedas localizar fácilmente. Es fundamental que todos los archivos que conforman un mismo sitio web estén localizados dentro de una sola carpeta. la cual la Llamaremos a esta carpeta HTML.

El segundo paso es que vamos a escribir un texto que pueda verse en un navegador, abrimos el Bloc de notas de Windows .

Escribimos el siguiente texto: Queridos estudiantes bienvenidos a realizar tu primera página web. Att: Docentes Diana, Carlos, Osmeydy.

Lo que van a colocar ustedes es su nombre completo grado y que materia les gusta más y ¿Por qué?

Después guardamos el archivo que hemos creado, pero en formato HTML. Para ello pulsamos en Archivo / Guardar como.... Se nos abre un cuadro de diálogo en donde podemos guardar el archivo. Al escribir el nombre

del archivo escribimos en el cuadro donde pone el nombre del archivo que debe acabar siempre por ".html" . Nosotros guardaremos el archivo con el nombre: miweb.htm

El archivo que hemos creado lo hemos llamado miweb.html. Al dar nombre a los archivos tenemos siempre dos partes, separadas por un punto. La primera parte (miweb), es el nombre del archivo. Podemos poner cualquier nombre siempre que sigamos unas normas básicas. La segunda parte (.html) es la extensión, e indica el tipo de archivo que estamos creando. En las páginas web, el archivo principal que vemos en el navegador tiene la extensión .html. Por lo tanto nosotros siempre que hagamos una nueva página debemos indicar la extensión. De no ponerla se crearía un archivo de texto plano (extensión "txt"), y no un archivo web (con extensión "html").

El siguiente paso es comprobar que el archivo que hemos creado se ve efectivamente en el navegador. Para ello no tenemos más que abrir el archivo desde la carpeta en que está guardado. Pulsamos para abrir el archivo y vemos que éste no se abre con el bloc de notas, sino con el navegador

El resultado será este:

La Carpeta HTML

Todos los archivos necesarios para crear un sitio web debemos guardarlos dentro de una misma carpeta. Ésta será la carpeta HTML. La carpeta que hemos creado anteriormente será la carpeta HTML de nuestra web. Aquí guardaremos todos los archivos, tanto de texto, como de imágenes, videos, sonidos, etc. que queramos poner en nuestra web. Dentro de esta carpeta podemos crear también subcarpetas para organizar mejor todos estos archivos. Esto es imprescindible para poder ver correctamente el contenido de la página. Todo archivo que esté dentro de la carpeta HTML formará parte de la web. Ya veremos luego cómo enlazar unos archivos con otros para poder ver todo el contenido.

Reglas Para Los Nombres De Archivos

Antes de seguir vamos a dar algunas normas básicas, para poner los nombres a los archivos. Aunque en realidad cualquier nombre o número es válido para dar nombre a un archivo en Windows (salvo algunos signos especiales que no pueden usarse), se recomienda seguir unas ciertas normas para poner nombre a los archivos. Esto nos evitará dudas a la hora de escribirlos correctamente, así como para poder enlazar unas páginas con otras. Nosotros así lo haremos, y es importante que tú también lo hagas así, para que desde el principio se sigan buenos hábitos.

El porqué es muy sencillo: un acento, un signo mal puesto, un espacio de más, y el ordenador interpreta otro nombre distinto al que queremos darle, con lo cual el archivo no lo encuentra y el enlace o el efecto deseado no se produce.

En principio, en este manual no debemos tener problemas con esto, ya que diremos siempre los archivos que debemos crear y con qué nombres. Sin embargo es conveniente saberlo por si queremos hacer alguna otra web.

Normas Para Escribir Nombres De Archivos Y Carpetas

* Texto en minúsculas: Todo el texto del nombre de archivo se escribirá en minúsculas.

* No poner acentos: Escribiremos todas las palabras sin acento, aunque los tengan.

* No empezar por un número: El primer carácter o signo que escribamos no debe ser un número, pues algunos programas podrían interpretar mal el nombre del archivo

* Separar las palabras con guión bajo _: Debemos evitar los espacios en blanco ya que éstos pueden causar problemas en los navegadores. Lo normal es sustituirlos por el guión bajo. El guión bajo (_) se escribe pulsando la tecla Mayúsculas y la tecla Guión a la vez).

Con estas sencillas normas tendremos estandarizado la forma de escribir los archivos y carpetas que vayamos creando, sin asaltarnos la duda de si tal o cual palabra la he puesto en mayúscula o minúscula, si habré o no puesto el acento, etc.

CLASE 8

Mi primera web

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Etiquetas para texto.doc)

Practica: leer y analizar el paso a paso para así poder realizar nuestra primera página web.

Etiquetas para texto.doc

En el paso anterior hemos insertado un texto en nuestra página mediante una etiqueta. Esta era la etiqueta h1 que insertaba un título de nivel 1.

Vamos a ver aquí las etiquetas que podemos usar para insertar texto. Estas son: <h1> <h2> <h3> <h4> <h5> <h6>.Hay por tanto seis etiquetas diferentes para insertar títulos, cada una de ellas debe ir seguida del texto a insertar y su correspondiente etiqueta de cierre, que cómo explicamos en el paso anterior consiste en la misma etiqueta con la barra inclinada al principio: ... Todas ellas nos dan el texto en negrita, y el tamaño de letra va del más mayor en <h1> a más pequeño en <h6>; aunque, como veremos más adelante, esto puede cambiarse.

Tiqueta De Párrafo: Para insertar párrafos de texto utilizaremos la etiqueta <p>... </p>. Esta es una de las etiquetas más utilizadas en HTML, y nos separa un párrafo de otro. Aunque escribamos el texto en el block de notas u otro editor de texto separado en distintas líneas, si no lo separamos con estas etiquetas, el navegador interpretará que es parte del mismo párrafo, y lo escribirá seguido. Por tanto, cada párrafo debe abrirse con la etiqueta <p> seguido del texto de ese párrafo, y acabar con la etiqueta de cierre </p>. Más adelante aprenderemos a cambiar el aspecto de los textos. (tipo de letra, tamaño, color de letra, etc.).

Ahora que sabemos cómo poner diferentes tipos de textos en la página vamos a ampliar el texto de nuestra página utilizando diferentes etiquetas para texto. Vamos a realizar un nuevo archivo/Nuevo/ y copiamos el código html y lo guardamos como index.html.

<html>

<head>

<title>Edades de la prehistoria</title>

</head>

<body>

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

<p>Podemos definir la prehistoria como el periodo de tiempo previo a la historia trascurrido desde el inicio de la evolucion humana hasta la aparicion de la escritura se divide en dos grandes momentos. </p>

<p>Se divide en dos grandes momentos: .</p>

<h3>Edad de piedra</h3>

<p>Abarca desde que los seres humanos empezaron a elaborar herramientas de piedra homínidos(primates antepasados del hombre) cazaban, construían y cortaban. la utilización del instrumentos les permitio dominar sus entornos..</p>

<p>Pulsa en los siguientes enlaces para ir a las siguientes páginas.</p>

</body>

</html>

Si al abrir la carpeta no encuentras el archivo, ve al cuadro de abajo a la derecha donde pone Documentos de texto (*.txt) y pulsa en la flecha de la derecha. Se te abre una lista de opciones, elige ahí Todos los archivos

Comprobamos el resultado. Para ello vamos a la carpeta HTML y abrimos el archivo, el resultado se verá así en el navegador:

Carpeta de Imágenes.doc

Nuestro siguiente paso será insertar una imagen en la página. Para ello debemos guardar la imagen en la carpeta HTML de nuestra web. Como seguramente pondremos más de una imagen en nuestra web, dentro de la carpeta HTML crearemos una subcarpeta en la que guardaremos todas las imágenes así como otro tipo de archivos que no formen parte del código que escribimos, pero sí de la página.

Para ello abrimos nuestra carpeta HTML y creamos allí una nueva carpeta a la que llamaremos imágenes. Nosotros tenemos la carpeta HTML en Mis Documentos / HTML. Para añadir una nueva carpeta pulsamos en la barra superior, donde pone "Nueva carpeta", y se crea una nueva carpeta (en windows7). Con un click sobre el nombre de la carpeta podemos cambiarle el nombre. Le cambiamos el nombre y la llamamos imágenes

Copiar Una Imagen

Lo siguiente que haremos será guardar una imagen en la carpeta imagenes. Asegúrate de que el nombre del archivo de imagen sea logo.gif Si no es así cambia el nombre del archivo de imagen.

Etiquetas De Imagen

Para insertar una imagen en una página web utilizaremos una etiqueta de imagen. Esta la escribiremos, en su forma básica, de la siguiente manera:

<img src="..." alt="..."/>

Vemos una serie de novedades en esta etiqueta. Vemos que además del nombre de la etiqueta (img), tiene otra serie de elementos dentro de la misma etiqueta (src="...", alt="...").

Estos elementos son los atributos.

Todas las etiquetas de apertura pueden tener atributos, cada atributo consta de dos partes separadas por el signo igual. La primera parte del atributo es el nombre, aquí se indica algo que se añade a la etiqueta. La segunda parte, siempre escrita entre comillas, es el valor, e indica un valor que tomará lo indicado en la primera parte.

Por otra parte las etiquetas de imagen no tienen etiqueta de cierre, ya que toda la información que necesitamos va en los atributos. La etiqueta se abre y cierra en sí misma, esto se indica con una barra inclinada al final de la etiqueta (<img ... />).

Veamos ahora los atributos que pueden tener las etiquetas de imagen:

El Atributo src

Con este atributo indicamos qué imagen queremos insertar en la página, para ello localizamos la imagen e indicamos dónde está. Es decir hay que poner la "ruta" que lleva al archivo de imagen. Si el archivo de imagen está en la misma carpeta que la página simplemente tenemos que indicar el nombre del archivo (indicando también la extensión), si no es así indicaremos también la carpeta en la que está. Por ejemplo nosotros para insertar la imagen pondremos lo siguiente:

<img src="imagenes/EdadMedia.jpg" />

Aquí indicamos que la imagen está dentro de la carpeta objetos. Ponemos después una barra inclinada que indica que entramos en la carpeta objetos. Después escribimos el nombre del archivo de imagen que queremos insertar, en este caso EdadMedia.jpg. Fíjate que debemos poner también la extensión que tiene el archivo de imagen. (.jpg).

Si la imagen estuviera en una carpeta de nivel superior a la de la página indicaremos que subimos un nivel en la jerarquía de carpetas escribiéndolo así: ../ (Dos puntos y una barra inclinada). De esta manera podemos localizar la ruta de cualquier imagen subiendo o bajando carpetas, e indicando, una vez localizada la carpeta, el nombre de archivo de imagen.

El Atributo alt

Este atributo, aunque no es imprescindible, indica un texto que se verá en el caso de que la imagen no pueda cargarse. Como valor pondremos el texto.

Por ejemplo:

<img src="imagenes/EdadMedia.jpg" alt="Logo de la página" />

Otros Atributos

Los atributos width="" y height="" indican respectivamente la anchura y la altura de la imagen en la página. Como valor podemos poner un número, que indicará el número de píxeles que ocupa la imagen, también podemos poner un porcentaje (por ejemplo width="20%").

Si ponemos los dos atributos (width y height) debemos tener cuidado de no distorsionar la imagen. Si ponemos sólo uno, la otra medida se adaptará a la que hemos puesto, guardando las proporciones de la imagen(<center></center) esto es sirve para centrar la imagen.

<img src="imagenes/EdadMedia.jpg" alt="Logo de la página" width="20%" />

Insertar La Imagen En La Página

Con lo visto anteriormente no nos será difícil insertar la imagen en la página. Suponemos que ya hemos copiado la imagen en la carpeta imágenes; después La pondremos al principio. Para ello abrimos el archivo index.html con el block de notas de Windows, y lo modificamos, insertando una etiqueta de imagen.A continuación vamos a ver el código:

<p> <center><img src="imagenes/EdadMedia.jpg" alt="Logo YouTube" border="0" height="90" /></center>

<center><img src="imagenes/edad.jpg" width="350px" alt="Logo Pinterest" border="0" height="200" /></center>

<center><img src="imagenes/videos.jpg" alt="Logo YouTube" border="0" height="200" /></center>

<center><img src="imagenes/pre.jpg" alt="Logo " border="0" height="200" /><center>

En color amarillo hemos destacado el nuevo texto que hemos puesto en el archivo HTML de la página. Con esto hemos insertado la imagen que tenemos dentro de la carpeta imágenes. La página quedará ahora así:

Si has seguido los pasos anteriores tu página quedará ahora como la vista de arriba. Si no puedes ver la imagen o no te sale igual, repasa lo visto anteriormente, y fíjate en que la ruta de la imagen (el valor del atributo src) esté bien puesta, e indique el lugar en el que hemos guardado la imagen.

De momento estamos insertando cosas en la página. No te preocupes si el aspecto de la página queda algo desordenado y parece más un documento de texto que una página web. En pasos posteriores le daremos estilo a la página.

Enlaces Externos

Qué Son Los Enlaces: Un enlace es un texto que nos lleva a otra a otro sitio de la web. El usuario no tiene más que hacer click encima del texto para que le aparezca otra página en su navegador. Los enlaces pueden ser de varios tipos, dependiendo del lugar al que nos lleven. Si nos llevan a una página de otro sitio web, es un enlace externo. Si nos lleva a otra página del mismo sitio que estamos viendo, es un enlace local. Por último si nos lleva a un lugar dentro de la misma página que estamos viendo es un enlace interno.

Los enlaces se distinguen del resto del texto porque suelen ser de diferente color. De forma predeterminada en HTML aparecen en color azul y subrayado. Además cuando pasamos el ratón por encima el cursor cambia de forma, y aparece como una mano con un dedo señalando el texto. Esto se puede cambiar, tal como veremos más adelante. Sin embargo siempre van destacados sobre el resto del texto para que el usuario sepa fácilmente que está ante un enlace.

Etiqueta De Enlace: Para insertar un enlace utilizaremos una etiqueta de enlace, la cual, en su forma básica es así:

<a href="ruta_del_enlace">Texto del enlace</a>

La etiqueta <a>... </a> Sirve para insertar en la página cualquier tipo de enlace. Si queremos que el enlace sea efectivo y lleve a algún lugar debemos poner siempre el atributo href="ruta" en donde su valor ("ruta") debe ser una dirección que nos lleve al lugar que queremos abrir con el enlace. Donde hemos puesto "Texto del enlace" pondremos el texto que queremos que se vea en la página, y sobre el cual el usuario debe hacer click para ir a la página enlazada.

La Ruta Del Enlace

Es por lo tanto fundamental para que el enlace funcione escribir bien la ruta en el valor del atributo href. Parako enlaces externos (a otra página de otro sitio web) La ruta es la misma que la dirección de la página web.

La dirección de cualquier página la encontramos siempre en la barra de direcciones del navegador al abrir la página. Esta barra está en la parte superior del navegador e indica el nombre de la página. Por lo tanto para obtener la ruta hacia cualquier página basta con copiar y pegar la dirección que encontramos en la barra de direcciones.

Por ejemplo si queremos poner un enlace de una infografía de pinterest en nuestra página, abrimos primero la página de pinterest, y copiamos la dirección (botón derecho, copiar), después en nuestra página insertamos un enlace con la ruta ahí indicada. El texto que pondremos en el HTML será el siguiente:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Todas las direcciones web a páginas externas empiezan por http:// (o https://). Este comienzo debe ponerse también al escribir la ruta, ya que es lo que indica que estamos enlazando a una página externa.
Insertar Enlaces En Nuestra Página

Ahora que ya sabemos cómo poner enlaces pondremos varios enlaces en nuestra página a otros sitios web. Nosotros queremos, además, que al abrir la página del enlace, ésta se abra en una nueva pestaña del navegador, de manera que se conserve la pestaña en la que está nuestra página. Para ello a la etiqueta de enlace le añadiremos también el atributo target="_blank", por ejemplo:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Enlaces En Imágenes

Usar Una Imagen Como Enlace : Podemos también usar una imagen como enlace, para ello creamos un enlace y sustituimos el texto del enlace por una etiqueta de imagen.

Por ejemplo si tenemos un enlace tal que:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Sustituimos el texto del enlace por una etiqueta de imagen. Siguiendo con este ejemplo, guardamos la imagen de la infografía en la carpeta imágenes. Después sustituimos el texto del enlace por una etiqueta que nos haga ver la imagen

Ahora incluimos el código. Justo antes de cada enlace de texto pondremos su enlace de imagen. Para ello abrimos el archivo index.html con el block de notas de Windows e incluimos las líneas que marcamos en amarillo:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">

</a></p>

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

<p><a href="https://www.youtube.com/watch?v=G2tUkEvo_lM" target="_blank">

</a></p>

<p><a href="https://www.youtube.com/watch?v=G2tUkEvo_lM" target="_blank">Video en YouTube</a></p>

<p><a href="http://apegoyliteratura.es" target="_blank">

</a></P>

<p><a href="http://apegoyliteratura.es" target="_blank">Consultar Apegoyliteratura</a></p>

La imagen sustituye al texto del enlace, por lo que al pulsar sobre la imagen se nos abrirá la página indicada.

CLASE 9

Maquetación.

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Maquetación.doc)

Practica: leer y analizar el siguiente paso para terminar nuestra pagina web

MAQUETACIÓN

Qué Es La Maquetación

La maquetación es la distribución de los elementos en la página. En la página que estamos haciendo, de momento vemos que aparecen todos los elementos unos debajo de otros, ocupando cada uno todo el ancho de la página. En cualquier página que visitemos esto no está así, puede haber elementos que ocupen todo el ancho y otros que se agrupan en columnas

Etiqueta div

Para crear las distintas secciones de la página, HTML dispone de la etiqueta <div> ..</div> Esta etiqueta nos sirve para dividir la página en distintas secciones, a las que posteriormente les aplicaremos estilos distintos con CSS, pudiendo así colocar cada sección en un sitio distinto y dando a cada una de ellas un aspecto diferente.

Las etiquetas div pueden anidarse unas dentro de otras, de manera que se crean distintas subsecciones dentro de una misma sección.

Atributos De Identidad Y De Clase

Tanto la etiqueta <div> ...</div>, como otras etiquetas de texto o de imagen, pueden llevar los atributos id=" ... " y class=" ... ".

Mediante el atributo id=" " identificamos un elemento como único en la página. Podemos poner cualquier valor a este atributo, sin embargo este valor no puede estar repetido en otro atributo id. Por ejemplo:

<div id="cabecera"> ... </div>

La etiqueta div crea una división o sección en la página. Mediante el atributo id identificamos esta sección como la "cabecera" de la página. Sólo puede haber una cabecera, si quisiéramos poner una segunda cabecera, pondríamos otra sección con otro atributo id con otro valor, por ejemplo:

<div id="segunda_cabecera"> ... </div>

El atributo class=" " permite formar una clase de elementos a los que posteriormente se les puede aplicar a todos ellos el mismo estilo. Al igual que con id podemos poner cualquier valor, sin embargo todos los elementos que tengan el mismo valor pertenecerán a la misma clase. Por ejemplo, podemos hacer que varias imágenes pertenezcan a la misma clase:

<img class="logos" src="imagenes/edad.jpg" alt="Infografia ">

<img class="logos" src="imagenes/videos.jpg" alt="YouTube">

<img class="logos" src="imagenes/pre.jpg" alt="Apegoyliteratura">

Las tres imágenes anteriores pertenecen a la misma clase, por lo que posteriormente se les podrá aplicar a todas ellas el mismo estilo.

Sesiones En La Página Principal

Visto esto vamos a cambiar la página principal de nuestra web, de manera que crearemos las distintas secciones y les daremos atributos de identidad o de clase para posteriormente poder aplicar distintos estilos.

Para que la página quede tal como hemos previsto en el boceto superior, la modificaremos. Abre para ello el archivo index.html con el editor de textos y cámbialo de manera que quede como está aquí, para ello no tienes más que añadir los textos que están en amarillo en el mismo sitio que indicamos aquí:

</div>

</div>

</div>

</div>

</div>

En color amarillo viene destacado lo que hemos añadido a la página. El resto (en color negro) es lo que ya teníamos.

Lo que hemos hecho es dividir la página en distintas secciones mediante la etiqueta div. A cada sección le hemos puesto un atributo de identidad. Dentro de la última sección hemos hecho subdivisiones con cada uno de los enlaces. A cada uno de ellos le hemos puesto una etiqueta div con un atributo de clase.

Cabe destacar la etiqueta <div class="vacio"></div> que hemos puesto al final de la sección de "enlaces". Esta es una etiqueta vacía que, como veremos más adelante nos permitirá hacer algunos ajustes para que la página se vea bien.

Después de cambiar la página, si la abrimos con el navegador veremos que ésta no ha cambiado en nada.

Contenido Y Estilo

Al crear una página web tendremos en cuenta dos aspectos, el contenido y el estilo. El contenido es lo que mostramos en la página, es decir los textos, enlaces, imágenes, etc.

El estilo es cómo lo mostramos, es decir colores, tipografía y tamaño de textos, posicionamiento y maquetación de los elementos, fondos en colores o imágenes, etc. Hasta ahora al crear nuestra página nos hemos centrado en el contenido, el cual lo hemos escrito con el lenguaje HTML. Ahora daremos estilo a lo que hemos hecho hasta aquí.

Estilo Con CSS

En las primeras "webs" el estilo se ponía también con el lenguaje HTML. Para ello eran necesarias toda una serie de etiquetas y atributos que complicaban mucho la página. Para solucionar esto pronto se inventó el lenguaje CSS, con el cual se indica el estilo de la página, dejando el lenguaje HTML para el contenido.

En principio puede parecer que es más complicado utilizar dos lenguajes distintos, sin embargo, al separar el contenido del estilo, resulta más fácil no sólo localizar los elementos en el archivo, sino también revisarlos. Seguiremos ahora con nuestra página, y veremos de forma práctica como crear un archivo CSS en el que pondremos el estilo.

El Archivo CSS

Ahora vamos a crear un nuevo archivo de texto, simplemente abre un archivo nuevo que esté en blanco (sin nada escrito).

Escribe en este nuevo archivo lo siguiente:

Ahora guardaremos este nuevo archivo con una extensión CSS. Para ello pulsamos en Archivo / guardar Como y En el cuadro que nos sale para guardarlo, buscamos la carpeta HTML de nuestra web (buscar la carpeta Mis Documentos/ HTML). Donde pone "Nombre" escribiremos el nuevo nombre que le damos a este archivo. Nosotros lo guardaremos con el nombre inicio.css. Pulsamos después en "Guardar".

Al abrir la carpeta HTML de nuestro sitio vemos que tenemos el nuevo archivo css. Pero antes de seguir vamos a explicar lo que hemos escrito en este archivo

La primera línea que hemos puesto es un comentario. Los comentarios son anotaciones para indicar lo que hacemos. No tienen ningún valor en programación y daría lo mismo ponerlos o no, pero para el que está programando, o sea nosotros, le puede ser de utilidad para saber lo que hay en el archivo.

Los comentarios en CSS empiezan siempre por los signos /* y terminan con los signos */

:/* ... aquí va un comentario ... */

La segunda línea es la realmente importante. La línea que hemos puesto es la siguiente.

h1 {text-align: center; }

En primer lugar con h1 indicamos que queremos modificar todas las etiquetas del tipo <h1> ... </h1>. A esta parte la llamamos selector porque selecciona las etiquetas que queremos modificar.

La segunda parte, es lo que escribimos dentro de las llaves { ... } y la llamamos declaración, y es donde indicamos lo que queremos cambiar. Cada aspecto que podemos cambiar es una propiedad. La propiedad que hemos indicado aquí es text-align (alineación del texto). La propiedad puede tener distintos valores. Aquí nosotros hemos elegido el valor center (centrada); aunque también podríamos haber elegido los valores left, right, justify (izquierda, derecha, justificada).

El conjunto de selector y declaración se llama regla. Fíjate bien en la sintaxis empleada. En primer lugar ponemos el selector, después la declaración (entre llaves). Dentro de la declaración ponemos la propiedad, y separado por dos puntos el valor de esa propiedad, para acabar con punto y coma. Después del punto y coma podemos poner otra propiedad dentro de la misma declaración, que afecta al mismo selector, tal como veremos más adelante.

Enlazar Archivos

Una vez que tenemos el archivo CSS debemos indicar que este archivo se corresponde con la página de inicio de nuestra web. Para ello en la página de inicio de nuestra web pondremos una etiqueta que indique que el estilo de esta página está en el archivo CSS que hemos creado.

Para ello abrimos el archivo index.html de nuestra carpeta HTML con el editor de textos, y modificamos la cabecera de la página, es decir la etiqueta <head> ... </head>, dentro de la cual incluiremos la siguiente etiqueta:

La etiqueta de cabecera (head) del archivo index.html quedará así:

En azul hemos destacado la nueva línea que escribiremos en el archivo de inicio (index.html). No haremos más cambios en la página de inicio de nuestra web. Ahora vamos a explicar brevemente la nueva etiqueta que hemos puesto. Siempre que queramos enlazar un archivo CSS para que se corresponda con una página en HTML, en el archivo HTML, y concretamente en la cabecera (etiqueta head) escribiremos esta etiqueta tal y como la tenemos aquí. Los atributos rel y type indican que estamos enlazando con una página en lenguaje CSS, y se escriben siempre igual, y con el mismo valor que hemos puesto aquí.

Lo único que cambiará es el valor del atributo href en el cual escribiremos la ruta hacia el archivo CSS. En el caso de que el archivo HTML y el CSS estén en la misma carpeta basta con poner el nombre del archivo CSS (siempre indicando su extensión). Como aquí hemos llamado al archivo CSS inicio.css, y lo hemos colocado en la misma carpeta que el archivo index.html, El valor del atributo href será: href="inicio.css".

Estilo De Textos

Estilo Del Título Principal

En esta página vamos a cambiar el estilo de los textos de nuestra página de inicio. En la página anterior ya hicimos un primer cambio en el estilo centrando el título principal mediante el lenguaje CSS. Continuaremos aquí cambiando el estilo de los textos de nuestra página de inicio.

Recuerda que en el paso anterior, para centrar el título principal, hemos puesto la siguiente regla (línea) en CSS:

h1 {text-align: center; }

Añadiremos a esta regla algunas propiedades más para cambiar el estilo del título principal, estas son las siguientes:

*color: blue; Cambiamos el color del texto a azul. La propiedad color cambia el color de texto. Algunos colores admiten como valor su nombre en inglés, aunque para la mayoría o para colores más concretos se usa una nomenclatura especial

*font-size: 40px; Con esta propiedad concretamos el tamaño de la letra. en este caso indicamos que medirá 40 píxeles de alto. Remitimos a la página indicada anteriormente para ver otro tipo de medidas que pueden ponerse.

* font-family: arial; Esta propiedad indica la tipografía o "fuente" (tipo de letra). Como valor ponemos un tipo de letra. El texto al que se le aplica se verá en este tipo de letra siempre que el usuario la tenga instalada en su ordenador. Conviene por tanto poner tipos de letras comunes, (no muy raras) ya que si no veremos el tipo de letra por defecto. Podemos poner también varios tipos de letras seguidos por comas (por ejemplo: font-family: nimrod, tahoma, arial; de este modo si no se puede ver con la primera se pasa a la segunda, y si no a la siguiente ..

un procedimiento similar para cambiarlo. Para ello escribiremos la siguiente regla CSS:

h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman"; margin: 20px 100px; }

La novedad en esta regla respecto de las anteriores está en que ponemos una nueva propiedad. La propiedad margin crea un margen alrededor del elemento (espacio vacío). Como valor ponemos aquí dos medidas. La primera indica el margen por arriba y por abajo, y la segunda el margen por la izquierda y por la derecha.

Observa también cómo el tipo de letra "times new roman" lo hemos puesto entre comillas, esto se debe a que se escribe con varias palabras, y de este modo indicamos que es un sólo bloque.

Estilo De Párrafos

Nos queda sólo cambiar el estilo de los párrafos para tener ya todos los textos con estilo, ya que los enlaces los veremos más adelante. Seguimos para ello los mismos pasos que para cambiar el estilo de los titulos, es decir en el archivo de CSS (inicio.css) añadimos una nueva regla que cambie el estilo de los párrafos. Esta es la línea:

p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; font-size: 14px; color: navy; }

En principio vemos que hemos empezado la línea por el selector p. Esto hace que se seleccionen todos los párrafos de la página en la cual aplicamos los siguientes cambios (propiedades):

* text-align: center; : Cambiamos la alineación de los párrafos a justificada.

* margin: 2em 10em; : Cambiamos los márgenes del párrafo. La medida "em" se corresponde con el tamaño medio de una letra. Con la primera medida (2em) establecemos el margen superior e inferior, y con la segunda (10em) establecemos los márgenes laterales.

*font-family: verdana, nimrod, tahoma; : Al igual que en las reglas anteriores, establecemos aquí el tipo de letra o "fuente" de los párrafos.

*font-size: 14px; : Definimos el tamaño de letra.

* color: navy; : Definimos el color de letra.

Ahora Abrimos por tanto el archivo inicio.css y le añadimos las líneas anterior. El código es así y el archivo quedará así:

/*archivo de estilo para página de inicio*/

* { margin: 0 auto; padding: 0; }

h1 {text-align: center; color: black; font-size: 20px; font-family: arial; }

h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman";

margin: 10px 10px; }

p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma;

font-size: 14px; color:navy; }

En color azul hemos destacado la nueva línea que hemos puesto, las demás líneas ya las teníamos anteriormente. Ahora al abrir la página index.html con el navegador veremos que el estilo de los párrafos ha cambiado. Lo veremos así:

ESTILO DE ENLACES

Estilo General Para Enlaces

Por defecto los enlaces aparecen subrayados y en un color azul o morado. Pero esto no es normalmente lo que queremos para los enlaces de nuestra página. Así que en principio podemos cambiarlo desde el archivo CSS con la siguiente línea:

a {text-decoration: none; color: red; }

Aquí usamos el selector a para seleccionar todos los enlaces de la página. La propiedad text-decoration: none; quita el subrayado que tienen los enlaces por defecto mientras que con la propiedad color: red; cambiamos el color de los enlaces. Sin embargo para los enlaces de nuestra página pondremos la siguiente regla CSS:

a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }

Seguimos usando el selector a para seleccionar todos los enlaces de nuestra página, pero aquí les cambiamos el estilo con las siguientes propiedades:

* text-decoration: none; Como hemos visto esta propiedad quita el subrayado que tienen los enlaces por defecto.

* font-weight: bold; Esta propiedad pone el texto en negrita (letra más gruesa).

* font-size: 18px; Ya hemos visto esta propiedad en los textos anteriores. Aquí le damos al texto de los enlaces un tamaño de 18 píxeles.

* font-family: tahoma, arial; Ya vista anteriormente, esta propiedad indica el tipo de letra que tendrán los enlace

Por último con otra regla CSS reduciremos el tamaño de las imágenes que actúan como enlaces, para ello pondremos la siguiente regla CSS:

a img { height: 150px; }

Como novedad vemos aquí un selector compuesto. Con a img indicamos que seleccionamos las etiquetas de imagen (img) que estén dentro de las etiquetas de enlace (a). La propiedad height: 150px; indica que el tamaño en altura de las imágenes será de 150 píxeles.

Estilo Especial De Enlaces: Pseudoclases

Sin embargo habrás observado en muchas páginas, que los enlaces pueden cambiar de aspecto cuando se les pasa el ratón por encima, o una vez que han sido visitados. Esto se debe a que un enlace puede tener diferentes estados, y a cada estado se le puede aplicar un estilo o pseudoclase distinto. Los estados que puede tener un enlace son los siguientes:

* link : Enlace en su estado original.

* visited : Enlace que ya ha sido visitado.

* hover : Enlace mientras se mantiene el ratón encima del mismo.

* active : Enlace en el momento en que se está pinchando en el mismo. Este estado dura un periodo muy breve de tiempo.

Podemos aplicar diferentes estilos a cada uno de los estados de un enlace, consiguiendo que éste cambie de estilo al cambiar de estado. Para ello añadimos en el selector de CSS una pseudoclase, que consiste en escribir el nombre del estado precedido de dos puntos, por ejemplo:

a: hover {color: red; }

Con esta regla el color de los enlaces cambia a rojo sólo cuando se les pasa el ratón por encima, (estado "hover"). Al dejar de estar el ratón encima vuelve a su color original.

Lo normal es poner un estilo general para los enlaces, donde se incluyen las propiedades que no cambian, y después poner el estilo con las pseudoclases, para las propiedades que queremos que cambien. Nosotros así lo hacemos también para nuestra página de portada. Ya hemos puesto el estilo general, ahora pondremos el estilo para las pseudoclases. Éste será el siguiente:

a:link { color: navy; }

a:visited { color: blue; }

a:hover { color: green; font-style: italic; }

a:active {color: red; }

Definimos distintos colores para texto de los enlace según sea su estado. En el estado hover (pasar el ratón por encima) hemos definido también una nueva propiedad, font-style: italic. Esta propiedad pone el texto en cursiva (letra inclinada).

Para destacar las imágenes que sirven de enlace haremos éstas un poco más pequeñas cuando se les pase el ratón por encima. Para ello pondremos también la siguiente regla CSS:

a: img:hover { height: 145px; }

Con esto reducimos la imagen 5 píxeles, al pasarle el ratón por encima, respecto al tamaño que le hemos puesto originalmente.

Cambios en la página

Vamos ahora a hacer los cambios en el archivo CSS para que nuestra página quede tal como queremos. Abrimos por lo tanto el archivo inicio.css con el editor de texto y debajo de lo que ya tenemos escrito escribiremos unas cuantas líneas.

En primer lugar cambiaremos la imagen de la cabecera, para ello añadimos al archivo CSS la siguiente línea.

#cabecera img { float: left; width: 100px; margin-left: 50px; }

Mediante el selector #cabecera img se seleccionan todas las imagenes que estén dentro de la etiqueta con id="cabecera".

Con la propiedad float: left; colocamos la imagen a la izquierda. Con width: 100px; reducimos el tamaño de la imagen para que se ajuste al tamaño de la cabecera. Con margin-left: 50px; ponemos un margen a la izquierda de la imagen para que no esté tan pegada al borde izquierdo de la pantalla.

Ahora cambiaremos los bloques de imagen y enlace que hemos marcado con los atributos class="mienlace". Para ello añadimos al archivo CSS la siguiente línea:

.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }

Con el selector .mienlace seleccionamos todos los bloques en los que hemos puesto el atributo de clase class="mienlace". Para cambiar su aspecto hemos aplicado las siguientes propiedades:

* width: 30%; : Reducimos la anchura del bloque a un 30% del ancho de la pantalla, de esta forma nos caben los tres bloques en una sola línea.

* margin: 20px 1% : Ponemos un margen alrededor de los bloques, para que no estén pegados a los demás elementos. El primer valor (20px) corresponde a los márgenes superior e inferior, y el segundo (1%) corresponde a los márgenes izquierdo y derecho. El porcentaje que ponemos en el segundo valor se mide respecto a la anchura total del elemento contenedor (pantalla), y se añade a los porcentajes que ya teníamos, de modo que cada elemento ocupa un 32% del ancho de la pantalla (30% del elemento más un 2% de los márgenes).

* float: left; : Mediante el posicionamiento flotante conseguimos que los elementos se pongan en horizontal, ya que entre todos no suman el 100% del ancho de la pantalla.

* background-color: aqua; : Esta propiedad cambia el color de fondo del elemento (el margen no se incluye). De esta manera destacamos estos elementos sobre el resto.

Por último dentro de la clase "mienlace" tenemos unas etiquetas de párrafo a las que debemos cambiar el estilo para que no sigan el estilo general de los párrafos anteriores de la página, para ello escribimos en el archivo CSS la siguiente línea:

.mienlace p { margin: 10px 60px; }

Cambios En La Cabecera

Cambiaremos ahora el estilo en la cabecera de la página. Cambiaremos el color de fondo a un color gris plateado mediante la propiedad background-color: silver. y añadimos también un margen interno para dejar espacio entre el borde del elemento y su contenido, para ello utilizamos la propiedad padding: 20px 10px;. Con la primera medida 20px indicamos el margen superior e inferior, con la segunda, 10px indicamos los márgenes izquierdo y derecho.

El color de fondo indicado en backgroound-color lo vemos también en los márgenes internos (padding) pero no se ve en los márgenes externos (margin).

Añadiremos por tanto la siguiente línea al final del archivo CSS para cambiar la cabecera:

#cabecera { background-color: silver; padding: 20px 10px; }

Una vez hayamos insertado las dos líneas que hemos visto hasta ahora, cerramos el archivo inicio.css y guardamos los cambios. Comprobamos después el resultado abriendo el archivo principal (index.html) con el navegador. Este lo veremos como el del siguiente enlace:

Sin embargo éste no es el resultado que queremos, ya que las subsecciones donde se incluyen los enlaces no están incluidas en el recuadro.Esto es debido a que éstas están en posicionamiento flotante (propiedad float: left;), y por tanto están fuera del flujo normal de los elementos de la página.

Para incluirlos dentro del recuadro, el truco está en poner un elemento normal (no flotante) después de éstos y obligar al recuadro a extenderse hasta este elemento.Éste elemento suele ser un elemento vacío. Explicamos de este modo porqué hemos puesto en el código HTML el elemento <div class="vacio"></div> al final de la sección.

Para extender el recuadro hasta este último elemento utilizamos la propiedad clear: both de CSS. por tanto volvemos a abrir el archivo inicio.css con el editor de textos , e incluiremos al final del mismo la siguiente línea:

.vacio { clear: both; }

Con esto el elemento vacío queda detrás de los elementos flotantes, y como éste pertenece a la sección "favoritos", obliga a la sección a extenderse hasta este elemento, con lo que los elementos flotantes quedan incluidos dentro de la sección.

Resumen De Archivo CSS:

A continuación el código de todo los visto anterior mente

a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }

a img { height: 200px; }

a:link { color: navy; }

a:visited { color: blue; }

a:hover { color: green; font-style: italic; }

a:active {color: red; }

a img:hover { height: 145px; }

#cabecera img { float: left; width: 100px; margin-left: 50px; }

.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: silver }

.mienlace p { margin: 10px 60px; }

#cabecera { background-color: silver; padding: 20px 10px; }

#favoritos { background-color: yellow; width: 90%; border: 5px double red; }

.vacio { clear: both; }

Dentro del div "navegación" pondremos los enlaces a todas las páginas que van a formar nuestra web. Cada uno de estos enlaces los pondremos dentro de un "div" con un atributo de clase. De esta manera nos será más fácil posicionar y dar estilo a la barra de navegación.

Dentro de la sección div id="navegación" incluiremos el siguiente contenido

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><ahref="formulario.html">Formularios

</a></div>

<div class="vacio"></div>

</div>

Dentro de la sección div id="navegación" incluiremos el siguiente contenido

Después de incluir estas líneas cerramos y guardamos el archivo index.html. Lo abrimos después con el navegador y se vera asi:

Estilo De Enlaces

Ya nos queda sólo modificar el estilo de los enlaces para que éstos no sean igual que los que tenemos en la sección id="enlaces" y que resulten más visibles. Lo primero que haremos será modificar el estilo general de los enlaces de la barra de navegación. Para ello, después de abrir el archivo inicio.css con el editor de textos, incluimos al final del mismo la siguiente línea.

.menu a { margin: 0px 50px; color: white; }

Con la propiedad margin: 0px 50px dejamos un margen a izquierda y derecha de los enlaces, que hacen que el primer enlace no queda pegado al borde izquierdo de la página, y los demás enlaces se vean más centrados.

La propiedad color:white hace que los enlaces se vean de un color blanco, que destaca sobre el fondo púrpura de la barra de navegación. Ahora pondremos también el estilo para cambiar el aspecto del enlace cuando el usuario pase el ratón por encima (pseudoclase hover). Para ello añadimos también la siguiente línea:

.menu a:hover { color: yellow; font-style: normal; }

Con la propiedad color: yellow hacemos que al pasar el ratón por encima de los enlaces, éstos cambien al color amarillo. La propiedad font-style: normal la ponemos para que no se vea el estilo de letra "italica" que hemos puesto para el resto de enlaces de la página, al pasar el ratón por encima. De esta manera recuperamos el estilo por defecto.

Modificar Textos

Modificaremos primero los títulos, y después los párrafos. Los títulos aparecen con su estilo por defecto, mientras que los párrafos tienen el mismo estilo que le hemos dado a los párrafos de las secciones anteriores.
Para modificar esto cambiaremos el estilo de estos elementos con CSS. Abrimos de nuevo el archivo inicio.css con el editor de textos, y al final escribimos la siguiente línea:

.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

Con esta línea cambiamos el estilo de los títulos de las columnas. Veamos los cambios que hemos hecho:

* font-size: 1.2em; : Cambiamos el tamaño de letra, y lo ponemos un poco más grande

* color: maroon; : Cambiamos el color del texto a marrón.

* padding-left: 3em; : Ponemos un margen interno a la izquierda del título.

* font-family: arial; : Cambiamos el tipo de letra (fuente) al tipo "arial"

Queremos modificar también el resto de textos que hay en el pie de página, los cuales están marcados como párrafos, por lo que incluiremos también la siguiente línea en el archivo CSS:

.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Los cambios que hemos hecho vienen marcados por las distintas propiedades que hemos añadido. Estas son:

* margin: 5px : Ponemos alrededor de cada párrafo un margen de 5 pixeles. Esto cambia el margen que tienen los párrafos en las secciones anteriores, de manera que en esta sección se verán distintos (mucho más pequeños)

.
* padding-left: 3em; : Al igual que hemos hecho con los títulos, ponemos aquí un margen interno a la izquierda.

* font-size: 0.8px; : Cambiamos el tamaño de letra a uno más pequeño.

* color: black; : Cambiamos el color del texto a negro, ya que antes estaba en azul.

Después de escribir estas líneas cerramos y guardamos el archivo inicio.css, y comprobamos el resultado. Para ello abrimos el archivo index.html con el navegador, el cual debe quedar como el del siguiente enlace:

#navegacion { background-color: purple; padding: 5px 0px; }

.menu { width: 25%; float: left; }

.menu a { margin: 0px 50px; color: white; }

.menu a:hover { color: yellow; font-style: normal; }

#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }

.col_pie { float: left; width: 33%; }

.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

En color azul destacamos el código que hemos escrito en esta página. El resto del código es el que teníamos de páginas anteriores.

Trabajaremos ahora dentro de la sección id="pie", que de momento está vacía. Pondremos el contenido en tres columnas, por lo que crearemos tres etiquetas div de clase dentro de esta sección. Para ello en el archivo index.html rellenamos la sección id="pie" que hemos creado de manera que quede como mostramos aquí:

Hemos puesto tres div=class="col_pie" que son los que delimitarán las columnas de la sección. Dentro de cada uno de ellos hemos puesto los datos que queremos mostrar.

Hemos añadido también un div class="vacio" al final de la sección, que, al igual que en las secciones anteriores, nos sirve para incluir los elementos flotantes en la sección.

Después de escribir el código anterior en el archivo inicio.css cerramos y guardamos el archivo y abrimos el index.html y copiamos el siguiente código y luego comprobamos los resultados. Para ello abrimos la página con el navegador, la cual debe quedar como la siguiente:

<div id="principal">

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

En color azul hemos destacado el código que hemos puesto en esta página. El resto de código ya lo teníamos anteriormente.

En el siguiente tema haremos una plantilla para que nos sea más fácil crear el resto de páginas de nuestra web. No hacemos por tanto directamente la segunda página, sino que hacemos una página, que aunque no la publicaremos, nos facilitará la creación del resto de páginas de nuestra web.

CLASE 10

ARCHIVO HTML

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Archivo HTML.doc)

Practica: leer y analizar el siguiente paso para terminar nuestra pagina web

Archivo HTML.doc

La plantilla que haremos para nuestra web consistirá en la cabecera, la barra de navegación, y el pie de página, que serán los mismos que hemos hecho en la página de inicio.

Abrimos por tanto la página index.html con el editor de textos, y la guardamos con otro nombre, para ello pulsamos en Archivo / Guardar como, y nos sale el cuadro para guardar el archivo. Le ponemos como nombre plantilla.html.

Una vez que tenemos guardado este archivo, lo abrimos con el editor de texto y modificamos algunas cosas. La línea de la cabecera en la que enlazamos con el archivo CSS la modificamos, de manera que ahora enlazaremos con otro archivo.

El archivo plantilla.html tiene que quedar así:

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<title>Edad de la prehistoria </title>

</head>

<body>

<div id="cabecera">

<h1>Edad de la prehistoria</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

Este nuevo archivo plantilla.html parte de una copia del archivo index.html. Este último hemos modificado el enlace al archivo CSS y hemos suprimido las secciones "texto" y "enlaces", sustituyéndolas por la sección "principal". Esto es todo lo que necesitamos para crear el archivo plantilla.html.

En el paso anterior hemos creado el archivo HTML para la plantilla de nuestra web. En esta página haremos el archivo CSS que se corresponde con esta plantilla.

Este archivo lo hemos llamado plantilla.html. En él tenemos una línea que enlaza con el archivo CSS. Esta linea es:

<link rel="stylesheet" type="text/css" href="general.css" />

El Archivo general.css

Nos referimos aquí al archivo general.css el cual crearemos Para ello abrimos el editor de texto y creamos un nuevo archivo en blanco, pulsamos en archivo / Nuevo... Una vez hemos abierto el nuevo archivo empezamos a escribir en él. Ponemos en principio un comentario con una descripción del archivo. Insertamos el siguiente código:

/*Estilo general y de secciones comunes para Mi Propia Web.*/
/*estilo inicial reset*/
* { margin: 0 auto; padding: 0; text-align: center; font-family: verdana, tahoma, arial; }
a { text-decoration: none; }
/*estilo para la cabecera*/
#cabecera { background-color: silver; padding: 20px 10px; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
#cabecera h1 { color: blue; font-size: 40px; font-family: arial;}
#cabecera h2 { color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
/*estilo para barra de navegación*/
#navegacion { background-color: purple; padding: 5px 0px; }
#navegacion .menu { width: 25%; float: left; }
#navegacion .menu a { margin: 0px 50px; color: white; font-weight: bold; font-size: 18px; }
#navegacion .menu a:hover { color: yellow; }
.vacio { clear: both; }
/*estilo para pie de página*/
#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }
#pie .col_pie { float: left; width: 33%; }
#pie .col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }
#pie .col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Le damos guardar, y Con esto completamos la plantilla para crear el resto de páginas de nuestra web.

El Archivo Listas.CSS

Cuando hemos creado el archivo listas.html hemos puesto en la cabecera (etiqueta head) una etiqueta de enlace al archivo listas.css

/*Estilo especifico para pagina listas.html*/

/*titulo principal y párrafos */

#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }

#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }

/*maquetar las listas*/

#principal .lista { width: 40%; float: left; margin: 10px 5%; background-color: #e6e6fa; }

/*título de las listas*/

#principal h3 { color: #4b0082; margin: 0.5em 2em; text-align: left; }

/*Elementos de las listas*/

#principal li { font-size: 0.9em; text-align: left; margin: 0.3em 4em; }

/*Estilo específico para cada lista*/

#paises li { list-style-type: square; }

#idiomas li { list-style-type: decimal; }

El Archivo Tablas.Html

El lenguaje HTML dispone de una serie de etiquetas para crear tablas. Una tabla es una serie ordenada de datos que se disponen en filas y columnas. Esto crea una serie de recuadros llamados "celdas" en donde ponemos cada uno de los datos.

Para crear las tablas HTML tenemos las siguientes etiquetas:

Es la etiqueta principal. Toda la tabla está englobada dentro de esta etiqueta. Las demás etiquetas que veremos a continuación van incluidas dentro de esta etiqueta.

<tr> ... </tr>

Dentro de la etiqueta table pondremos varias etiquetas <tr> </tr>. Cada una de estas etiquetas es una fila (horizontal) de la tabla. Pondremos por tanto tantas etiquetas tr como filas vaya a tener la tabla. Anidadas o incluidas dentro de las etiquetas tr, pondremos las etiquetas de celda. Estas pueden ser las siguientes:

<th> ... </th>

<td> ... </td>

Estas son las etiquetas de celda. Cada etiqueta crea una celda dentro de la fila. El contenido de la etiqueta de celda será el texto o elementos que queramos poner dentro de la celda.

La diferencia entre las etiquetas td y th es que las etiquetas td crean una celda de contenido normal, mientras que las etiquetas th crean una celda para la cabecera de la lista, la cual tiene por defecto un estilo distinto (texto en negrita y centrado). En la etiqueta th se suele indicar el tipo de elemento que ponemos en el resto de la fila o columna.

Cada etiqueta de fila (tr) debe incluir el mismo número de etiquetas de celda (td ó th), para que todas las filas tengan el mismo número de celdas. Si no es así la tabla no se verá bien. Si hace falta incluiremos etiquetas vacías (sin contenido) para completar el número.

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<link rel="stylesheet" type="text/css" href="tablas.css" />

<title>Tablas en Mi Propia Web</title>

</head>

<body>

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

<h2>PALEOLITICO-NEOLIDTICO</h2>

<p>Cuadro Comparativo .</p>

<br/>

<table>

<tr>

<th></th>

<th>PALEOLITICO</th>

<th>NEOLITICO</th>

</tr>

<tr>

<td>¿Que es?</td>

<td>Es la etapa mas larga de la prehistoria.tres periodo "piedra antigua" instrumentos en piedra tallada</td>

<td>¿Es un periodo de la prehistoria que significa "nueva piedra"instrumentos en piedra pulimentada </td>

</tr>

<tr>

<td>¿cuando y donde?</td>

<td>Hace 2,4 millones de años Africa</td>

<td>Entre al final del paleolitico y la edad de los metales(10000 a.C.-4000 a.C.) en la zona del proximo oriente, llamada creciente fertil</td>

</tr>

<tr>

<td>¿De que vivian?/Economia</td>

<td>Economia depredadora (cazadores, recolectores) </td>

<td>Economia productora (agricultores,ganaderos)</td>

</tr>

<tr>

<td>¿Como se organizan?</td>

, <td>Pequeños grupos tribus: Organizan las tareas entre hombres, mujeres, niños y ancianos </td>

<td>Grupos dominantes (acaparan el poder politico y religioso) y de grupos dominados (trabajadores)</td>

</tr>

<tr>

<td>Creencias</td>

<td>Pinturas rupuestres (arte parietal) venus (arte mobiliar)</td>

<td>Pinturas rupuestres (Figuras humanas, esquematicas, escenas de grupos, monocromas)</td>

</tr>

</table>

<p>Datos recogidos de Geografia e Historia. concretamente en la página

<a href="http://1esolabesana.blogspot.com/2017/10/paleolitico-neolitico_9.html">"http://1esolabesana.blogspot.com/2017/10/paleolitico-neolitico_9.html"</a>

de un blog.</p>

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

Una vez que hemos acabado de insertar el código anterior en la página, cerramos y guardamos el archivo. Ahora comprobamos cómo queda la página una vez que ya le hemos insertado todo el contenido. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar así:

EL ARCHIVO TABLAS.CSS

La primera línea, como de costumbre, es un comentario. Nosotros ponemos siempre un comentario delante del código CSS que cambia una parte de la página. Esto nos ayuda a entender mejor el código, y a localizar los elementos en caso de que queramos cambiarlos o revisarlos.

En la segunda línea ponemos tres propiedades CSS que afectarán a la tabla en sí misma.

§ La primera es la propiedad border. Afecta al borde de la tabla, y lo hace visible. Pondremos tres valores, el primero es el grosor del borde (4px). El segundo es el tipo de línea (double), aquí hemos optado por una doble línea. El tercero es el color de la línea del borde. En la propiedad border debemos poner siempre estos tres valores y en este orden.

§ La segunda propiedad indica el ancho que va a tener la tabla width: 70%. En este caso ocupará el 70% del ancho disponible o de pantalla.

§ La tercera propiedad es border-collapse: collapse. Las tablas por defecto, en cuanto les ponemos un borde, muestran sus celdas separadas. La propiedad border-collapse: collapse junta y unifica los bordes, tanto de las celdas entre sí, como de las celdas con el borde exterior de la tabla.

En la tercera línea cambiamos el aspecto de las celdas. Fíjate en la forma de seleccionarlas. El selector tiene dos partes separadas por una coma. En la primera seleccionamos las celdas de cabecera (table th), y en la segunda las celdas normales (table td). Las propiedades que ponemos dentro de las llaves afectan tanto a unas como a otras.

El primer cambio que hacemos en las celdas es poner un borde (propiedad border. Aquí el borde es más estrecho 1px, y como tipo de línea hemos puesto solid. Esto da una línea continua normal. Ponemos el mismo color de línea que para el borde de la tabla. La segunda propiedad padding: 0.5em crea un margen interno dentro de las celdas, para que el texto no se vea pegado a los bordes.

Copiamos el código y Con esto ya acabamos la página de tablas. Cerramos y guardamos el archivo tablas.css, y comprobamos el resultado. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar como el siguiente:

/*estilo específico para para página tablas.html*/
/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal sup { font-size: 0.5em; }
/*título de la lista*/
#principal h3 { color: navy; margin: 0.5em; font-size: 1.3em; }
/*tabla: aspectos generales*/
table { border: 4px double blue; width: 70%; border-collapse: collapse; }
table th, table td { border: 1px solid blue; padding: 0.5em; }
/*estilo de celdas*/
table th { color: purple; }
table td { text-align: left; padding-left: 2em; }

El Archivo Formulario.Html

Los formularios permiten recoger información sobre el usuario. Mediante un formulario el usuario responde a una serie de preguntas. Nosotros podemos recoger las respuestas que éstos dan. Las preguntas que ponemos en un formulario pueden ser abiertas, de manera que el usuario responde mediante un texto, o cerradas, es decir el usuario elige entre una serie de opciones que le damos.

El formulario tiene una estructura dentro de la página, es decir, para crear un formulario, este tiene sus propias etiquetas y atributos en el lenguaje HTML. Esto es lo que veremos a continuación.

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<link rel="stylesheet" type="text/css" href="formulario.css" />

<title>Formularios en Mi Propia Web</title>

</head>

<body>

<div id="cabecera">

<h1>Mi Propia Web</h1>

<h2>Aprendiendo a construir un sitio Web</h2>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

<h2>Formulario de prueba</h2>

<p>La forma principal de interactuar con el usuario, y que pueda mandarnos algunos

datos es mediante formularios. Un formulario es una serie de preguntas que se

hacen al usuario para que este responda.</p>

<p>El siguiente formulario es un formulario de prueba. Suponemos que hemos creado

un foro o un chat, y pedimos al usuario que rellene el formulario para

hacerse usuario del mismo.</p>

<h3>Formulario de ingreso</h3>

<form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post"

name="foro" id="foro">

<div class="seccion">

<h4>Datos personales</h4>

<p>Nombre: <input type="text" name="nombre" /></p>

<p>Contraseña: <input type="password" name="Contraseña" /></p>

<h4>Mi perfil</h4>

<p>Escribe cómo quieres presentarte ante los demás usuarios del foro</p>

<p><textarea name="descripcion">Mi perfil: </textarea>

<h4>Sexo</h4>

<p><input type="radio" name="sexo" value="hombre" /> Hombre</p>

<p><input type="radio" name="sexo" value="mujer" /> Mujer</p>

<p><input type="radio" name="sexo" value="indefinido" /> Sin definir</p>

</div>

<div class="seccion">

<h4>Aficiones</h4>

<p><input type="checkbox" name="Deportes" value="Si" /> Deportes</p>

<p><input type="checkbox" name="Cine" value="Si" /> Cine </p>

<p><input type="checkbox" name="Música" value="Si" /> Música </p>

<p><input type="checkbox" name="Noticias" value="Si" /> Noticias y Actualidad</p>

<h4>Edad</h4>

<p>Elige cual es tu franja de edad.</p>

<p><select name="edad">

<option value="menos de 20">Menos de 21 años</option>

<option value="de 21 a 30">Entre 21 y 30 años</option>

<option value="de 31 a 40">Entre 31 y 40 años</option>

<option value="de 41 a 60">Entre 41 y 60 años</option>

<option value="más de 61">Más de 61 años</option>

</select></p>

<h4>Borrar o enviar</h4>

<p><input type="reset" value="Borrar Todo" />

: Borra todo y reinicia el formulario.</p>

<p><input type="submit" value="Enviar" />

: Abre el programa de correo para enviar el formulario.</p>

</div>

<div class="vacio"></div>

</form>

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

El archivo formulario.css

En las páginas anteriores de este tema hemos creado un formulario. El formulario, aunque acabado, no está presentable, ya que aparecen todos los elementos en el estilo por defecto de la página. En esta página crearemos un archivo de estilo (CSS) para maquetar y dar forma a los elementos del formulario.

Para ello haremos un nuevo archivo CSS, llamado formulario.css, ya que en la cabecera del archivo formulario.html tenemos ya el enlace o link a este archivo CSS.

Tal como hemos hecho en las páginas anteriores de nuestra web, empezamos por crear un archivo de texto en blanco. Con el archivo en blanco abierto, que después guardaremos como el formulario.css, empezamos a escribir para poner el estilo de los elementos que están dentro del id="principal", pero fuera del formulario, es decir, el título principal, los párrafos, y el título del formulario. Escribimos por tanto lo siguiente:

/*estilo específico para formulario.html*/
/*titulo principal, título de formulario y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal h3 { color: #4b0082; margin: 0.5em 2em; }
/*Formulario: Aspectos generales:*/
#principal h4 { text-align: left; color: purple; font-size: 1.1em; margin: 0.5em 4em; }
.seccion { width: 40%; margin: 4%; border: 1px solid black; float: left; }
/*Formulario: elementos específicos*/
input { text-align: left; }
textarea { text-align: left; font-size: 0.8em; width: 90%; height: 5em }
select { width: 12em; text-align: left; }
option { text-align: left; }

Adaptado por

Osmeydy parra

Docente área de tecnología e informática

CLASE 1

PUBLISHER
Conducta de entrada

Objetivo: Reconocer a Publisher como una herramienta para el diseño de publicaciones.

Video:https://www.youtube.com/watch?v=fSSUyhU6UR4

Teoría: Toda persona quiere diseñar algo que otras personas puedan leer. La calidad de su trabajo puede influir mucho en sus ingresos, en lo profesional, e incluso en como las personas te puedan tratar.

Aunque existen muchos programas superiores a Publisher (Por ahora) como un Corel Draw, Adobe Illustrator, Adobe Indesign, muchas personas utilizan para sus publicaciones a Microsoft Word, y la gran mayoría está contento con ello.

La pregunta es ¿Por qué utilizar Publisher si Word hace todo lo que necesito? Pues así como la pregunta es sencilla, la respuesta es aún más sencilla; con Publisher 2007 tendrá el control total de los elementos insertados en la página, algo que Word no podrá hacerlo tan fácilmente.
Trabajar con un diseño de publicación

Para poder trabajar con algún programa que permita hacer diseños de publicación, debería utilizar diversos elementos en una misma publicación como muestra la siguiente imagen.

Texto: Un texto es toda letra o carácter que forma una palabra, frase, oración, o párrafos.

WordArt: Publisher incluye WordArt, que permite añadir algunas apariencias y efectos a su texto.

Imágenes: Las imágenes reflejan el buen estilo de una publicación, y puede insertar una gran cantidad de imágenes, ya que Publisher soporta distintos formatos, como JPG, TIF, PNG, BMP, etc.

Autoformas: Los objetos de autoformas pueden ayudarle a insertar algunas imágenes vectoriales, como líneas, círculos, cuadrados, o rectángulos.

Tabla: Siempre necesitará de las tablas, para ordenar sus textos.

Existen diferentes modos de ingresar a un programa, generalmente muchos usuarios ingresan desde el menú Inicio de Windows.

Ingresar desde el cuadro de diálogo Ejecutar

También puede utilizar el cuadro de diálogo Ejecutar para acceder mediante el ejecutable de Publisher.

1. Active el cuadro de diálogo Ejecutar.

2. Escribe: MSPUB. Pulse clic en Aceptar

Ingresar desde Windows Vista Si está utilizando Windows Vista, puede utilizar el Iniciador de búsquedas del menú Inicio, lo único que debe hacer es activar el menú Inicio y luego en el cuadro Iniciar Búsqueda escribe: mspub

Nota: También puede escribir Publisher y podrá ver una serie de iconos basados en la palabra escrita.

La ventana Introducción Muchos de los programas de Office presentan una ventana de Introducción donde podrá crear o elegir una serie de opciones, plantillas etc. Cuando inicia Publisher, aparece la ventana Introducción de, en esta ventana podrá elegir una serie de plantillas de publicación.

Tipos de Publicación

Microsoft Office Publisher presenta diferentes tipos de publicación, estos se pueden apreciar, al abrir la ventana de Introducción al iniciar Publisher.

Tamaño de páginas en blanco: Utilice esta categoría, cuando necesite crear una publicación desde cero, eligiendo el tipo de papel que va a utilizar, como A4, A3, A5, Oficio, etc.

Anuncios: Utilice estas plantillas, si necesita crear algún anuncio para su negocio, como vender algo o promocionar algo.

Boletines: Si usted está armando su periódico mural, o es el director del diario de la escuela, estas plantillas, de seguro lo ayudarán mucho.

Calendarios: Si no ha recibido ningún calendario por parte de sus vecinas que venden en el mercado, mejor prepare usted mismo uno, ya que Publisher presenta 49 plantillas de calendarios.

Catálogos: Seguramente usted es un vendedor exitoso de algunos productos que usted ha creado, o simplemente desea tener alguna forma de mostrar a sus clientes lo nuevo que usted tiene. Un catálogo es lo ideal, y Publisher presenta muchas variedades de plantillas de catálogos, solo basta con que usted inserte las imágenes y los precios.

Correo electrónico: Seguramente no sabía cómo diseñar un mensaje de correo electrónico que sea atractivo ante sus compañeros de trabajo. No se preocupe, Publisher hará las cosas por usted con las diferentes plantillas de correo electrónico que posee.

Currículos: Publisher trae algunas plantillas para presentar sus currículos que es su carta de presentación. Aunque para ser sincero, en esta ocasión, Publisher no fue muy creativo.

Diplomas: Elige entre 22 plantillas diferentes, incluso, si desea dar un diploma por algún mérito, estas plantillas le ahorrarán mucho trabajo.

Etiquetas: Publisher presenta una gran variedad de plantillas para crear Etiquetas.

Folletos: Encontrará una gran variedad de plantillas, puede utilizarlos como trípticos.

Formularios Comerciales: Si usted se rompe la cabeza creando sus formularios en Excel o InfoPath. Publisher te brinda una alternativa menos problemática con sus plantillas de formularios comerciales.

Importar documentos de Word: Utilice estas plantillas, si desea importar algún documento de Word y convertirlo a alguna publicación, como por ejemplo un folleto.

Letreros: Lo que muchos esperaban, estas plantillas le ayudaran a evitarse el trabajo de crear su propio letrero, por ejemplo “Prohibido fumar en lugares públicos como este”, “Baños”, “Peligro”, etc.

Membretes: Los membretes es una Inscripción que se pone en los sobres y papel de escribir con el nombre y datos de una empresa, o persona. Publisher posee una gran variedad de plantillas de membrete y guarda automáticamente el estilo que hayas utilizado para aplicarlo a otras posibles publicaciones de membrete.

Menús: Si usted es dueño de un restaurante, puede tener un gran alivio al saber que existen plantillas diseñadas para presentar sus mejores platos a la carta.

Pancartas: Puede elegir entre diferentes categorías, como por ejemplo, Informativos, Eventos, Romances, etc.

Postales: Justo lo que muchos buscan, postales, para enviárselo a un amigo, o a los familiares que están lejos.

Programas: Ahora puede utilizar 3 plantillas de Publisher para crear sus programas de Música, teatro baile, etc.

Prospectos: Publisher se ha esmerado en colocar diversas plantillas para sus prospectos.

Proyectos para doblar hojas: Así es, para todos los que les gusta armar figuras con papeles, para los que les encanta el origami, Publisher se acordó de ellos.

Publicaciones rápidas: Utilice estas plantillas, cuando desea crear publicaciones de una sola página con un acabado profesional.

Sitios Web: Utilice entre 70 plantillas, para poder crear sus Sitios web de manera rápida y sencilla.

Sobres: Utilice gran variedad de plantillas para sus sobres.

Tarjetas de felicitación: Ya no hay una excusa para no mandar una tarjeta de felicitación a una persona que se lo merece. Publisher te ayuda a que no busques en las tiendas algunos modelos, solo utiliza sus plantillas.

Tarjetas de Invitación: Ahora no puede decir que no tiene tiempo para comprar sus tarjetas de invitación para alguna reunión. Publisher le ayudará a elegir la plantilla adecuada.

Tarjetas de Presentación: Nosotros los profesionales de TI, los técnicos, o profesionales de diferentes aéreas, debemos ofrecer nuestros servicios, y que mejor que una tarjeta de presentación.

Tarjetas de saludo: Utilice las diversas plantillas de tarjetas de saludos, y que sus mejores amigos no se queden sin ninguna de ellas.

Vales de regalo: Seguramente va a realizar una campaña, y que mejor que los vales de regalo para sus mejores compradoras.

Utilizar una plantilla

Al utilizar cada una de estas plantillas, usted no se limita a una de ellas, por lo que puede cambiar el tipo de letra, cambiar de imagen, una franja, cinta, autoforma, etc. Todo lo puede hacer, desde el panel

Tareas de Publisher.

Ya ha podido observar cada categoría que poseen las plantillas de Microsoft Publisher, ahora aprenderá a elegir una de ellas y crearla como publicación.

1º Ingrese a Microsoft Publisher.

2º En el panel de Categorías de Plantillas, pulse clic en una categoría, por ejemplo Catálogos.

3º Pulse clic en una plantilla que le agrade, por ejemplo pulse clic en la plantilla Brocado. Observe como aparece al lado derecho, en el panel de Presentación de plantillas, una muestra de tamaño regular, de su plantilla elegida

4º Pulse clic en el botón Crear. Espere unos segundos y puede revisar su plantilla.

La ventana de trabajo de Publisher Anteriormente se explicó sobre la ventana Introducción de Publisher, ahora, al crear una publicación o utilizar una plantilla, Publisher muestra la ventana de trabajo, ahora conoceremos sus partes

Clasificador de páginas: Muestra las diferentes páginas que se han creado dentro de la publicación.

Área de trabajo: Es aquí donde se encuentra su página de diseño. El área de trabajo también posee el Área de borrador, que es el área de color plomo, es aquí, donde puede insertar algunos objetos y después colocarlos en la publicación.

Práctica: Consignar en el cuaderno las características de Publisher y en Paint, copiar la imagen de la ventana de trabajo de Publisher y explicar cada parte sobre la imagen.

Guardar la imagen con el nombre, “VENTANA DE TRABAJO PUBLISHER”, en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar las imágenes al correo asignado por el profesor.

CLASE 2

APRENDIENDO LO FUNDAMENTAL DE PUBLISHER

Conducta de entrada

Video: https://www.youtube.com/watch?v=UionyOgeLd8

Teoría:

Como Publisher pertenece a Microsoft Office seguramente ya debe saber lo fundamental para comenzar a trabajar con este programa de publicaciones. Quizá ya sepa Guardar en Word, o imprimir con PowerPoint, pero tenga en cuenta que Publisher es muy idéntico a las versiones del 2003, es decir con sus Barras de Herramientas, Menús, etc. Así que de alguna u otra manera, en esta clase nos dedicaremos un poco a las herramientas fundamentales de Publisher.

Importando un documento de Word

Como se explicó anteriormente, Publisher tiene un control total de los elementos en la publicación, aunque Word es muy bueno para escribir documentos, no es lo suficientemente rápido para crear una buena publicación, así que ahora aprenderemos a importar un documento desde Word.

1° Abrimos Publisher.

2° Al lado izquierdo de la ventana Introducción, en el panel Tipos de publicación, pulse clic en Importar documentos de Word.

3° En el panel de las miniaturas de plantillas, debajo de Diseño clásico, pulse clic en Estudio

4° En el panel de Propiedades de la plantilla seleccionada (Lado derecho), debajo de la categoría Opciones, pulse clic en la casilla de verificación Incluir página de título. Observe como ha cambiado las miniaturas de plantillas en el panel del medio.

5° Debajo de la casilla activada, en el cuadro Columnas, seleccione 1.

6° Pulse clic en el botón Crear que se encuentra al final de la categoría Opciones.

7° Al pulsar clic en el botón Crear, aparece el cuadro de diálogo Importar documento de Word, en este lugar debemos seleccionar un documento de Word por ejemplo Guía práctica de Windows Vista4.docx.

8° Pulse clic en Aceptar.

9° Ahora esperemos un poco hasta que Publisher termine de convertir el documento de Word a un archivo de publicación.

10° Al terminar de convertir el documento podrá observar la primera página de la publicación. Está página en realidad no existía en el documento de Word, pero recuerden que activaron la casilla Incluir página de título.

11° En el clasificador de páginas, pulse clic en la página 2. Observe que se selecciona las páginas 2 y 3. Esto sucede porque en la categoría Opciones dejamos el valor por defecto Vertical a dos caras en Tamaño de página.

Nota: No cierre esta publicación.
Guardar una publicación

Cuando estamos trabajando, así estemos demasiado agotados de trabajar en una publicación, lo más probable es que nos sentemos a tomar un café, o a descansar un poco en el sofá; pero sería tonto de nuestra parte dejar las cosas como están, es decir, sin guardar. ¿Qué sucedería con nuestra publicación si se va la electricidad? Pues claro, perderíamos todo nuestro trabajo hecho hasta el momento.

Para no llorar o estar enojados todo el día, lo recomendable es guardar el documento para que puedas tener la oportunidad de continuar con la publicación de tu proyecto.

1° En la publicación que utilizamos en el tema anterior, pulse clic en el menú Archivo y luego clic en el botón Guardar.

Observe que aparece el cuadro de diálogo Guardar como. Este cuadro de diálogo aparece cuando se va a guardar por primera vez un archivo, o cuando desea guardarlo en otro lugar (otra unidad, carpeta, etc.).

2° Pulse la tecla Esc (Escape). Observe que el cuadro de diálogo Guardar como desaparece. Pero recuerde que aún no hemos guardado nada.

3° En la Barra de herramientas Estándar, pulse clic en el botón Guardar. Observe que nuevamente aparece el cuadro de diálogo Guardar como.

4° En el cuadro de diálogo Guardar como debemos seleccionar un directorio donde se guardará nuestro archivo, el más común es elegir Documentos (En Windows XP es llamado Mis documentos) o también
puedes elegir El escritorio, o en nuestro caso la carpeta creada para éste período.

En la siguiente imagen se puede apreciar que se ha elegido un directorio personalizado llamado Archivos para Publisher.

5° En el cuadro Nombre de archivo escribe: Guía de Windows Vista.

6° Debajo, en el cuadro Tipo, verifique que este seleccionado Archivos de Publisher (*.pub). Es decir, cuando guarda una publicación, esta tendrá una extensión PUB, aunque la extensión no haya cambiado de versiones anteriores, lo que ha cambiado son las funciones. 7° Clic en Guardar. Ahora si puedes estar tranquilo porque su publicación ya ha sido guardada

Nota: También puedes utilizar Ctrl + G para guardar su publicación.

· Guardar en otro directorio

Cuando se guarda por primera vez una publicación, eliges la ruta donde este se almacenará, esto indica que si vuelves a pulsar clic en el botón Guardar, el cuadro de diálogo Guardar como no volverá a aparecer, por una sencilla razón, Publisher ya sabe dónde guardar su publicación.

En ocasiones querremos tener una copia de seguridad de nuestra publicación, pero sería peligroso guardarlo en la misma carpeta en donde se encuentra nuestra publicación original, es por ello que deberá crear otra carpeta y guardarla en ese lugar.

Para poder realizar esta acción, ya no debemos utilizar el botón Guardar (o Ctrl + G), sino utilizar el comando Guardar como que se encuentra en la lista del menú Archivo.

Cuando elige este comando, el cuadro de diálogo Guardar como volverá a aparecer y podrá elegir otro directorio donde almacenarlo o quizá quiera guardarlo con otro nombre, púes esta acción también lo puede hacer desde este cuadro.

Publicar como PDF

Seguramente no le gustaría que todo su esfuerzo, sea pirateado por otras personas, por ello, una buena forma de proteger su publicación de los posibles cambios que se le puedan hacer, es guardarlo como PDF.

Para poder ver su publicación necesita de un programa que pueda leer archivos PDF, como lo es Adobe Reader que lo puedes descargar gratuitamente desde la página de Adobe: www.adobe.com.

1º Pulse clic en el menú Archivo.

2º Luego pulse clic en la opción Publicar como PDF. Nota: Para que esta opción aparezca en el menú, debe descargar el complemento "SaveasPDF" ("guardar como PDF") desde el sitio web de Microsoft Office Online: www.micorsoft.com

3° En el cuadro de diálogo Publicar como PDF, active la casilla de verificación Abrir archivo tras publicación.

4° Ahora pulse clic en el botón Cambiar.

5° En el cuadro de diálogo Opciones de publicación, seleccione Impresión de alta calidad y luego clic en Aceptar.

En este cuadro podrás elegir diferentes optimizaciones de una publicación, por ejemplo, si desea compartir su publicación en PDF con algún compañero vía correo electrónico, puedes elegir la opción Tamaño mínimo.

6° Ahora pulse en el botón Publicar. Espere unos instantes hasta que aparezca su publicación, pero recuerde que debe tener un programa lector de PDF.

7° Cierre su publicación en PDF.

Cerrar y Salir de una publicación

Aunque muchos usuarios creen que Cerrar y Salir son idénticos, en realidad existe una notable diferencia. Cuando necesita cerrar solamente una publicación sin salir del programa debe utilizar el comando Cerrar que se encuentra en el menú Archivo.

Cuando desea salir por completo del programa, esto incluye cerrar sus aplicaciones y cerrar Publisher, debe utilizar el comando Salir o utilizar la X de la Barra de título.

Guardar como Plantilla

Las plantillas son bases para poder crear una publicación, y en Publisher casi todo es en base a plantillas, muy pocos usuarios se animaran a crear algo nuevo. Pero si de casualidad se le ocurrió una buena idea y necesita tenerlo como plantilla para sus próximas publicaciones, puede hacerlo de manera muy sencilla:

1° Pulse clic en el menú Archivo y luego clic en Guardar como.

2° Pulse clic en la flecha del cuadro Tipo y seleccione Plantilla de Publisher. Observe que al pulsar clic sobre Plantilla de Publisher, automáticamente Publisher abre la ruta de las Plantillas

3° Pulse clic en el botón Cambiar. 4° En el cuadro de diálogo Categoría de plantilla, escribimos: Aulaclic y luego clic en Aceptar

5° Ahora pulse clic en Guardar.

Cuando quiera iniciar una nueva publicación basándose en su plantilla personalizada, en la ventana Introducción pulse clic en Mis plantillas y en el panel del medio podrá ver su plantilla creada con su respectiva categoría.

Abrir una publicación.

Podemos abrir una publicación desde Publisher mediante el cuadro de diálogo Abrir Publicación.

Nota: Para este ejercicio procure cerrar su publicación anterior.

1° En la ventana Introducción, en el panel Publicaciones recientes, pulse clic en el vínculo Desde archivo.

2° En el cuadro de diálogo Abrir publicación, busque su carpeta donde tenga un archivo de Publisher.

3° Pulse clic sobre la publicación que desea abrir, en este caso elegimos Plantilla de catálogo y luego clic en Abrir.

4° Pulse clic en el menú Archivo y luego clic en Cerrar. Puede ver que nuevamente aparece la ventana Introducción.

5° En el panel Publicaciones recientes, pulse clic en Plantilla de catálogo. Nuevamente se abre su publicación

2° Pulse clic en el menú Ver y luego clic en la opción Ver dos páginas. Note que ahora simplemente se muestra la página número 4

3° En la Barra de herramientas estándar pulse clic en la flecha del cuadro desplegable Zoom.

4° En la lista de opciones, pulse clic en Ancho de página. Observe como se muestra su página de publicación, ahora cubre toda la pantalla de Publisher.

11° Pulse Ctrl + Mayús + L para regresar a la vista Toda la página.

12° Pulse clic en el menú Ver y luego clic en Imágenes

13° En el cuadro de diálogo Presentación de imágenes, pulse clic en la opción Ocultar imágenes y luego clic en Aceptar

Observe ahora que no se muestra ninguna imagen en su publicación.

14° Vuelva a hacer clic en Ver, Imágenes, y luego clic en Presentación detallada, luego clic en Aceptar.

15° Cierre su publicación sin guardar los cambios.

Crear información personal y de la empresa

Muchas publicaciones llevan siempre el nombre de una persona, el nombre de la empresa, la dirección, el teléfono, etc. Toda esta información que podría ir muy bien en una Tarjeta de presentación se le llama Información personal y empresarial, y puede ahorrarle muchas horas de trabajo.

1° En la ventana de Introducción, en Tipos de publicaciones, pulse clic en Tarjetas de presentación.

2° En Diseños más recientes, pulse clic en PhotoScope.

3° En el panel derecho en Personalizar, pulse clic en la flecha desplegable y clic en Crear nuevo.

4° En el cuadro de diálogo Crear nuevo conjunto de información empresarial, en el cuadro Nombre escribe el tuyo por ejemplo.

5° También rellene los campos Puesto o cargo, Nombre de la organización, Dirección, Teléfono, Consigna o eslogan. Vea la siguiente imagen.

6° En Logotipo, pulse clic en Cambiar.

7° En el cuadro de diálogo Insertar imagen, busque la imagen logotipo de su empresa y luego clic en Insertar.

8° En el cuadro Nombre del conjunto de información empresarial, escribe el nombre con el que deseas reconocer a esta información, en este caso: Aulaclic.

9° Clic en Guardar.

10° Ahora en la ventana Introducción, pulse clic en Crear.

11° Pulse clic en el menú Edición y luego clic en Información empresarial. Aparece el cuadro de diálogo Información empresarial con los datos que has definido anteriormente.

12° Pulse clic en el botón Nuevo y rellene los campos con nueva información al igual que los pasos anteriores.

13° Al rellenar nuevos datos y darle otro nombre, puedes elegir entre la nueva información empresarial u otras.

14° Clic en Actualizar publicación y note el cambio.

15° Cierre su publicación sin guardar los cambios.

Práctica: Crear un documento con Word con información de un tema libre, con mínimo 8 páginas de contenido, en dónde tenga varias imágenes ubicadas en diferentes páginas.

En Publisher, importar éste documento de Word y guardarlo en formato .PUB, luego realizar el ejercicio de guardado en .PDF, pero cambiándole el nombre al documento agregándole la palabra “SeguroPDF” al final del nombre de su archivo.

Cerrar los archivos, y luego abrir el archivo .PUB y guardarlo como Plantilla.

Crear una tarjeta personal con sus datos, y los datos de su empresa (Van a inventar la creación de una empresa). Guarden la publicación con sus nombres.

Guardar los archivos en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar los archivos al correo asignado por el profesor.

CLASE 3

CREANDO CALENDARIOS

Conducta de entrada

Objetivo: Crear diferentes tipos de calendarios utilizando Publisher.

Video:https://www.youtube.com/watch?v=M61XfmcbzL0

Teoría:

Aunque hoy en día existen diversas tecnologías que están disponibles para realizar algún seguimiento de citas y horarios por vía electrónica, muchas personas aún prefieren utilizar los calendarios impresos para mantenerse organizados y en fecha.

Los calendarios pueden ser un gran artículo promocional, imagínese que alguien tenga algún calendario publicado en su negocio, el nombre de su empresa aparecería todos los días durante todo el año, ya sea en la oficina del jefe, en la pared de la oficina, en la tienda de refrigerio, etc.

Creando un calendario mensual

Ahora aprenderemos a crear un calendario mensual.

1º Abrir Microsoft Publisher.

2º En el Panel de categorías, pulse clic en la opción Calendarios.

3º En el área de categoría de plantillas, baje hasta encontrar la plantilla Universitario.

4º En el panel Características de publicación, pulsamos clic en el botón Crear, para que se cree la publicación con los parámetros por defecto que llegan con la plantilla de calendario.

Ahora aparece la primera página con el mes actual.

5º Ahora aprendió como crear un calendario del mes actual, ahora crearemos un calendario por meses en diferentes hojas. Pulse clic en el menú Archivo y luego clic en Cerrar y si le indican que tiene que guardar su publicación, pulse clic en No.

6º Nuevamente active la categoría Calendarios y luego clic en la plantilla Universitario.

7º En panel de características de la publicación, en la sección Opciones, pulse clic en el botón Definir fechas del calendario.

Aparece el cuadro de diálogo Definir fechas del calendario.

8º En el cuadro Fecha de comienzo, muestra el mes actual, clic en la flecha del mes actual y clic en Enero.

9º En fecha de finalización, elige Diciembre, que es el último mes de nuestro año.

10º En ambos lados debemos agregar el año 2010. 11º Luego clic en Aceptar

12º Ahora queremos ver nuestro calendario en Vertical, así que en el panel de características de publicación, en la sección Opciones, en el cuadro Tamaño de página, pulse clic en la flecha y elige Vertical

13º Ahora pulse clic en Crear. Ahora se debe mostrar de la siguiente manera.

14º En la parte de abajo del área de diseño de publicación, se encuentran los Clasificadores de páginas, enumeradas hasta 12.

15º Pulse clic en la página 7 y podrá ver el mes de Julio.

16º Quizá no le agrade el color que posee su calendario. En la ventana de publicación, se ha activado el panel de tareas Formato de publicación. Pulse clic en el apartado Combinaciones de colores.

17º Pulse clic en la combinación de color que le agrade.

Nota: Puede observar que cada vez que pulsa clic sobre alguna combinación de color, este se aplica automáticamente al calendario.

18º Si lo desea puede crear nuevas combinaciones de colores para sus publicaciones, esto equivale a la creación de temas en Word, Excel o PowerPoint. Para ello, en el panel de Tareas Formato de publicación, en la sección Combinación de colores, pulse clic en la opción Crear nueva combinación de colores.

19º En el cuadro de diálogo Crear nueva combinación de colores, aplique los diferentes colores para sus publicaciones, por ejemplo, el color de fondo del calendario es Enfasis1

20º Después de todo lo aplicado, pulse clic en el botón Guardar.

Crear un calendario Anual

Ahora aprenderemos a crear un calendario anual, es decir, donde en una sola página, se puedan encontrar todos los meses.

1º Abrir Publisher.

2º Active la categoría Calendarios y luego clic en la plantilla de calendario Viaje.

3º Verifique que la orientación sea Horizontal.

4º En el panel Características de publicación, en la sección Opciones, en el cuadro Periodo de tiempo, pulse clic en la opción Un año en cada página.

5º Pulse clic en Crear. Ahora se debe mostrar su calendario anual, como la siguiente imagen.

6º Pulse clic derecho en la primera imagen, luego señale la opción Cambiar imagen y luego clic en la opción Desde archivo

7º En el cuadro de diálogo Insertar Imagen, busque la imagen que le agrade para que la cambie por la original. Luego clic en Insertar.

8º Guarde su publicación con el nombre Calendario anual.pub.

Práctica:

Crear dos calendarios, uno con las páginas por meses y el otro anual. A cada uno aplicar características diferentes para ver presentaciones personalizadas diferentes. Trabajar el año 2020, con fotos o imágenes de eventos, actividades, situaciones o vivencias que les ocurrió cada mes del año, esto para el calendario por páginas.

Guardar los archivos en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar los archivos al correo asignado por el profesor.

CLASE 4

DISEÑOS DE DIPLOMAS Y TARJETAS DE INVITACIÓN

Conducta de entrada

Video:https://www.youtube.com/watch?v=b8MkrsAOe1A

https://www.youtube.com/watch?v=c2NSglGQx00

Teoría:

Muchos de los estudiantes necesitan un premio por ser mejores, uno de los más resaltantes y perseverantes. En todo centro educativo, o de formación, siempre se entregan diplomas, o certificados, o algún papel donde diga que lo que tienes en manos, es gracias a tu esfuerzo.

Utilizando un diploma deportivo

Los deportes nos mantienen sanos, aunque hace más de 4 años que no hago ningún deporte, pero para los alumnos que sobresalen en el ámbito deportivo, podemos agradecerle creando un diploma con las plantillas de Publisher 2007.

1º Abrir Publisher.

2º Pulse clic en la categoría Diplomas. 3º En el área de la galería de plantillas, busque la plantilla Mejor deportista, y pulse clic sobre el

4º En el panel de características de publicación, pulse clic en el botón Crear.

5º Pulse clic en el cuadro de texto Nombre de la persona premiada y luego escribe: Aamir Valentín García.

6º Pulse clic en el cuadro de texto Por su rendimiento…y escribe: Por su gran participación en los juegos olímpicos de Beijins 2008. Se debe mostrar como la siguiente imagen.

7º Guardar con el nombre El deportista.pub.

8º Cierre Publisher.

Tarjetas de Invitación

Cuando se acerca el 31 de Octubre muchas personas (generalmente niños) esperan la noche de brujas, generalmente para ir de puerta en puerta buscando dulces. Algunos adultos también ven a la Noche de brujas como un día para divertirse y que mejor diversión que hacer una fiesta de la Noche de brujas. De seguro que ya están pensando en hacer las tarjetas de invitación, y que mejor que Publisher para ayudarlo.

1° Abrir Publisher.

2° Ahora pulse clic en Tarjetas de Invitación.

3° En el área de las miniaturas de las plantillas, en la sección Fiesta por festividad, clic en Halloween 1.

4° En el panel de las Propiedades de la plantilla, en la sección Opciones, pulsa clic en Diseño y luego clic en Foco.

Observe como cambia la plantilla en miniatura.

5° Pulse clic en el botón Crear. Ahora su publicación está lista para ser personalizada.

6° En el clasificador de páginas, pulse clic en la página 2. Observe que la página 2 y 3 se están mostrando con un texto predefinido el cual puede ser personalizado.

7° En el panel Formato de publicación, en la sección Opciones de invitación, pulse clic en el botón Cambiar plantilla.

8° En el panel de las propiedades de la plantilla, en la sección Opciones, pulse clic en Diseño y luego elige Órbitas retrógradas.

Observe como cambian las plantillas.

9° Pulse clic en Aceptar.

10° Pulse clic en la página 1 y note el cambio.

11° Guarde su publicación.

Práctica:

- Crear un diploma de Mención especial por sus esfuerzos en época de pandemia, guardar con su nombre.

- Diseñar una tarjeta de invitación para su cumpleaños.

Guardar los archivos en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar los archivos al correo asignado por el profesor.

CLASE 5

CREACIÓN DE SITIOS WEB

Conducta de entrada

Video: https://www.youtube.com/watch?v=KJk9UpqBqQQ

Teoría:

Todas las organizaciones deben tener una página web, ya que es una manera de publicidad y así sus clientes los conocen mucho mejor y no tiene una organización, puede generar ingresos adicionales con una página web.

Publisher presenta diversas plantillas de páginas Web para poder ser personalizadas. Aunque Publisher no es un programa especializado para la creación de páginas web profesionales como lo es Expression Web o SharePoint Designer, puede comenzar con este y aprender lo básico.

1° Abrir Publisher.

2° Pulse clic en la categoría Sitios Web.

3° En el área de categorías de plantillas, en la sección Diseños clásicos y clic en Verano.

4° Pulse clic en Crear. Aparece el cuadro de diálogo Generador fácil de sitios web.

5° En el cuadro Generador fácil de sitios web, active todas las casillas de verificación.

6° Luego clic en Aceptar. Ahora esperemos que se creen las páginas del sitio web.

7° Como puede ver, la plantilla de página web muestra una serie de páginas predefinidas listas para ser personalizadas. Cambie el texto Página Web por Bienvenidos a CompuEduca.

8° Pulse clic en la página 15 del clasificador de páginas y luego clic en Insertar página.

9° En el cuadro de diálogo Insertar página Web, en la columna Seleccione un tipo de página, pulse clic en Evento.

10° Verifique que la casilla Agregar hipervínculo a las Barras de exploración se encuentre activo.

11° Pulse clic en Aceptar.

Observe como se crear su nueva página, y en el panel que está al lado derecho de la página web (Barra de exploración de página web) se encuentra el vínculo a Eventos.

12° Seleccione la Barra de exploración y clic en la barita mágica.

13° En el cuadro de diálogo Propiedades de la barra de exploración, en el cuadro Nombre escribe: Mis vínculos. De esta manera se está dando un nombre personalizado a la Barra de exploración.

14° En la columna Vínculos, seleccione Página principal y luego clic en el botón Modificar vinculo.

15° En el cuadro Modificar vinculo: Mis vínculos, cambie el cuadro Texto a: Inicio

16° Clic en Aceptar en todos los cuadros de diálogos abiertos. No te como ha cambiado el nombre de la Barra de exploración. Donde antes decía Página principal, ahora dice Inicio.

17° En la barra Herramientas web, pulse clic en el botón Vista previa de la página web.

18° Revise su página Web y pruebe cada vínculo.

Práctica:

Crear una página web que ilustre las características de una empresa creada por ustedes, dónde se muestre:

- Los datos de la empresa

- Su misión, visión y objetivos.

- Información de contacto

- Lista de productos y características de cada uno.

- Lista de empleados con sus respectivos cargos

- Calendario con las fechas especiales de su empresa (aniversario, ofertas).

- Vínculos externos de interés.

Guardar la página en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar los archivos al correo asignado por el profesor.

CLASE 6

TRABAJANDO CON PÁGINAS EN BLANCO

Conducta de entrada

Teoría:

Publicación en blanco

Publisher presenta miles de plantillas predefinidas listas para ser personalizadas; pero que sucede si entre todas esas plantillas, no hay alguna que cumpla tus expectativas, entonces lo mejor será crear una publicación desde cero, y después puedes guardarlo como una plantilla.

1° Abrir Publisher.

2° En Tipos de publicación, pulsa clic en la categoría Tamaños de página en blanco.

3° En la sección Estándar, pulsa doble clic en A4 (Horizontal).

4° En el panel Formato de publicación, en Cambiar tamaño de página.

5° En la ventana Configurar página, seleccione A4 (vertical) y luego clic en Aceptar.

6° Pulse clic derecho en la página 1 del clasificador de páginas y luego clic en Insertar página.

7° En el cuadro de diálogo Insertar página, en el cuadro Núm. De páginas nuevas, escribe 3 y luego clic en Aceptar. Observe que se crean 3 páginas más, es decir, ahora posee 4 páginas.

8° Pulse clic en la página 3 y escribe lo siguiente: Bienvenidos a Microsoft Publisher. Observe que aparece el texto en la parte superior de la página.

9° Pulse clic derecho en la página 3 y clic en Mover página.

10° En el cuadro de diálogo Mover página, seleccione Después de y luego clic en Página 4. Clic en Aceptar. Ahora su página que estaba en 3 se encuentra al final como 4.

11° Pulse clic derecho en la página 4 y luego clic en insertar página duplicada. Observe que la página 4 y 5 se repiten, pues son duplicados.

12° Pulse clic derecho en la página 4 y luego clic en Cambiar nombre.

13° En el cuadro Cambiar nombre de página, escribe: Texto nuevo y clic en Aceptar. Cuando se agrega un nombre de página, es más sencillo para ti cambiarlos de posición, pues al menos vas a saber al lado de que página vas a mover alguna.

14° Pulse clic derecho en la página 5 y luego clic en Eliminar página.

15° En el mensaje que aparece, pulse clic en Sí. Nota: No cierre esta publicación.

Trabajar con cuadros de texto.

El trabajo con cuadros de texto hace que nuestros elementos tengan la posición en la que realmente deseemos que estén, algo muy difícil que se haga en Word.

1° Pulse clic en la página 1.

2° En la Barra de herramientas Objetos que se encuentra al lado izquierdo de la ventana de Publisher, pulse clic en Cuadro de texto.

3° Al igual que en Word, inserte el cuadro de texto a lo largo de los márgenes de la página.

4° En el cuadro de texto escribe: Guías de Laboratorio.

5° Seleccione el texto y aplique fuente: Calibri y tamaño 48

6° Desde el punto de giro (verde) mueva el cuadro de texto hasta quedar como la siguiente imagen.

7° Pulse clic en la página 3.

8° Inserte un cuadro de texto del tamaño que quiera.

9° En la barra de estado de Publisher (al lado del clasificador de páginas), pulse doble clic. Aparece la Barra de herramientas Medidas.

10° Cambie a las siguientes medias.

Observe como el cuadro de texto va tomando forma y posición en la página.

11° Pulse clic en el menú Insertar y luego clic en Archivo de texto.

12° En el cuadro de diálogo elige un archivo de texto que tengas, por ejemplo, se está utilizando un archivo llamado IntroPublisher.docx. Clic en Aceptar.

13° En el mensaje que aparece, pulse clic en No. Si elegimos Sí, vamos a ajustar el texto para que pueda quedar todo en el cuadro de texto, o buscara algún otro cuadro de texto en blanco para continuar con lo que resta del texto.

14° Observe que el cuadro de texto posee una etiqueta al final llamado Texto en área de desbordamiento. Esta etiqueta indica que existe texto que no se está mostrando porque el cuadro de diálogo es muy pequeño

15° Inserte otro cuadro de texto y aplique las siguientes medidas.

16° Pulse clic en el cuadro de texto 1 (el que posee el texto) y en la Barra de herramientas Cuadros de texto, pulse clic en Crear vínculo con cuadro de texto.

Observe que el puntero cambia por una taza o jarrita.

17° Situé la jarrita en el medio del segundo cuadro de texto (cuadro en blanco) observe como la jarrita cambia, y pulse clic en el medio del cuadro de texto. Observe como el texto que no se mostraba en el primer cuadro ahora parte de él se muestra en el segundo.

Nota: Continuaremos trabajando con esta publicación.

Insertar imagen desde archivo

Una publicación tiene mejor aspecto cuando se insertan imágenes, mejor aún si sabe dónde colocarlas. Publisher te da la opción de insertar diversos tipos de imágenes en una publicación y lo mejor, es que tienes el control total de ellas para posicionarlas en donde desees. 1° En el panel Formato de publicación, pulse clic en Marco de imagen y luego clic en Imagen a partir de archivo

2° Dibuje un cuadrado al lado del primer cuadro de texto de la página 2. Ahora aparece un cuadro donde tendrá que elegir una imagen.

3° Elegiremos la imagen de Aulaclic.

4° Pulse clic derecho en la imagen de Aulaclic y luego clic en Agregar a la biblioteca de contenido.

5° En el cuadro Agregar elemento a la biblioteca de contenido, active la casilla Trabajo. Clic en Ok.

En el panel Biblioteca de contenido, se encuentra su imagen aulaclic.jpg. Cuando guardas alguna imagen a la Biblioteca de contenido, puedes ahorrar tiempo con tus imágenes preferidas, pues ya no tendrás que buscar en todo tu computador una imagen que te guste, puedes guardarla en Publisher y utilizarlas para cualquier publicación.

6° Arrastre aulaclic.jpg hacia la publicación. Y puedes ajustar su tamaño.

Practica:

Crear una publicación de tema libre desde cero, aplicando todos los pasos vistos en la clase. Utilizar imágenes adecuadas al contenido.

Guardar la publicación en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar el archivo al correo asignado por el profesor.

CLASE 7:

PÁGINAS MAESTRAS O PRINCIPALES

Conducta de entrada

Video: https://www.youtube.com/watch?v=xpUEG8rFJC0

Teoría:

Cuando estamos a punto de terminar nuestro libro o material educativo, seguramente se nos ha ocurrido en agregar números de página, encabezados, y una serie de opciones más. Para que tu publicación tenga una buena estructura es necesario crear páginas maestras o principales, podemos pensar en que una página principal es el esqueleto de la publicación.

Nota: Para este ejercicio deberán conseguir un archivo de Publisher ya diagramado

1° Abrir el archivo.

2° Pulse clic derecho en la página 1 y luego clic en Aplicar página principal.

3° En el panel Aplicar página principal, pulse clic en el vínculo Ver las páginas principales. Puede observar que se presenta una ventana diferente con una página en blanco.

4° En la barra de herramientas Editar páginas principales, pulse clic en Guías de diseño.

5° En el cuadro de diálogo Guías de diseño, en Guías de márgenes, cambie los valores como lo muestra la imagen

6° Pulse clic en Aceptar. Ahora ha configurado los márgenes para su publicación.

7° Inserte un cuadro de texto al lado inferior derecho fuera del margen y escribe: Guía número 2. Vea la siguiente imagen.

8° Pulse clic en el menú Ver y luego clic en Encabezado y pie de página.

9° Escribe Guías de laboratorio y aplique sus respectivos formatos. 10° Pulse clic en Mostrar encabezado o pie de página en la barra de herramientas del mismo nombre

11° Pulse la tecla Tab 2 veces y escribe: Página.

12° Pulse clic en el botón Insertar número de página. Lea la llamada que acaba de aparecer

13° Aplique su formato correspondiente al igual que el encabezado.

14° En la barra de herramientas Editar páginas principales, pulse clic en Duplicar página principal.

15° En el cuadro de diálogo Duplicar página principal, en Descripción escribe: Después del capítulo 2.

16° Clic en Aceptar, De esta manera indicamos que la siguiente página principal es para las páginas que están después de la presentación del capítulo.

Observe el panel Editar páginas principales, se muestran las paginas principales creadas.

17° En la página principal B, insertaremos la imagen de Aulaclic al lado derecho del encabezado. Recuerda que la imagen la tienes guardada en tu Biblioteca de contenido, a menos que estés en un ordenador que no sea el tuyo.

18° En la Barra de herramientas Editar páginas principales, pulse clic en Cerrar vista patrón. Se muestra nuevamente su publicación.

19° La página 1 automáticamente es aplicado con la página maestra A así que nuestra prioridad será a partir de la página 2. Pulse clic en la página 2.

20° En el panel Aplicar página principal, pulse clic en el botón Aplicar al intervalo de páginas.

21° En el cuadro Aplicar página principal, seleccione Principal B (Después del capítulo 2).

22° Seleccione la opción Páginas y aplica: Desde 2 Hasta 20.

23° Clic en Aceptar. Esto indica que desde la página 2 hasta la página 20 se aplica la página principal B. las demás páginas tendrán la página principal A.

24° Observe sus páginas y note los cambios.

25° Guarde su publicación pues lo volverá a utilizar.

Práctica:

Crear una página principal, aplicando todos los pasos vistos en la clase. Que se vea su creatividad en ésta página.

Guardar la página en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar el archivo al correo asignado por el profesor.

CLASE 8

IMPRIMIR

Conducta de entrada

Video: https://www.youtube.com/watch?v=eyXaXOxBlxE

Teoría:

Cuando queremos imprimir una publicación debemos tener en cuenta varios aspectos, por ejemplo el tipo de papel que debemos utilizar, la calidad de la publicación, la optimización de las imágenes, los márgenes, orientación, y una serie de detalles más. Pero por ahora aprenderemos lo necesario.

Configurar la impresión

Antes de imprimir un documento, debemos configurar algunos detalles básicos pero esenciales para que nuestras publicaciones se impriman de la mejor manera. Debemos fijarnos mucho en el tipo de papel que vamos a utilizar, ya que es muy diferente el tipo de página que utilizas y el tipo de papel con el que vas a imprimir.

Imagina que tu publicación está una página A4, pero tu papel es Carta, entonces podemos perder tiempo y dinero valioso si no nos damos cuenta antes de mandar a imprimir 100 páginas.

1° Abrir el archivo utilizado como ejemplo en la clase anterior.

2° Pulse clic en el menú Archivo y luego clic en Configurar impresión.

3° En el cuadro de diálogo Configurar impresión, en Nombre de la impresora, seleccione su impresora que va a utilizar para la impresión, en nuestro caso vamos a utilizar la impresora virtual de Microsoft OneNote.

4° En la sección Papel, en Tamaño, elige A4.

Nota: Si deseas ahorrar tiempo y tienes la impresora adecuada, puedes elegir el tamaño de papel en A3, pues dos A4 tienen el tamaño aproximado de un A3.

5° Pulse clic en el botón Vista preliminar para ver como ha quedado su publicación antes de imprimir.

6° Cierre la Vista preliminar.

7° Clic en Aceptar. De esta manera has configurado la impresión antes de hacerla.

Después de algunas simples configuraciones, ya estamos listos para imprimir sin preocupaciones como por ejemplo, que papel elegiré, o que impresora utilizaré. Aunque el cuadro Imprimir puede resolver esta duda, yo recomiendo que lo haga antes, pues el cuadro Imprimir es solo para relajarse y decidir cuantas copias quiere y de que página a que página va a imprimir.

Cuando ingresa al cuadro de diálogo Imprimir encontrará la sección Intervalo de páginas y Copias.

Dentro de Intervalo de páginas podemos encontrar las opciones:

Todas las páginas: Imprime en su totalidad la publicación.

Página actual: Imprime la página en donde se encuentra el punto de inserción.

Páginas: Puedes elegir la página o páginas a imprimir. Por ejemplo:

5 = Imprime solo la página 5

1-5 = Imprime las páginas desde 1 hasta 5.

1, 3, 7 = Imprime las páginas 1, 3 y 7.

1-5, 10,14-16 = Imprime las páginas del 1 al 5, luego la página 10 y después la página 14 hasta 16.

Dentro de Copias encontramos:

Número de copias: Elegir cuantas copias deseas sacar de la publicación. Solo desde 1 hasta 214748647.

Intercalar: Se activa cuando eliges 2 o más copias. Cuando está con un check indica que la impresión será por juego, es decir si existen 20 páginas en tu publicación y eliges 3 copias, entonces se imprime desde 1 hasta el 20, luego vuelve a repetir desde 1 hasta 20 hasta completar sus copias. Cuando está en blanco la casilla Intercalar, se imprime 3 veces la página 1, luego 3 veces la página 2 hasta llegar a las 20 páginas.

1° Pulse clic en el menú Archivo y luego clic en Imprimir.

2° Pulse clic en el botón Imprimir. Esto es rápido pues ya hemos configurado nuestra impresión.

3. Ahora solo debemos esperar a que su publicación se imprima.

Práctica:

Tomar los ejemplos utilizados en las clases anteriores e ir a la opción de imprimir.

Cambiar las opciones de impresión y tomar una foto de la vista preliminar, para ver cómo se presenta en cada opción. En Word, copiar las imágenes tomadas y hacer una explicación de los cambios que se muestran sobre el documento, al realizar cambios en la forma de impresión.

Guardar el documento de Word en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar el archivo al correo asignado por el profesor.

CLASE 9

CÓMO HACER UNA PANCARTA

Conducta de entrada

Video: https://www.youtube.com/watch?v=5J2yLaqi-dc

Teoría:

Una pancarta es un cartel con el que podrás realizar una propaganda o informar algo importante, este lleva escritos o ilustraciones. Además, podrás utilizar una pancarta como regalo de bienvenida, regalo de cumpleaños o de aniversario.

Microsoft Publisher te ofrece un millón de herramientas y funciones para que puedas realizar de una forma sencilla y rápida un increíble diseño para todas las pancartas que desees crear.

¿Cómo crear una pancarta en Publisher?

Para crear una pancarta en Publisher deberás seguir los siguientes pasos:

El primer paso que debes realizar es hacer clic en “Archivo nuevo” y pulsar “Integrado” para empezar a utilizar una de las plantillas que brinda Publisher.

Luego tendrás que seleccionar la categoría “Pancartas” para escoger y hacer clic en el diseño de pancarta que más te guste y hacer clic en “Crear” para comenzar a diseñar y a editar tu pancarta

En la barra de herramientas encontraras “Diseño de página”, una vez allí podrás cambiar:

El ancho y el alto de la pancarta, haciendo clic en “Tamaño”.
La combinación de colores de la pancarta, seleccionando “Combinación de colores”.
La combinación de fuentes de la pancarta, haciendo clic en “Fuentes”.

¿Cómo agregar imágenes a una pancarta?

Para añadir imágenes deberás seleccionar la pestaña “Insertar”, este lo encontraras en la barra de herramientas y en el grupo “Ilustraciones” estarán los botones de imágenes. A Continuación te explicaremos dos formas para añadir imágenes:

Para agregar una imagen que tengas guardada en tu ordenador debes hacer clic en “Imágenes” luego tendrás que buscar y seleccionar la imagen que desees incorporar.
Para agregar una imagen en línea, tendrás que seleccionar el botón de “Imágenes en línea” .Después, tendrás que presionar el botón “Búsqueda de imágenes de Bing”, para que aparezca el cuadro de búsqueda, allí podrás escribir una palabra o frase que describa la imagen que necesites.

¿Cómo insertar un cuadro de texto?

El botón de cuadro de texto lo encontraras en el grupo de texto, este grupo lo encontraras en la pestaña “Insertar” de la barra de herramientas. Una vez que presiones el botón podrás dibujar el cuadro de texto en tu pancarta. También podrás insertar un WordArt.

¿Cómo guardar la pancarta?

Si deseas guardar el proceso que has realizado de edición tendrás que hacer clic en “Archivo” y seleccionar “Guardar como”.

Una vez estando en el menú que aparece cuando seleccionas el botón “Guardar como” podrás seleccionar la carpeta en donde quieres guardar la pancarta. Después de seleccionar el destino ideal para tu obra de arte, tendrás que darle clic a guardar y listo.

¿Cómo imprimir una pancarta?

Para imprimir una pancarta tendrás que darle clic al botón de “Archivo” y seleccionar “Imprimir”.

Una vez que selecciones el botón de imprimir aparecerá un menú y podrás seleccionar la impresora y hacer algunos ajustes en la configuración.

Si deseas imprimir una página en específico deberás activar la casilla “Imprimir un solo segmento” para seleccionar el número de fila o columna de la página que desees imprimir.

¿Cómo ajustar la superposición?

En el botón de “Imprimir” encontraras “Opciones de diseño” y allí podrás aumentar el margen del papel, que se superpone entre el área impresa horizontal o vertical en una página de la pancarta.

Práctica:

Crear una Pancarta que dé la bienvenida a la “FERIA TECNOLÓGICA INEMITA”. Se tiene en cuenta la imaginación y creatividad en la elaboración de la misma.

Guardar la pancarta en la carpeta “Segundo Período Informática” ubicada en la carpeta 10_?. Enviar el archivo al correo asignado por el profesor.

CLASE 10

Refuerzo de la temática, Notas
Conducta de entrada
Teoría: Repaso de la temática vista Práctica: Socialización de inquietudes sobre el te

.

Grado Decimo

1 comentarios:

Acceder al subsidio de internet

Nichlas Spears

Blog Archive

GRUPO DE TRABAJO

.

Grado Decimo

1 comentarios:

Social Profiles

Acceder al subsidio de internet

Nichlas Spears

Blog Archive

GRUPO DE TRABAJO