pág. 1

EDICIÓN EN HTML

¿QUÉ ES UN HIPERTEXTO?

Es el conjunto de información en soporte multimedia que se estructura mediante enlaces entre los diversos elementos, de forma que el usuario pueda acceder a ella de forma ágil y teniendo la posibilidad de establecer su propio itinerario de "lectura".

¿QUÉ ES EL HTML?

Una de las primeras preguntas que se hace uno al acercarse a la creación de páginas WEB es qué significa eso de HTML.

Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

Se trata de un conjunto de etiquetas que se van intercalando entre el texto de forma que los programas que utilizamos para navegar por la Red sepan qué es lo que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo en la pantalla.

Existe un organismo internacional independiente (World Wide Web Consortium o W3C) que se encarga de ir fijando cuáles son las etiquetas válidas pero, a pesar de ello, la batalla comercial que se ha desarrollado en torno a los navegadores para Internet ha originado situaciones en las que han aparecido etiquetas propietarias de un determinado programa.

Llamamos etiquetas propietarias a aquellas que sólo son interpretadas correctamente por un navegador, mientras que el resto de los navegadores las ignora. Como consecuencia de ello hay efectos que se pueden ver cuando se visita una página con el navegador Internet Explorer de Microsoft y que no aparecen con otros navegadores o viceversa.

El lenguaje HTML surgió con la finalidad de permitir organizar de forma estructurada la información (fundamentalmente textual) para su consulta por la red, pero no tenía intención de preocuparse por el aspecto gráfico de dicha información.

CONCEPTOS DE SERVIDORES Y CLIENTES WEB

Para que la información recogida en una página web se convierta en algo público y accesible en Internet, o en una Intranet en el interior de nuestro centro de trabajo, las páginas WEB deben estar disponibles en Internet, para lo que son necesarios varios requisitos:

1. Que se encuentren en un ordenador permanentemente conectado a Internet. 2. Que dispongamos de una dirección IP fija y conocida por los ordenadores que se

encargan de traducir las peticiones de los internautas a direcciones IP. 3. Que el ordenador en el que se alojan nuestras páginas disponga del software

adecuado para recibir conexiones exteriores y sea capaz de poner a disposición de los visitantes aquello que solicitan.

pág. 2

Los requisitos que acabamos de mencionar, aunque no exclusivos, son algunos de los que necesitamos para considerar que una máquina es un Servidor WEB.

Ya empieza a ser posible que un usuario particular disfrute de condiciones que le permitan cumplir el primer requisito, pero es bastante más difícil que se cumpla el tercero. Tengamos en cuenta que el software del servidor debe ser capaz de prestar el servicio a quien lo solicite, pero tiene también que disponer de las medidas adecuadas para evitar los accesos no autorizados y proteger la información que tiene almacenada el equipo en el que está instalado. Una buena política de seguridad requiere un alto nivel de capacitación técnica, por lo que lo más frecuente es que recurramos a una institución, pública o privada, que nos ofrezca espacio para alojar nuestras páginas, lo cual nos permitirá aprovechar su infraestructura técnica.

En el caso de las Intranets, donde el acceso sigue siendo público pero limitado al entorno de la propia institución, la preparación de un servidor WEB resulta menos problemática, ya que no requiere la configuración de seguridad exigida por un servidor abierto a Internet.

El otro extremo del hilo comunicativo lo establece cada uno de los usuarios que quiere consultar una página WEB. Para ello utilizará un software especializado en recibir la información ofrecida por el ordenador que hace las funciones de servidor. Se trata del Cliente WEB, Agente de usuario o navegador.

Así pues, ya tenemos definida la estructura de relación entre ordenadores necesaria para que la WEB funcione: establecer un par Cliente-Servidor.

¿CÓMO FUNCIONA EL PAR CLIENTE-SERVIDOR?

El proceso de distribución de información almacenada en páginas WEB se realiza en las siguientes etapas:

1. Un internauta solicita una determinada información tecleando el URL de la página o haciendo clic en un enlace. (Ej. http://www.google.es)

2. El proveedor de acceso del internauta consulta a su servidor de nombres de dominio (DNS), traduce la petición recibida del navegador a la dirección IP del servidor correspondiente y se pone en contacto con dicho ordenador.

3. El servidor WEB recibe la petición y comprueba que la información solicitada existe y está disponible. Si es así envía la página solicitada al ordenador que le ha realizado la petición.

4. El navegador del internauta recibe, a través de su proveedor de acceso, los recursos que constituyen la página solicitada y los organiza para presentarlos en la pantalla según las instrucciones que contiene el código HTML de la página. Dichos recursos están formados por el texto y los elementos multimedia que componen la página: imágenes fijas, sonidos, imágenes en movimiento, pequeños programas.

Todos hemos visto páginas que tardan una barbaridad en cargarse hasta que se presentan en pantalla.

Habitualmente, el contenido textual y los códigos de definición de una página tienen un tamaño bastante reducido. Pero no debemos olvidar que la página está compuesta también por el resto de elementos multimedia. La cantidad de información necesaria para presentar completamente una página es lo que constituye su "peso". ¡No lo dudes!: Si quieres garantizar la pérdida de visitas diseña tus páginas cargándolas con

pág. 3

elementos multimedia irrelevantes o mal trabajados que aumenten innecesariamente el peso de las mismas. Si los visitantes no huyen desesperados por la lentitud de carga tienes el 99% de posibilidades de que no incluyan tu URL entre sus favoritos.

NORMAS DE ESTILO

UNAS CUANTAS IDEAS ESENCIALES

¿Cuántas veces hemos oído aquello de que el sentido común acaba por ser el menos común de los sentidos? Si este aforismo es, desgraciadamente, bastante acertado en la mayoría de los campos de nuestra existencia, parece que acrecentara su validez cuando se trata de una actividad en la que intervienen ordenadores. Es como si supusiéramos que la potencia de cálculo del ordenador va a ser capaz de suplantar nuestra capacidad de crear, pensar y organizar. Por ello quiero recordar algunos principios esenciales que, debido posiblemente a su obviedad, suelen acabar olvidándose.

PARA COMUNICAR HAY QUE TENER ALGO QUE DECIR

Desde luego, cuando no hay nada que contar lo máximo que podemos lograr, si dominamos la técnica para ello, es crear brillantes y atractivas burbujas vacías.

El primer paso que hemos de dar para crear nuestro sitio WEB es aclarar nuestras ideas sobre lo que pretendemos comunicar a través de sus páginas.

UNA BUENA IDEA PUEDE ESCRIBIRSE CON MALA CALIGRAFÍA...

Podemos afirmar sin lugar a duda que todos los grandes genios de la literatura tuvieron que aprender a manejar un lápiz. Y es casi seguro que más de uno hizo sus primeras intentonas literarias con caligrafías temblorosas que, a pesar de todo, no ocultaban el talento que había tras esos trazos.

El lenguaje HTML va a ser la herramienta con la que plasmaremos nuestras ideas para publicarlas en Internet. Como ocurre con cualquier herramienta, la calidad de los trabajos realizados con ella dependerá de la familiarización que seamos capaces de adquirir con su manejo... y eso tiene mucho que ver con la práctica.

...AUNQUE ES PREFERIBLE QUE LA CALIGRAFÍA ACOMPAÑE

Si atendemos a lo dicho en los párrafos anteriores puede ocurrir que desequilibremos la balanza hacia el platillo del fondo en detrimento del platillo de la forma. Aunque es verdad que el predominio de la forma nos acerca peligrosamente a los fuegos de artificio, no es conveniente que abandonemos un cierto grado de preocupación por la constante superación de nuestra "caligrafía".

En muchas ocasiones hay aspectos, que parecen meramente formales, cuya incidencia sobre la legibilidad y facilidad de transmisión de los contenidos los alejan del campo del adorno para llevarlos al terreno de la arquitectura del mensaje.

pág. 4

EN EL FONDO TENEMOS GUSTOS SIMILARES

Cuando hago esta afirmación no me refiero a los aspectos estéticos, donde está claro que encontraríamos casi tantos matices como seres humanos.

Pensemos el entorno en el que nos estamos moviendo: navegación por Internet en un entorno educativo. Hay algunas coordenadas que son comunes a la mayoría de los que trazamos esta singladura:

Nos gusta movernos rápido. Nos impulsa la búsqueda de información relevante. Agradecemos que nos brinden sistemas cómodos de navegación. Nos molestan las visitas a sitios en obras (Me refiero a esos que lo único que tienen es

un cartel que nos lo dice, porque la verdad es que una buena WEB siempre debería estar en obras).

¿Imágenes y sonidos? Todos los que pida el contenido, pero optimizados, que el que paga la conexión telefónica soy yo y no todos tenemos conexiones a velocidades de vértigo.

...

Seguro que encontramos bastantes más puntos de coincidencia. Así que ¿por qué no nos planteamos lo que pensaríamos del autor si fuéramos visitantes de la WEB que estamos creando? Por cierto, cuando intentes responder esta pregunta olvida las horas de esfuerzo que le has tenido que dedicar a lo que tienes en tu pantalla

SI EN MI CABEZA NO ESTÁ CLARO ¿CÓMO LO VA A ESTAR EN LA DEL VISITANTE?

Una WEB educativa no debería ser uno de esos eventos que se dieron en llamar "performances" en los que cada uno reelaboraba y reinterpretaba la propuesta creativa. Seamos serios: si pretendo transmitir una información el proceso es, inicialmente, asíncrono y unidireccional. Otra cosa es que arbitre los procedimientos para que haya interactividad, pero el flujo inverso se tendrá que producir cuando el visitante tenga claro el mensaje y las ideas que le quiero transmitir. Si esas ideas no están organizadas en mi cabeza no podré plasmarlas de forma que el visitante las perciba como algo coherente.

CALOR DE HOGAR

No se trata de que todos los muebles sean iguales, de que todos los cuadros sean del mismo tamaño,... pero lo cierto es que cualquier casa tiene un estilo que hace que, por muy grande que sea, cuando cambias de habitación no sientas que te has mudado a casa de los vecinos. Desgraciadamente son muchos los sitios WEB en los que el salto de página me hace sentir que me he mudado, más que a casa del vecino, a otro país.

Cuando pensemos en nuestro sitio WEB deberíamos hacernos una idea de la "decoración" general para que los visitantes adquieran de forma inmediata una sensación de comodidad y de sitio conocido que les facilite la estancia en nuestra "casa virtual".

¡VIVA LA COMUNICACIÓN VIVA!

Juega a gusto con las palabras y dales el sentido que te plazca:

pág. 5

1. ¿La exclamación jubilosa de un deseo? 2. ¿Una orden, tal vez? 3. ¿Quizás un simple eslogan publicitario arropado por ese tono imperativo?

La verdad es que mi intención era un poco más inmediata. Lo que quería decir en realidad es lo siguiente:

¡Haga usted el favor de no preocupar a sus visitantes haciéndoles creer que ha muerto!

Si en algún punto de la WEB situamos un enlace que apunte a nuestra dirección de correo tiene que ser con el propósito de contestar a los mensajes que se generen a través de él. Si no es así, es preferible que les ahorremos preocupaciones a nuestros visitantes.

EL COLOR EN LA WEB

Si miras a tu alrededor te darás cuenta que estamos rodeados de colores por todas partes. Los colores nos envían impulsos que se convierten en sensaciones, los colores pueden provocarnos tranquilidad, excitación, alegría o depresión.

En el mundo del diseño el color es un aspecto de la máxima importancia, es una forma capaz de comunicar empleando muy poco espacio y muy poco tiempo. Estos dos aspectos hacen que sea básico su uso en una página web, donde en no más de diez segundos debemos captar la atención de nuestros visitantes si no queremos que se vaya a otro lugar.

Un uso adecuado del color en una página puede ser clave para su éxito. Todos nos hemos encontrado páginas con este aspecto descuidado, páginas donde a veces el texto era ilegible debido a la combinación de colores. O donde el uso de colores chillones nos ha alterado y enseguida nos hemos ido a otro lugar más agradable.

Aquí no se va a tratar de estudiar a fondo la teoría del color, no vamos a hablar de frecuencias o longitudes de onda, de colores sustractivos o aditivos. Más bien intentaremos ayudarte a comprender un poco mejor el uso adecuado de los colores, y por tanto debiera ser una ayuda a la hora de hacer tus diseños.

Aunque no vamos a entrar en tecnicismos si es conveniente conocer alguna terminología que nos permita entender lo que leamos acerca del uso del color o de las características de los colores. Es un glosario breve y claro.

pág. 6

Círculo cromático

También llamado rueda de colores, es un círculo dividido en sectores de diferentes colores que nos permite estudiar las relaciones entre estos. Existen en ella tres colores primarios (rojo, verde y azul) cuyas combinaciones nos permiten obtener todos los demás. En la figura tenemos una rueda de tan solo 12 colores, como sabes en la web dispones de bastantes más colores.

Tono (Hue) Es el estado puro del color, sin blanco o negro agregados. Es lo que define a un color y nos permite por ejemplo diferenciar el verde del rojo. Se refiere al recorrido que hace un tono hacia uno u otro lado del círculo cromático, por lo que el verde amarillento y el verde azulado serán matices diferentes del verde.

Saturación Es una medida de la presencia o ausencia de grises dentro de un color. Puede entenderse como el grado de pureza de un color, así un rojo muy saturado indica un rojo puro, sin mezclas.

La parte superior vemos los colores con la máxima saturación, los más puros. En la zona inferior vemos la mínima saturación, todos los colores tienden al gris

Luminosidad (value)

Es la intensidad (claridad u obscuridad) en el color, y se refiere a la cantidad de luz percibida. Se obtiene del agregado de blanco o negro a un color base. A medida que a un color se le agrega más blanco se intensifica la claridad del mismo por lo que se obtienen valores más altos. Por contra a medida que a un color se le agrega más negro, se intensifica dicha oscuridad y se obtiene un luminosidad más baja.

Arriba los colores más luminosos, prácticamente blancos. Abajo los menos luminosos, muy alto contenido en negro.

pág. 7

Como has leído arriba los colores en nuestros monitores se forman mezclando el rojo, verde y azul. En inglés Rojo, Green, Blue, estas iniciales dan lugar al nombre RGB para definir los diferentes colores. Así un color se describe por la cantidad de cada uno de estos colores primarios, cantidad que va de 0 a 255. Habitualmente esto se expresa en hexadecimal como un código de 6 dígitos (RRGGBB) dos dígitos para cada componente. Por ejemplo: un color 10A2C0, tiene un componente de rojo igual a 10, de verde igual a A2 y de azul C0. ¿Un lío? Te lo digo en decimal Rojo = 16, Verde = 162, Azul = 192. Por ejemplo el blanco es el FFFFFF (máximo de rojo, verde y azul), mientras que el negro es el 000000, ausencia de todo color.

A la hora de diseñar tu web deberás elegir una serie de colores que deben resultar armónicos, o sea, que vayan bien unos con otros. Debemos elegir un esquema de colores para todas las páginas del sitio. Lo habitual es que basten 4 colores para lograr un buen esquema, si ves que queda un poco sobrio puedes jugar un poco con la luminosidad de los colores elegidos.

Colores complementarios consiste en elegir dos colores opuestos de la rueda cromática

Complementarios cercanos

Se basa en coger un color y dos contiguos a su complementario

Tríadas complementarias Tres colores equidistantes tanto del centro de la rueda, como entre sí, es decir, formando 120º uno del otro.

pág. 8

Contiguos Serie de colores comprendidos entre otros dos. Cuando los colores extremos están muy próximos en el círculo cromático, la gama originada es conocida también con el nombre de colores análogos

Para saber si un juego de colores resulta armónico basta echar un vistazo a la naturaleza, veremos que hay colores que nunca aparecen mezclados y otros que pegan perfectamente.

INTERPRETAR EL COLOR

¿Y qué color usar como base? ¿O para las distintas partes de mi web? Pues eso es cuestión de gustos, pero podemos ayudarte un poco también en esto. Aquí te indicamos las sensaciones que están asociadas a cada color, a veces es una cuestión cultural y otras es psicológica, pero sea como sea funciona.

negro Elegancia, seducción, misterio, fuerza, mal.

blanco Pureza, inocencia, limpieza, ligereza, juventud, suavidad.

rojo: Peligro, alarma, entusiasmo, pasión, entusiasmo, agitación, fuerza, sexo, calor, sangre, violencia, intensidad. Asociado con los sentimientos enérgicos y con la excitación apasionada o erótica, y asociado a la ira, al enfado. Es el único color brillante de verdad y puro en su composición. Puede ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de la página, pero cuando es usado en gran cantidad cansa la vista en exceso.

amarillo Entusiasmo, pasión, fuerza, sexo, precaución, calor, primavera, inocencia, infancia. Es un color optimista y alegre que en muchas culturas simboliza la deidad. Los tonos muy brillantes se usan para indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o pálido hace a la gente sentirse cómoda, caliente. Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay psicólogos que dicen que este color ayuda a memorizar datos a las personas. Pero hay que tener en cuenta que es el color que fatiga más la vista, porque causa una estimulación excesiva de los ojos, por lo que un entorno amarillo brillante causa irritabilidad.

azul Sinceridad, dignidad, melancolía, tristeza, confianza, masculino, cielo, agua, sensualidad, comodidad. Si es muy pálido puede inspirar frescura e incluso frío. Da sensación de elegancia y frescura, cuando no es muy oscuro. Si es oscuro da sensación de espiritualidad. Es un color que disminuye el apetito, por lo que no es aconsejable su uso para una página sobre recetas de cocina o productos alimenticios. También puede expresar tristeza, pasividad, depresión.

pág. 9

naranja Alegría, juventud, calor, verano. Es vibrante y caliente como la luz del sol o el fuego, exótico como las frutas tropicales, sugiere informalidad en el trato, amistad, y destaca mucho sobre el entorno que le rodea.

rosa Calma, debilidad, delicadez, tranquilidad. Es un color asociado en nuestra cultura con la mujer.

verde Naturaleza, salud, frescura, tranquilidad, crecimiento, abundancia, fertilidad, plantas, bosques. Se dice que es el color más descansado para el ojo y que tiene poder de curación.

púrpura Abundancia, sofisticación, inteligencia, espiritualidad, dignidad. Puede evocar tranquilidad y puede evocar frivolidad y artificialidad. Aunque puede simbolizar la espiritualidad, el misterio, la aristocracia y la pasión, también puede simbolizar el luto, la muerte, la nausea, el orgullo y la pomposidad.

violeta Es el color de la fantasía, del juego, de la impulsividad y de los estados de sueño, aunque puede sugerir pesadillas o locura.

marrón Sugiere edad, cosas viejas, madera, ladrillo.

SELECCIÓN DE COLORES

En la siguiente página web puedes obtener el color que quieras en Hexadecimal, tan solo selecciona el color y su código aparecerá en el recuadro

http://html-color-codes.info/codigos-de-colores-hexadecimales/

Selecciona el color o introduce el código hexadecimal

Código hexadecimal

pág. 10

EL ENTORNO DE TRABAJO DE KOMPOZER

El entorno con el que vamos a trabajar es KompoZer. Está situado en Inicio Todos los programas KompoZer.

La distribución de los menús es la siguiente:

1. Barra de Menús. Ofrece acceso a todas las opciones del programa organizadas como en otras aplicaciones de Windows en Archivo, Editar, Ver, Insertar, …

2. Barra de Redacción. Consta de los botones de acceso a las operaciones más frecuentes: Nuevo, Abrir, Guardar, Publicar, etc.

3. Barra de Formato. Contiene las herramientas más útiles para aplicar formato al texto: tipo de fuente, tamaño, color, efecto, justificación, etc. Si se sitúa el ratón sobre cada botón se muestra un mensaje indicando su función.

4. Barra de pestañas. KompoZer permite editar varias páginas usando un sistema de pestañas donde cada documento abierto es accesible al pulsar sobre la pestaña correspondiente. El nombre del archivo aparece acompañado por el icono de un diskete rojo cuando esa página ha sido modificada pero no guardada.

5. Documento. Muestra el contenido del documento HTML actual.

6. Barra de modo de edición. Indica el modo de vista que está activo en el documento actual. Se puede cambiar el modo de visualización pulsando en una de estas pestañas: Normal, Etiquetas HTML, Código fuente y Vista preliminar. Mientras no se indique lo contrario se utilizará el modo de visualización Normal.

7. Barra de estado. Muestra la posición del cursor con respecto a la jerarquía de etiquetas HTML del documento. Se pueden asignar atributos a una etiqueta haciendo clic derecho sobre la etiqueta en la barra de estado y seleccionando la opción deseada.

8. Administrador de sitios. Permite crear y mantener un sitio web.

pág. 11

El aspecto de la versión 0.8b3 es el siguiente:

Recuerda que en el menú Ver puedes activar las diferentes barras de herramientas.

pág. 12

En la pestaña Vista preliminar o Diseño (depende de la versión que trabajes) verás el aspecto, aunque para ver el funcionamiento de los enlaces tienes que pulsar el botón de Navegar.

En la pestaña código fuente, verás el código en HTML que se va originando o bien, que tú escribas.

pág. 13

Para el correcto funcionamiento de todas tus páginas web, vamos a crear una carpeta que se va a llamar CursoLetramiwebNombreApellido1 en nuestro ordenador donde guardaremos TODAS las páginas web que vamos a crear. Por ejemplo 4AmiwebIsabelTorres.

Dentro de esta carpeta crearemos otra de nombre images. ¡OJO! ¡No pongas tildes en ningún nombre de archivo ni capeta y pon todas las letras en minúsculas!

MI PRIMERA PÁGINA WEB

El propósito de esta actividad es diseñar tu primera página web con Kompozer. El tema elegido es una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán: encabezado, texto, imagen y un enlace a una página externa.

ACTIVIDAD 1

1. Descarga a la carpeta miweb los archivos sobre lorca: una imagen (lorca.gif) y un archivo de texto (lorca.docx).

2. Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta forma este archivo se mueve para situarse dentro ella. En lo sucesivo la carpeta images contendrá todas las imágenes que se integren en las páginas web creadas.

pág. 14

INICIAR UN DOCUMENTO NUEVO EN KOMPOZER

3. Abre el programa KompoZer.

4. Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo de texto lorca.docx. Se abrirá Word mostrando su contenido.

5. Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de Windows. Cierra la ventana del Bloc de Notas.

6. En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para maximizar la ventana de este programa.

7. Clic sobre el nuevo documento HTML que estamos editando y en la barra de menús selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo.

8. Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado. Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar.

9. En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón Aceptar.

10. Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre del archivo: lorca.

pág. 15

11. Clic en el botón Guardar

12. Título. Pulsa y arrastra para seleccionar la primera línea de texto: “Federico García Lorca”. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1. Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista: Texto del cuerpo.

Nota:

Es muy recomendable utilizar las distintas opciones de formato de esta lista para destacar frases y párrafos.

pág. 16

INSERCIÓN DE IMÁGENES

13. Haz clic debajo del título y pulsa la tecla <enter> para definir el punto donde se insertará la imagen. En la barra de Redacción pulsa en el botón Imagen.

14. Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo… para localizar el archivo que contiene la imagen.

15. Despliega la lista Buscar en: para abrir la carpeta CursoLetramiweb\images donde hemos situado anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir.

16. Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto alternativo (Si no se inserta puede dar un error). En este caso teclea "Federico García Lorca". Se trata de un texto descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando el usuario sitúe el ratón sobre ella.

pág. 17

17. Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar la imagen desde la página actual: images/lorca.jpg. Para terminar clic en el botón Aceptar.

Insertar un hipervínculo

18. Selecciona el enlace que aparece en la última línea del documento. A continuación elige Editar > Cortar. Esta URL se ha copiado al portapapeles y se ha eliminado de la ubicación actual. Como habrás podido comprobar es un enlace a Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa:

http://www.google.es/search?q=Federico+García+Lorca

19. Selecciona el texto "Más información" situado al final del documento. A continuación en la barra de Redacción pulsa en el botón Enlace.

20. En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del enlace y pulsa la combinación de teclas Ctrl+V para pegar la URL copiada anteriormente. Para terminar pulsa en el botón Aceptar.

21. Clic en el botón Guardar.

pág. 18

22. Haz clic el botón para cargar en el navegador el documento que acabamos de salvar y comprobar los resultados. No obstante esta opción sólo funciona si tienes configurado en tu equipo Mozilla Firefox como navegador por defecto.

23. La primera vez que utilices el botón navegar el programa solicitará permiso para lanzar una aplicación externa. Sería conveniente que marcaras la casilla para que recordara esta decisión de forma que no te lo pregunte cada vez que vuelvas a pulsarlo.

24. El resultado será:

Otra forma de ver el resultado es:

25. Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el archivo lorca.html creado para ver su aspecto con el navegador web instalado por defecto.

26. No olvides eliminar el archivo lorca.docx una vez que has terminado.

27. Si es necesario abrir el archivo selecciona Archivo > Abrir desde KompoZer.

pág. 19

ELEMENTOS VISUALES

Está claro que los elementos visuales son importantes, pero lo que no debemos perder nunca de vista es la organización de la información, de manera que siempre quede organizada de una forma clara, ordenada y comprensible, incluso si la despojamos de los atributos visuales.

Una vez hecha la salvedad anterior vamos a comenzar un recorrido por los recursos de los que disponemos para modificar el aspecto de un documento html Las primeras operaciones sobre las que podríamos practicar serían las referentes a la modificación del tipo de letra y su tamaño (al que se denomina cuerpo).

Para acceder a los tipos de letra disponemos de las dos posibilidades que se muestran en las imágenes:

un desplegable en la 2ª barra de formato

la opción de menú formato tipo de letra que nos da acceso a las fuentes instaladas.

Además del tipo de letra podemos jugar con el cuerpo de las mismas, esto es, su tamaño.

Antes de recurrir a los iconos que aparecen en la barra de formato vamos a tomar en consideración la opción de menú formato tamaño. Cuando accedes a ella verás que hay una serie de tamaños limitada y es importante que lo tengas en cuenta porque los navegadores antiguos pueden tener problemas con especificaciones de tamaño diferentes a la que se consigue seleccionándolos desde aquí.

pág. 20

JUSTIFICACIÓN

La justificación del texto por defecto se hace a la izquierda, aunque podemos también hacerla centrada, a la derecha o justificada a ambos lados.

KompoZer, como los actuales editores gráficos de páginas web, permite que marquemos la alineación justificada a ambos lados, pero es posible que si utilizas algún editor más antiguo no te ofrezca la posibilidad de justificar el texto de forma completa.

Además de la justificación por defecto podemos también justificar el texto a partir del centro o a partir de la derecha. Los botones a usar son los mismos que los de los procesadores de texto:

VIÑETAS Y MARCADORES

En ocasiones nos puede interesar colocar enlaces a otros puntos de una misma página. Antes de crear el hipervínculo, es necesario situar esos puntos mediante marcadores de posición.

Un marcador es un nombre que representa una posición dentro de la página. Suele estar formado por un fragmento de texto y es utilizado como destino de un hipervínculo.

En el ejemplo que nos ocupa se utilizan marcadores e hipervínculos para crear un glosario de términos. Asimismo se utilizan viñetas para crear la lista de hipervínculos.

Una lista con viñetas es una lista de elementos donde no importa el orden y todos se muestran precedidos por un mismo símbolo que recibe el nombre de viñeta.

ACTIVIDAD 2

1. Descarga a la carpeta miweb de tu disco duro el archivo de texto: glosario.docx

2. Inicia Kompozer haciendo doble clic en el icono del programa situado en el escritorio.

3. El programa se abrirá sobre un nuevo documento en blanco.

4. Minimiza esta ventana y desde el explorador de archivos de Windows haz doble clic sobre el fichero de texto glosario.txt. Se abrirá el Bloc de notas mostrando su contenido.

5. Desde el Bloc de Notas selecciona Edición > Seleccionar todo para elegir el texto completo que contiene este archivo. A continuación Edición > Copiar para copiar el texto seleccionado al Portapapeles. Cierra la ventana del Bloc de Notas.

6. En la barra de tareas pulsa en el botón correspondiente de Kompozer para regresar a este programa.

7. Una vez situado en Kompozer selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo.

8. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Glosario educativo …” A continuación despliega el cuadro de formatos y elige Título 1.

pág. 21

VIÑETAS

9. Pulsa y arrastra para seleccionar la lista completa de términos situada debajo del título. A continuación pulsa en el botón viñetas de la barra de Formato.

pág. 22

MARCADORES

La estructura que va a tener nuestro documento se recoge de forma gráfica en la siguiente figura:

Ahora vamos a definir los marcadores, es decir, los puntos en la página a dónde se van a dirigir los hipervínculos que se crearán más tarde. En primer lugar vamos a definir un marcador inicial al comienzo de la página.

10. Selecciona el título del documento: “Glosario educativo…” y a continuación pulsa en el botón Enlace interno de la barra de herramientas de Redacción.

11. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Para simplificarlo escribimos: Glosario y pulsamos en el botón Aceptar. Tras esta operación observarás que el texto seleccionado muestra el icono de un ancla sobre fondo amarillo a su izquierda. Esto indica que es un marcador.

Nota: Si es necesario eliminar un marcador basta con hacer clic sobre este icono de ancla y luego pulsar la tecla Supr.

pág. 23

12. Ahora vamos a crear el marcador a la primera entrada del glosario. Selecciona el texto "Adaptación curricular" que encabeza su definición (no en la lista de viñetas). Clic en el botón Negrita de la barra de Formato.

13. A continuación pulsa en el botón Enlace interno.

14. En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Es importante que definamos como nombre del marcador un nombre sencillo sin espacios ni caracteres especiales. Clic en el botón Aceptar.

15. Repite estos pasos para crear el resto de marcadores a lo largo del documento: Criterio de evaluación, Criterio de promoción, etc.

ENLACES INTERNOS

Una vez que hemos terminado la creación de marcadores, vamos a diseñar los hipervínculos a esos marcadores. Recuerda que los hipervínculos se encontrarán en la lista de viñetas inicial y en el texto [Arriba] que aparece al finalizar cada definición.

16. Selecciona el texto "Adaptación curricular" ahora en la lista de viñetas inicial.

pág. 24

17. Clic en el botón Enlace que aparece en la barra de Redacción.

18. En el cuadro de diálogo Propiedades del enlace despliega la lista Ubicación del enlace para seleccionar el enlace interno al marcador creado: #Adaptación_curricular. Clic en el botón Aceptar.

19. Repite estos pasos para crear un hipervínculo en cada entrada de la lista de viñetas al marcador correspondiente.

20. Haz lo mismo en la palabra "[Arriba]" situada al final de cada definición para que apunte al marcador #Glosario. De esta forma el usuario final siempre encontrará un lugar donde pulsar para regresar a la parte superior del documento donde se encuentra el índice de términos. Esto evitará que utilice el scroll (desplazamiento vertical utilizando los botones de la ventana) Ya sabes que los visitantes de una web no son muy amigos de utilizarlo.

21. Sitúa el cursor debajo de cada hipervínculo con el texto “[Arriba]” e inserta una línea horizontal separadora usando Insertar > Línea Horizontal. Al finalizar el documento puedes añadir 2 seguidas para indicar al usuario el fin del mismo.

22. Completada la página vamos a guardarla. Clic en el botón Guardar. Si es la primera vez que se guarda solicitará el título de la página. Introduce como nombre del archivo

glosario.html y guárdala en la carpeta CursoLetramiweb.

23. Si deseas cambiar el título de la página debes seleccionar Formato > Título y propiedades de la página. No olvides guardar los cambios producidos.

24. Para visualizar el aspecto de la página pulsa en el botón Navegar (sólo funciona si tienes configurado en tu equipo Mozilla Firefox como navegador web por defecto). Otra opción es situarte en la carpeta CursoLetramiweb y hacer doble clic en el archivo glosario.html para visualizarlo a través del navegador web.

25. El resultado será:

pág. 25

LISTAS NUMERADAS

Una lista numerada es una lista de elementos ordenados. Tiene especial aplicación en la descripción de los pasos de un procedimiento. Cada elemento viene precedido por un signo numérico o letra del alfabeto que permite identificar su posición en la lista.

ACTIVIDAD 3

1. Descarga a la carpeta miweb el archivo de texto (escribe.docx) y una imagen (magiapalabras.gif). Arrastra la imagen dentro de la carpeta images.

2. Abre Kompozer haciendo doble clic sobre el acceso directo a este programa situado en el escritorio.

3. Minimiza esta ventana y sitúate en la carpeta miweb para hacer doble clic sobre el archivo escribe.docx. Se abrirá el Bloc de Notas mostrando el contenido de este archivo.

4. Desde el Bloc de Notas elige Edición > Seleccionar todo y luego Edición > Copiar.

5. Cierra la ventana del Bloc de Notas.

6. Sitúate en el nuevo documento HTML que estás editando con Kompozer y a continuación elige Editar > Pegar.

7. Pulsa y arrastra sobre la primera línea de texto para seleccionarla: “Escribe tu cuento”. A continuación despliega el cuadro de estilos de párrafo y elige Título 1.

pág. 26

8. Selecciona el texto "Descripción" y pulsa en el botón Negrita de la barra de Formato.

9. Antes de añadir imágenes conviene indicarle a Kompozer donde se guardará esta página. Para ello clic en el botón Guardar, introduce como título: “Escribe tu cuento” y guárdala como escribe.html dentro de la carpeta miweb.

10. Sitúa el cursor entre la descripción y el enlace. A continuación pulsa en el botón Imagen.

11. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo… y navega para localizar la imagen magiapalabras.gif dentro de la carpeta CursoLetramiweb/images. Selecciona este archivo y pulsa en Aceptar. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/libro.jpg. Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.

12. En Texto alternativo introduce "La magia de las palabras".

13. Haz clic en la pestaña Enlace e introduce la URL: http://educalia.educared.net

pág. 27

14. Para terminar pulsa en el botón Aceptar.

15. Para conseguir que el enlace situado en la imagen muestre en una nueva ventana asegúrate de que la imagen está seleccionada y a continuación haz clic derecho en la etiqueta “<a>” que aparece en la esquina inferior izquierda de la barra de estado de KompoZer. La etiqueta HTML “<a>” define el enlace introducido.

16. En el menú que se despliega para la etiqueta "<a>" elige Propiedades avanzadas.

17. En el cuadro Editor avanzado de propiedades, en la pestaña Atributos HTML selecciona en la lista Atributo el elemento target (destino) y en la lista Valor elige _blank (nueva ventana). Pulsa en el botón Aceptar.

pág. 28

18. Selecciona el bloque de texto http://educalia.educared.net que aparece en la página y pulsa en el botón Enlace.

19. En el cuadro de diálogo Propiedades del enlace introduce el enlace anterior en la casilla Ubicación del enlace si no estuviera. En la sección Destino activa la opción El enlace se abrirá y selecciona "en una nueva ventana". Para terminar pulsa en el botón Aceptar.

20. Selecciona la línea de texto Actividad: y pulsa en el botón Negrita de la barra de Formato.

21. Pulsa y arrastra para seleccionar todas las instrucciones que aparecen debajo de Actividad.

22. Clic en el botón Lista de viñetas.

23. Para terminar pulsa en el botón Guardar. Para visualizar el aspecto final de la página pulsa en el botón Navegar.

24. El resultado será:

pág. 29

TABLAS

Las tablas están formadas por filas (horizontales) y columnas (verticales), y el espacio en que intersectan se denominan celdas.

Se suelen utilizar para darle un aspecto más tabular a las páginas web.

ACTIVIDAD 4

1. Descarga los ficheros de la Actividad 4 poblacion.docx y población.jpg

2. Mueve el documento de texto poblacion.docx a la carpeta textos y la imagen población.jpg muévela a la carpeta images.

3. Abre el documento de poblacion.docx, haciendo doble clic sobre él. Selecciona todo el documento. (Edición Seleccionar todo o control + E) y cópialo.

4. Abre KompoZer y pega el texto.

5. Guarda la página con el título Demografía de España y con el nombre demografía.html

6. Selecciona la primera línea del texto "Demografía española". A continuación despliega el cuadro de estilos de párrafo y elige Título 1.

7. Selecciona el título Demografía de España y elige del cuadro de estilos de párrafo el

Titulo 1, ponle el color que quieras a la fuente, cambia el tipo de fuente, cambia el color de fondo y céntralo.

pág. 30

8. Justificar el primer párrafo

INSERTAR IMAGEN

9. Sitúa el cursor después del texto y antes de los datos. A continuación pulsa en el botón Imagen o bien Insertar Imagen

10. En el cuadro de diálogo Propiedades de la imagen haz clic en el botón Elegir archivo… y navega para localizar la imagen poblacion.jpg dentro de la carpeta CursoLetramiweb/images. Selecciona este archivo y pulsa en Aceptar.

pág. 31

11. Observa que la casilla Ubicación de la imagen se muestra la ruta relativa respecto a la página actual: images/poblacion.gif. Esto es así porque está activada la casilla La URL es relativa a la dirección de la página.

12. En el cuadro de texto Texto Alternativo escribe: "Demografía española".

13. Escribe en el Titulo emergente Población española (que es lo que se verá cuando sitúes el ratón sobre la imagen) y en Texto alternativo Demografía de España y Aceptar.

14. Hacer doble clic sobre la imagen para volver a acceder a las Propiedades de la imagen. Clic en la pestaña Apariencia y en el cuadro Borde sólido introduce el valor 1 como grosor en píxeles del borde que mostrará la imagen.

pág. 32

15. Pulsa en el botón Aceptar.

16. Centra la imagen en la página.

CREAR UNA TABLA DE DATOS

Existen dos procedimientos alternativos para crear la tabla:

Insertar una tabla en blanco.

Convertir el texto existente en una tabla.

Vamos a ver primero un método y luego el otro (que será el que usemos).

Método 1. Insertar una tabla en blanco

Hacer clic justo debajo de la imagen para situar el cursor en este espacio.

Pulsar en el botón Tabla disponible en la barra de herramientas Redacción.

En el cuadro de diálogo Insertar tabla puedes arrastrar el puntero sobre la cuadrícula para definir el número de filas y columnas que tendrá la nueva tabla. Para terminar haz clic en la última celda de la parrilla creada.

Esta opción sólo permite crear tablas de 6x6 celdas como máximo. Para un ajuste más fino, como es el caso que nos ocupa, pulsa en la pestaña Preciso. Introduce el número de filas: 20 y el número de columnas: 3. En Anchura indica los píxeles exactos de ancho que tendrá la tabla o bien el % que ocupará del ancho total de la ventana. Conviene utilizar una anchura 100 % de la ventana ya que se esta forma la tabla se ajusta automáticamente al espacio disponible en la ventana del navegador.

Para que la tabla no muestre el borde introduce el valor 0 en la casilla Borde.

Clic el botón Aceptar.

pág. 33

De esta forma se crea una tabla en blanco. Normalmente se crea la tabla y luego se va rellenando introduciendo los datos por teclado. Sin embargo en este caso se podría completar celda a celda mediante Editar > Cortar (Ctrl+X) y Editar > Pegar (Ctrl+V) utilizando el contenido que ya tenemos en el documento.

Teniendo en cuenta que los datos ya tienen un preformato podemos aprovechar para utilizar el procedimiento de convertir el texto en una tabla tal y como se explica en el siguiente apartado.

Si deseas modificar algún parámetro de la tabla inicial haz clic derecho sobre ella, elige Seleccionar Tabla > Tabla y luego pulsa en el botón Tabla de la barra de Redacción. Con esta rutina se muestra el cuadro de diálogo Propiedades de la tabla donde es posible editar alguno de sus parámetros.

Eliminamos la tabla anteriormente insertada, para ello seleccionar la tabla primeramente, Tabla Seleccionar Tabla y después Tabla Eliminar Tabla

pág. 34

Método 2. Crear tabla a partir de una selección

17. Seleccionar todas las líneas que contienen los datos que van a formar la tabla de datos (a partir de Comunidad Autónoma)

18. En la barra de menús selecciona Tabla Crear tabla a partir de la selección o simplemente pulsa en el botón Tabla de la barra de Redacción.

19. En el cuadro de diálogo Convertir en tabla marca la opción “Otro carácter” e introduce un asterisco "*". Si te fijas el asterisco es el carácter que separa un dato de otro dentro de la misma línea. A continuación activa la casilla Borrar carácter separador.

20. Pulsa en Aceptar y verás como los datos se organizan en filas y columnas formando la tabla de resultados.

DAR FORMATO A LA TABLA

21. Pulsa y arrastra para seleccionar las celdas de la primera fila. Una vez seleccionadas haz clic derecho sobre ellas y elige la opción Color de fondo de la tabla o celda…

22. En el cuadro de diálogo Color de la tabla o de la celda selecciona un color predefinido cualquiera y pulsa en el botón Aceptar. Observa que esto hará que la fila de encabezado de tabla se muestre con este color de fondo.

pág. 35

23. Mantén la tecla Ctrl pulsada para ir haciendo clic sobre todas las celdas de las filas pares. Una vez seleccionadas repite los pasos anteriores para definir un color gris de fondo. La diferencia de color entre una fila y la siguiente facilitará la lectura de los datos.

24. Para realizar cambios en la tabla completa haz clic con el botón derecho sobre cualquier punto de la tabla y elige Seleccionar tabla Tabla. Con esta acción se selecciona la tabla completa.

25. A continuación pulsa en el botón Tabla de la barra de herramientas.

26. En el cuadro de diálogo Propiedades de la Tabla se pueden configurar sus múltiples parámetros. En este caso sitúa un 0 en el cuadro Borde: para evitar que se visualice el borde la tabla.

27. Para terminar pulsa en el botón Aceptar.

28. No olvides hacer clic en el botón Guardar para conservar el trabajo. Visualiza el resultado en el Navegador.

pág. 36

29. No olvides hacer clic en el botón Guardar para conservar el trabajo.

30. Elige un color de fondo para la página.

31. Accede a la página web del INE (Instituto Nacional de Estadística).

32. Copia el enlace e insértalo en la imagen, para ello, recuerda doble clic en la imagen o bien selecciona la imagen y te vas al botón Imagen de la barra de Redacción. Te sitúas en la ficha Enlace y pegas en enlace copiado y Aceptar.

33. Vuelve a guardar y pulsa en Navegar para ver como que se visualiza en el navegador.

34. La página debe de verse similar a la siguiente:

pág. 37

FORMULARIOS

Un formulario es un conjunto de casillas que se pueden añadir a una página y que permite recoger datos que introduce el usuario para luego procesarlos.

En un formulario hay 2 partes básicas:

El interfaz o página con la estructura de campos, etiquetas y botones que puede ver el usuario.

El programa o script que procesa esa información.

ACTIVIDAD 5

1. Descárgate de Internet una imagen del logo de Google y guárdala en tu carpeta images con el nombre de logogoogle.jpg

2. Abre una nueva página en KompoZer. 3. Para guardar esta página, elige Archivo > Guardar como. Introduce "Buscador Google"

como título y pulsa en el botón Aceptar. 4. Guarda la página en la carpeta CursoLetramiweb y define como nombre de archivo:

google.html. Pulsa en el botón Guardar. 5. En la página web escribe: "Buscador Google". Selecciona el texto y elige el estilo de

párrafo Título 1. Pulsa <Intro> para saltar a la siguiente línea. Elige también un color para el fondo de la página, para ello debes estar situado en la siguiente línea del título, porque de no ser así, lo que harás será resaltar el título.

6. Selecciona Insertar > Imagen …

pág. 38

7. En el cuadro de diálogo Propiedades de imagen pulsa en el botón Elegir archivo… para localizar y abrir el archivo logogoogle.jpg en la carpeta CursoLetramiweb\images.

8. En título emergente escribe: Google… El buscador, que es lo que se verá cuando te sitúes sobre la imagen con el ratón cuando la página se vea en el navegador.

9. En Texto alternativo introduce "Google". Esto sólo se verá cuando haya problemas y no se vea la imagen cargada. Esto puede ocurrir cuando cambias la imagen de lugar… se intenta localizar en el sitio que le indicaste, pero si no está muestra ese mensaje.

10. Activa la pestaña Enlace e introduce la dirección web: http://www.google.es. De esta forma el usuario podrá situarse en la página de inicio de Google haciendo clic en la imagen.

11. Centra la imagen 12. Pulsa en el botón Aceptar. 13. Tu página debe tener más o menos el siguiente

aspecto:

14. Sitúate debajo de la imagen y selecciona Insertar > Formulario … > Definir formulario …

pág. 39

15. En el cuadro de diálogo Propiedades del formulario introduce los siguientes valores:

Nombre del formulario: google URL de la acción: http://www.google.es/search.

Es la URL del script o programa que procesará el texto que el usuario ha tecleado en el formulario diseñado. Como puedes comprobar hay scripts que permiten invocarlos desde otros sitios web.

Método: get. Especifica el método visible (GET) u oculto (POST) que utiliza el formulario para enviar los datos. Se elige uno u otro según lo requiera el programa que va a recibir esta información. En este caso debe ser GET para que funcione.

16. Clic en el botón Aceptar. Observa que el formulario aparece en la página destacado con un marco de borde punteado. Si es necesario reeditar sus propiedades haz clic derecho sobre el formulario y selecciona Propiedades de Formulario…

17. A continuación vamos a situar los elementos del formulario. Haz clic dentro del formulario para que el cursor se sitúe parpadeando dentro del recuadro del formulario. Teclea "Introduce el texto de búsqueda". Pulsa <Intro> para situarte en la siguiente línea.

18. Elige Insertar > Formulario > Campo de formulario.

19. En el cuadro de diálogo Propiedades del campo del formulario pulsa en el botón Más propiedades. Define las siguientes propiedades:

Tipo del campo: Texto Nombre del campo: q Tamaño del campo: 50

20. Clic en el botón Aceptar.

pág. 40

21. Pulsa la tecla <Intro> para situarse en una nueva línea para insertar los botones del formulario. A continuación selecciona Insertar > Formulario > Campo de formulario.

22. En el cuadro de diálogo Propiedades del campo del formulario configura los parámetros:

Tipo del campo: Botón de envío. Nombre del campo: Enviar. Valor del campo: Enviar.

23. Clic en el botón Aceptar.

24. Selecciona de nuevo Insertar > Formulario > Campo de formulario. 25. En el cuadro de Propiedades del campo del formulario define los siguientes valores:

Tipo del campo: Botón de reestablecimiento. Nombre del campo: Borrar. Valor del campo: Borrar.

26. Pulsa en el botón Aceptar.

Este es el resultado:

pág. 41

ARCHIVOS ZIP o RAR

En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de una página web. Puede ser el caso de una colección de ficheros organizados en carpetas y subcarpetas, el instalador de un programa, un archivo ejecutable, etc. Para reducir el tamaño de la descarga conviene ofrecerlo empaquetado en un archivo ZIP o RAR.

Veamos los pasos a seguir:

Seleccionamos el o los archivos con el ratón los archivos o la/s carpeta que deseamos comprimir y presionamos el botón derecho del ratón.

En el menú contextual que aparece nos desplazamos hasta WinRAR y seleccionamos alguna de las dos primeras opciones:

Opción 1: Añadir al archivo…

Te lleva a un menú como el siguiente, donde ponemos el nombre del archivo comprimido que se creará en el mismo lugar donde estén los archivos origen. Lo más importante a saber de ese menú es:

1. Tipo de extensión: RAR o ZIP

2. Tipo de compresión: Normal, Máxima, Mínima, ... que nos permitirá comprimir más o menos los archivos

Igualmente con solo poner el nombre ya podemos aceptar para crear el archivo comprimido con la configuración más usual que contendrá toda la información seleccionada.

Opción 2: Añadir a "NombreDelArchivo.rar"

Esta opción nos creará directamente el archivo comprimido en el mismo lugar donde estén los archivos origen.

Así pues, hemos pasado de tener varios archivos y/o carpetas a tener un solo archivo:

pág. 42

ACTIVIDAD 6

1. Crea una nueva carpeta dentro de CursoLetramiweb que se llame descargas. 2. Crea un archivo comprimido RAR de tu carpeta images y guárdalo en la carpeta

descargas. 3. Crea una nueva página en KompoZer 4. Guarda la página con el título: "Mis Imágenes Comprimidas" y pon de nombre

imagenes.html en la carpeta CursoLetramiweb. 5. Escribe el siguiente contenido en la página web:

CREACIÓN DE ARCHIVOS COMPRIMIDOS Hoy en día es común que nuestros archivos almacenados en nuestra computadora viajen de un lugar a otro, de una computadora a otra, de un correo electrónico a otro, lo que sucede comúnmente con las fotografías que queremos compartir con amigos o familiares… Los archivos comprimidos cumplen una función imprescindible en este aspecto, ya que nos permite disminuir el tamaño de lo que queremos compartir, y además podemos compartir varios archivos en uno, sin necesidad de andarlos pasando por separado… En ocasiones puede interesar ofrecer la descarga de un documento o archivo al visitante de una página web. Puede ser el caso de una colección de ficheros organizados en carpetas y subcarpetas, el instalador de un programa, un archivo ejecutable, etc. Para reducir el tamaño de la descarga conviene ofrecerlo empaquetado en un archivo ZIP o RAR.

6. Selecciona el título inicial: “CREACIÓN DE ARCHIVOS COMPRIMIDOS” y en la lista de Formatos selecciona Título 1.

7. Cambia el tipo de letra del texto que has escrito y el color de fondo.

8. Busca en Google imágenes referentes a archivos comprimidos. Intenta localizar una referente a Winzip y otra a Winrar.

pág. 43

9. Pincha en la imagen u con el botón derecho elige Guardar como...

10. Guarda las imágenes con un nombre relacionado a la imagen que se guarda.

11. Comprime el archivo de texto y las imágenes, eligiendo una de las formas vistas.

12. Pon de nombre al fichero que comprimes Comprimidos.rar

13. Ahora vamos a situar el enlace al archivo RAR que has creado. Para ello haz clic al final del documento y escribe: “Descarga estas imágenes en tu equipo (35,2 Kb)”

pág. 44

14. Pincha y arrastra para seleccionar el texto anterior y pulsa en el botón Enlace.

15. En el cuadro de diálogo Propiedades del enlace pulsa en el botón Elegir archivo…

16. En el cuadro Abrir archivo HTML despliega la lista Tipo: y selecciona la opción Todos los archivos para que se muestren todos los tipos de archivos en lugar de sólo los *.HTML. En la lista Buscar en: debes desplegar esta lista para situarte en la carpeta CursoLetramiweb\descargas.

17. Selecciona el archivo *.rar y pulsa en el botón Abrir.

18. Observa que tras esta operación en el cuadro Propiedades del enlace se muestra como ubicación del enlace: "descargas/ Comprimidos.rar".

19. Clic en el botón Aceptar para terminar el enlace. Para guardar los cambios pulsa en el botón Guardar.

20. Este es el resultado aproximado:

pág. 45

DOCUMENTOS PDF EN LA WEB

En un sitio web es frecuente poner a disposición de los usuarios documentos en formato PDF para la consulta de información. Ejemplo: los boletines oficiales. Las ventajas que ofrece este tipo de archivo son:

Se puede abrir con distintas aplicaciones de software gratuito. Es accesible desde cualquier plataforma: Windows, Linux, Mac, etc. El documento PDF tiene un tamaño más reducido que el original. Admite la búsqueda fácil de información entre sus páginas. Tiene una presentación idéntica e independiente del dispositivo de visualización

(pantalla) y de impresión (impresora). Permite proteger el contenido del documento frente a terceros.

ACTIVIDAD 7

Primero vamos a crear una carpeta llamada pdf dentro de nuestra carpeta CursoLetramiweb.

Accede a la siguiente página web: http://thales.cica.es/rd/Recursos/rd99/ed99-0574-02/nutricion_dos.htm

Después vamos a crear un documento en PDF, para lo que debes abrir OpenOffice .WRITER y copiar el texto:

Guarda el documento con el nombre alimentación.odt Guarda también la imagen en la carpeta images con el nombre de nutrición.jpg. Modifica el documento alimentación.odt: dale formato al texto e inserta la imagen

nutrición.jpg con ajuste paralelo y muévela para que quede a la derecha del texto.

pág. 46

A la segunda parte del texto, ponle el siguiente formato:

Da un color de fondo a la página. Inserta un encabezado con tu nombre y un pie de página con el número de página. Guarda los cambios. El documento debería verse así:

Una vez guardado el documento, selecciona la opción Archivo > Exportar en formato PDF…

En el cuadro Exportar selecciona la carpeta CursoLetramiweb\pdf en la lista Guardar en. Teclea alimentación en el Nombre del PDF y haz clic en el botón Guardar.

Se muestra el cuadro Opciones de PDF donde es posible configurar ciertos parámetros del PDF resultante. En este caso aceptamos las opciones por defecto y pulsamos en el botón Exportar.

pág. 47

Si utilizas el explorador de archivos podrás encontrar el archivo alimentacion.pdf dentro de la carpeta CursoLetramiweb\pdf. Si haces doble clic sobre él se abrirá el lector PDF por defecto mostrando su contenido.

Seleccionamos todo el texto y lo copiamos en un nuevo documento de Writer y le quitamos el formato para que podamos emplear el texto en KompoZer.

Guárdalo con el nombre alimentación sin formato.odt. Abre un nuevo documento en KompoZer. Guarda la página con el título La alimentación de las plantas y de nombre

plantas.html en la carpeta CursoLetramiweb. Pega el texto del documento alimentación sin formato en tu página web. Pon el enlace correspondiente en la primera línea.

Cambia el formato de la página web: formato Título1, Título2, cambia el color del texto, del enlace, del fondo de la página, etc.

pág. 48

Inserta la imagen descargada de la planta y ponle texto emergente. Añade como última línea “Ver más información sobre la alimentación de las plantas en

PDF – (Pon aquí el tamaño del archivo PDF)”, selecciónala y haz clic en el botón Enlace de la barra de herramientas.

En el cuadro Propiedades del enlace pulsa en el botón Elegir archivo…

En el cuadro de diálogo Abrir archivo HTML despliega la lista Buscar en para mostrar el contenido de la carpeta CursoLetramiweb\pdf. Despliega la lista Tipo y selecciona Todos los archivos. De esta forma se mostrará el archivo alimentacion.pdf que has creado en apartados anteriores. Clic sobre este archivo y pulsa en Abrir.

En el cuadro Propiedades del enlace observa que en Ubicación del enlace aparece la ruta al PDF: pdf/alimentacion.pdf.

En el área Destino marca la opción El enlace se abrirá y en la lista elige la opción en una nueva ventana.

Guarda los cambios de la página plantas.html mediante Archivo > Guardar.

El resultado será:

pág. 49

IMÁGENES DESDE SITIOS WEB

Vamos a seleccionar imágenes desde un sitio web y las vamos a integrar en nuestra página web sin necesidad de descargarla.

ACTIVIDAD 8

1. Abre un nuevo documento en KompoZer.

2. Guarda la página con el título Mi imagen en Flickr y de nombre flickr_image.html en la carpeta CursoLetramiweb.

3. Escribe en la página web, por ejemplo "Mi imagen en Flickr", con formato Titulo 1.

4. En el cuadro Título de la página introduce como título: "Imágenes en Flickr" y pulsa en el botón Aceptar.

5. Visitamos el sitio web Flickr (http://www.flickr.com).

6. En el buscador introducimos alguna palabra referente al tipo de foto que estamos buscando, por ejemplo: flores.

7. Sobre cualquiera de las imágenes que nos guste, pulsamos sobre ella con el botón derecho del ratón y seleccionamos la opción “Copiar la ruta del enlace”

8. Sitúate debajo del título de tu página web y haz clic sobre el botón Imagen para insertar una imagen en el documento.

9. En el cuadro de diálogo Propiedades de la imagen haz clic derecho sobre el cuadro de texto Ubicación de la imagen y selecciona Pegar.

pág. 50

10. Esta tarea pegará la URL absoluta de la imagen que al cabo de unos segundos se mostrará en la Vista preliminar.

11. Introduce el Texto alternativo. Por ejemplo: "Flores".

12. Clic en el botón Aceptar.

13. Pulsa en el botón Guardar y haz clic en el botón Navegar de la barra de herramientas para visualizar el resultado en el navegador Firefox.

14. Este es el resultado:

pág. 51

PRESENTACIONES DESDE SITIOS WEB

Vamos a seleccionar presentaciones desde un sitio web y las vamos a integrar en nuestra página web sin necesidad de descargarla.

ACTIVIDAD 9

1. Abre un nuevo documento en KompoZer.

2. Guarda la página con el título La Web 2.0 y ponle de nombre de web20.html en la carpeta CursoLetramiweb.

3. Escribe un Título en la página web, por ejemplo " La Web 2.0", con formato Titulo 1.

4. En el cuadro Título de la página introduce como título: "La Web 2.0" y pulsa en el botón Aceptar.

5. Visitamos el sitio web Scribd (http://www.scribd.com).

6. En el buscador introducimos alguna palabra referente al tipo de presentación que estamos buscando, por ejemplo: web 2.0.

7. Nos aparecerá una lista con los documentos encontrados. En la sección Documentos elegimos uno que nos guste para verlo:

pág. 52

8. En el menú de la izquierda, pinchamos sobre el botón “Insertar” para ver el código que necesitamos, donde pinchamos sobre el botón COPY de la sección EMBED.

8. Sitúa el cursor debajo del título La Web 2.0. y a continuación elige Insertar > HTML

9. En la ventana Insertar HTML haz clic en el cuadro de texto y a continuación haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

10. Clic en el botón Aceptar.

11. Pulsa en el botón Guardar y haz clic en el botón Navegar de la barra de herramientas para visualizar el resultado en el navegador Firefox.

pág. 53

12. Este es el resultado:

VIDEOS DESDE SITIOS WEB

Vamos a seleccionar videos desde un sitio web y los vamos a integrar en nuestra página web sin necesidad de descargarlos.

ACTIVIDAD 10

1. Abre un nuevo documento en KompoZer. 2. Guarda la página con el título YouTube y ponle de nombre videos.html en la carpeta CursoLetramiweb. 3. Escribe un Título en la página web, por ejemplo "Vídeos de YouTube", con formato Titulo 1. 4. En el cuadro Título de la página introduce como título: "Vídeos de YouTube" y pulsa en el botón Aceptar. 5. Visitamos el sitio web YouTube (http://www.youtube.com). 6. En el buscador introducimos alguna palabra referente al tipo de vídeo que estamos buscando, por ejemplo: magia y pulsamos en buscar.

pág. 54

7. Pinchamos sobre cualquiera de los vídeos encontrados. Debajo del vídeo pulsamos el botón <Insertar> para que se nos desplieguen las opciones del vídeo. Seleccionamos todo lo escrito en el cuadro y lo copiamos (Control + C).

8. En tu página web, sitúate debajo del título y a continuación elige Insertar > HTML 9. En la ventana Insertar HTML haz clic en el cuadro de texto y a continuación haz clic derecho para seleccionar Pegar. Clic en el botón Insertar.

10. Clic en el botón Aceptar. 11. Pulsa en el botón Guardar y haz clic en el botón Navegar de la barra de herramientas para visualizar el resultado en el navegador Firefox. 12. Este es el resultado:

pág. 55

ACTIVIDAD 11

Sitio web: estructura y navegación ¿Qué es un sitio web? Un sitio web (en inglés: website) es un conjunto de páginas html relacionadas entre sí por hiperenlaces, gestionadas por una única entidad o persona, accesibles desde Internet a partir de una dirección URL de su página índice (index) y con una unidad de contenido y de estilo gráfico. Incluye textos, imágenes, archivos de audio, vídeo y enlaces a otros sitios web. Normalmente no se diseña una página web aislada sino más bien un sitio completo donde a partir de una página principal o índice se enlazan el resto de páginas.

La estructura de archivos y carpetas Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y archivos. Cuando el número de ficheros es considerable, resulta muy útil ubicarlos en carpetas para facilitar su localización y edición. Existen múltiples posibilidades de organizar el sistema de ficheros.

Con carácter general se proponen un modelo basado en la organización por tipos de archivos.

Las páginas HTML se guardarán en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las subcarpetas correspondientes.

Esta organización está especialmente pensada para un sistema de páginas HTML que comparten recursos: imágenes, hoja de estilo, javascript, etc.

Las principales carpetas que utiliza son:

audios: archivos de audio mp3.

css: hojas de estilo css.

descargas: archivos zip, exe, etc que se ofrecen para descarga.

imagenes: imágenes jpg, gif o png.

pdf: documentos pdf.

pág. 56

scripts: archivos js con código javascript reutilizable.

swfs: archivos con animaciones flash (*.swf).

vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv

Los nombres de carpetas y archivos

Con intención de evitar errores es interesante respetar las siguientes normas cuando se asigna nombre a carpetas o archivos:

1. El nombre asignado estará formado por caracteres alfanuméricos: a-z y 0-9

2. No debe contener caracteres no alfanuméricos, signos de puntuación, espacios en blanco, caracteres acentuados, eñes, etc.

3. Los únicos caracteres no alfanuméricos permitidos son el subrayado _ y el guión –

4. No debe superar los 20 caracteres.

5. Utilizar siempre letras minúsculas aunque se admitan mayúsculas. Hay servidores que distinguen entre mayúsculas y minúsculas. Esto significa que la página INDEX.html no es la misma que la página index.html.

6. Para las páginas HTML utilizar siempre la extensión: *.html aunque se admita la *.htm.

7. Reserva el nombre index.html para la página que deseamos se muestre por defecto cuando el usuario navega hasta la carpeta sin indicar un archivo html concreto. ¿Cómo crear un sitio web con Kompozer? Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Ésta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP.

A continuación se detalla el procedimiento para convertir la carpeta CursoLetramiweb en un sitio web local utilizando Kompozer.

1. Abre Kompozer

2. Elige Ver > Mostrar/Ocultar > Administrador de sitios que es el panel lateral o bien pulsa directamente la tecla de función <F9>

pág. 57

3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta miweb. Clic en el botón Aceptar.

Si quieres eliminar el sitio, en la anterior ventana viene el botón correspondiente para Eliminar sitio.

5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono “+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas y archivos que contiene.

6. En la parte superior derecha del Administrador se dispone de botones que permiten:

Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es útil cuando se añaden elementos utilizando el explorador de archivos de Windows o bien cuando se crea una página HTML nueva.

pág. 58

Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta seleccionada en el árbol del Administrador de sitios. 3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta seleccionado.

Eliminar. Elimina el archivo o carpeta seleccionada.

7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css, descargas, pdf, plantillas, scripts, swf y videos.

8. A continuación vamos a crear una página que haga de índice para nuestro nuevo sitio web.

9. Seguiremos el procedimiento habitual: Archivo > Nuevo. O bien si está la página (sin título) abierta, nos situamos en ella.

10. Vamos a guardar la página, recuerda que la primera vez te preguntará para que escribas el título de la misma que se visualizará en la barra de título de la página al verla a través del navegador.

11. Pondrás como título Mi página principal y la guardarás en la carpeta CursoLetramiweb con el nombre index.html

12. Escribe “Mi página principal”, selecciona el texto y elige como formato Título 1, elige un color de letra, un tipo de letra, color de fondo o resaltado o segundo plano y lo centras.

pág. 59

13. Pulsa la tecla <intro> para situarte en la siguiente línea y pulsa en el botón Viñetas de la barra de herramientas de Formato.

14. Crea una tabla de 10 filas por 2 columnas y que no se vea el borde (0).

15. Escribe en la primera columna los nombres de las actividades anteriormente realizadas

ACTIVIDAD 1: Federico García Lorca ACTIVIDAD 2: Glosario Educativo ACTIVIDAD 3: Escribe tu cuento ACTIVIDAD 4: Demografía en España ACTIVIDAD 5: Buscador Goooogle ACTIVIDAD 6: Archivos comprimidos ACTIVIDAD 7: Las plantas ACTIVIDAD 8: Imagen en Flickr ACTIVIDAD 9: La Web 2.0 ACTIVIDAD 10: Vídeo de YouTube

16. En la segunda columna, inserta la imagen correspondiente y para aquellas que no hemos descargado ninguna, busca una por Internet.

pág. 60

17. Modifica el tamaño de las imágenes para que más o menos todas tengan el mismo tamaño.

18. Seleccionar la primera columna y pulsar el botón derecho del ratón y escoger Propiedades de Celda de tabla …

19. A continuación se abre la ventana de Propiedades de la tabla abierta en la pestaña Celdas, ya es solo cuestión de alinear el contenido en la Vertical en Medio y en la Horizontal Centrada, y Aplicar y Aceptar.

pág. 61

20. Finalmente quedaría centrar el texto, pulsando en el botón de Centrar de la Barra de Formato 2, volviendo a seleccionar la primera columna si es que la hubieras deseleccionado. Guarda las modificaciones.

21. Vas a seleccionar las filas impares haciendo clic sobre cada una de las celdas de dichas filas manteniendo pulsada la tecla control. Una vez seleccionadas pulsa el botón derecho del ratón y elige Color de fondo de la tabla o celda… y elige un color para las mismas.

22. Cambia también el color de las celdas de las filas pares, cambia el tipo de texto, color del texto y tamaño del texto introducido en las celdas o que se pueda introducir en el resto de las celdas de la primera columna.

pág. 62

23. Cambia el color de fondo de la página.

Por ahora, más o menos tu página tendría un similar aspecto:

24. A continuación vamos a crear los enlaces tanto en el texto como en la imagen. Para el caso del texto se abrirá en la misma ventana pero para el caso de la imagen se abrirá en una ventana nueva. Cada texto e imagen será enlazado a la página que corresponde, y que se hizo en su momento y que recuerdo:

Glosario Educativo glosario.html Escribe tu cuento escribe.html Demografía en España poblacion.html Buscador Goooogle google.html Archivos comprimidos imagenes.html Las plantas plantas.html Imagen en Flickr flickr_image.html La Web 2.0 web20.html Vídeo de YouTube videos.html

25. Para ello, recuerda: selecciona el texto, pulsa en el botón Enlace de la barra de Redacción.

26. Pulsar en el botón de la carpeta para elegir la carpeta miweb y elegir el fichero Lorca.html, y Abrir y Aceptar.

pág. 63

27. Para la imagen de Federico García Lorca se hará similar pero indicando que se va a abrir en una nueva ventana dicho enlace.

28. Seleccionas la imagen y doble clic sobre ella, o bien, seleccionas la imagen y pulsas en el botón Enlace. En la ventana Propiedades de la imagen te sitúas en la pestaña Enlace y pulsas en el botón carpeta para elegir la carpeta miweb, localizas el fichero Lorca.html y Abrir y Aceptar.

29. Ahora tienes que hacer que se abra en una ventana diferente. Selecciona la imagen y fíjate en la barra de estado, pulsa sobre <a> y con el botón derecho sobre dicha etiqueta elige Propiedades avanzadas.

pág. 64

30. Repite los pasos 25 a 29 para hacer los siguientes enlaces.

31. Modifica el color de los enlaces utilizados, manteniendo dicho color para el resto de los enlaces que modificaste de color en otras páginas, porque de no ser así la persona que navegue en tu página se puede hacer un lío sobre qué enlaces se han visitado o los que no se han visitado. Esto era en Formato Fondo y colores de la página

pág. 65

32. Vas a insertar una fila encima de la primera, para ello selecciona la primera fila, pulsa el botón derecho del ratón, Insertar tabla Fila superior.

33. Vuelve a seleccionar la primera fila insertada y botón derecho del ratón y elige Unir celdas seleccionadas.

34. Escribe tu nombre, lo centras, le cambias el color y modifícale el tamaño.

pág. 66

Por ahora, más o menos la página debe de verse parecida a la siguiente:

35. Busca en Google gifs animados de flechas

36. Pincha en el enlace y guarda alguna flecha indicativa a volver al menú principal que es nuestra página Index.html. Para ello pulsa el botón derecho sobre la flecha seleccionada y elige Guardar imagen como… y guárdala en la carpeta images, ponle de nombre volver.gif.

pág. 67

37. Abre la página Lorca.html, sitúate a la derecha del título e inserta la imagen guardada.

38. Modifica el título emergente y el texto alternativo.

39. Realizar el enlace en la imagen insertada a la página Index.html

pág. 68

40. Repite los pasos anteriores para el resto de las páginas que has realizado. Guarda todo y comprueba todos los enlaces.