3.1. El editor Bluefish
Las páginas web se crean utilizando el lenguaje HTML. Pero, ¿qué herramientas vamos a utilizar?
Aunque podemos utilizar un simple documento de texto para escribir HTML, es preferible utilizar algún editor que nos ayude a realizar esta tarea.
En nuestro caso, vamos a utilizar el editor de código Bluefish.
En esta página os voy a enseñar todo lo necesario, para poder utilizar esta aplicación.
1. Conoce el editor Bluefish
El editor Bluefish será una herramienta muy importante en el desarrollo de vuestro trabajo final. Es fundamental conocerla, para poder aprovechar todas sus características.
En la siguiente imagen interactiva se explica, las opciones más importantes, aquellas vais a necesitar para desarrollar vuestro trabajo.
El contenido se ha organizado en los siguientes apartados:
- Explicación de la pantalla principal del editor Bluefish.
- Opciones del Menú principal.
- Opciones de la pestaña Estándar, de la barra de herramientas HTML.
- Opciones de la pestaña HTML 5, de la barra de herramientas HTML.
- Opciones de la pestaña Lista, de la barra de herramientas HTML.
2. Practica con el editor Bluefish
En esta actividad vas a trabajar de forma individual.
En la parte inferior de la siguiente imagen están los nombres, en color rojo, de los diferentes elementos del editor. Pincha y déjalo caer en su zona correspondiente.
Si no te sale bien a la primera, vuelve a intentarlo.
Lumen dice ¿Te puedo ayudar?
Si no recuerdas dónde van estos elementos, te recomiendo que veas el apartado anterior 4. Conoce el editor Bluefish.
3. Buscando en el editor
Esta actividad debéis de hacerla en parejas.
Antes de empezar debéis acceder al editor Bluefish. Recordad que lo debéis tener instalado en vuestro ordenador, de no ser así comentárselo a vuestro profesor o profesora.
Como estamos trabajando en parejas, yo tendría en un ordenador abierto el apartado 1. Conoce el editor Bluefish de esta página, para ir viendo las diferentes opciones del editor. En otro ordenador tendría abierta la aplicación Bluefish para ir haciendo las actividades que me piden.
Ahora, vais a realizar las siguientes actividades:
- Abrir un nuevo documento.
- Guardar el documento con el nombre ejemplos.html
- Hacer un Inicio rápido de un documento. Debéis desactivar la opción Abrir en un documento nuevo.
- Incluir las etiquetas de párrafo.
- Añadir las etiquetas de una lista ordenada.
- Por último, añade las etiquetas de un elemento de lista.
- Vuelve a guardar el documento y previsualiza el resultado.
¿Qué ha ocurrido?, en el navegador solo se ve 1.
Claro, nosotros hemos incluido las etiquetas, pero nada de contenido.
No os preocupéis, esta actividad era para repasar nuestro editor. Del contenido, nos ocuparemos en las próximas páginas.
4. Hacemos una infografía
En esta actividad vuestro grupo debe hacer una infografía que muestre información sobre la aplicación Bluefish.
Podéis utilizar la información recopilada en la actividad anterior.
Los pasos a seguir para elaborar una infografía, pueden ser:
- Elegir el tema que queremos explicar. En vuestro caso es la aplicación Bluefish.
- Seleccionar la información que queremos mostrar en la infografía. Podéis utilizar la información recopilada en la actividad anterior.
- Organiza el contenido que vayáis a incluir, de forma que todo quede lo mejor posible.
- Crea la infografía utilizando la herramienta que más te guste. Por ejemplo:
- Papel o cartulina, siempre puede ser una opción a tener en cuenta.
- Utilizando una herramienta digital. Por ejemplo, procesador de texto, Canva, Genially, etc.
¿Necesitas ayuda para realizar la infografía?
Dentro de nuestra guía para la competencia digital encontrarás información sobre la infografía.
Lumen dice ¿Quieres ver un ejemplo?
Si necesitas un ejemplo que te sirva de inspiración, quizás te pueda ayudar la siguiente infografía:
Puedes ver el recurso haciendo clic aquí.
Obra publicada con Licencia Creative Commons Reconocimiento No comercial Compartir igual 4.0