Archivo de la etiqueta: web

Prueba sobre el uso de herramientas de la Web 2.0


Aquí tenéis la prueba sobre el uso de herramientas de la Web 2.0. ¡Mucha suerte!

 

Creación de página web con HTML. Provincias de Andalucía.


Para repasar para la próxima prueba de HTML, vamos a confeccionar una web con el aspecto que muestra la imagen de abajo.

provincias_andalucia

La página web tiene las siguientes características:

  • La web tendrá el título «Provincias andaluzas».
  • Se trata de mostrar una estética en la que predominen los colores blanco y verde.
  • En la parte superior, y sobre fondo verde, tenemos dos tipos de encabezados, y en la parte central, y en fondo blanco, el texto se escribe con letra más pequeña y en cursiva. Todas las frases estarán centradas.
  • Dividiendo las diferentes partes de la web aparecen rayas horizontales de color verde.
  • La web presenta una lista con los nombres de las ocho provincias de Andalucía, incluyendo enlaces a la página de la Wikipedia correspondiente a cada provincia. El hiperenlace se configurará en negrita, siendo de color blanco y no azul, como se configura por defecto. La lista estará centrada.
  • La web muestra también un panel de imágenes de las provincias andaluzas, realizado a partir de una tabla. Cada imagen tiene un tamaño de 150×150 píxeles, excepto las imágenes laterales, que se presentan con un tamaño de 200×300 píxeles. Cada imagen incluirá un texto alternativo con el nombre de la provincia, así como un hiperenlace a la web de la Wikipedia utilizado en la lista de arriba.
  • En la parte inferior y alineado a la derecha se mostrará el nombre del autor o autora, así como un enlace a nuestro blog. Este texto estará en cursiva y el enlace deberá configurarse de color verde, así como el nombre del autor o autora.

Publicación de página web


En una práctica anterior hemos creado una página web con el programa Kompozer.

Una vez confeccionado nuestro sitio web, si queremos que sea visible en la red, deberemos buscar un servidor donde alojarlo. Hay una oferta amplia de sitios que ofrecen alojamiento gratuito. De entre los que comprobado, me ha gustado Hostinger, ya que podemos publicar en poco tiempo nuestro trabajo y además no incluyen publicidad.

Una vez que entremos en la web de Hostinger tendremos que crear un nuevo usuario, seleccionando siempre el plan gratuito, con el que dispondremos de 2 GB de espacio.

Cuando ya tengamos un usuario, en nuestro tablero se podrá gestionar la subida de los archivos de nuestro sitio web. Hostinger ofrece un gestor de subida, pero no está disponible en el plan gratuito. Así, al hacer click en Acceso FTP nos proponen gestores FTP (File Tranfer Protocol), como FileZilla.

Al abrir FileZilla, hay que completar los datos de servidor, usuario, contraseña y puerto que nos muestra la pantalla de Acceso FTP de Hostinger.

Es muy importante que mantengamos en el servidor la estructura de carpetas configurada en nuestro equipo.

 

Edición de páginas web. Kompozer


Kompozer es un editor de páginas web de código abierto WYSIWYG, es decir, what you see is what you get. Esto hace que sea muy sencillo e intuitivo elaborar una página web, puesto que trabajaremos como si estuviéramos ante un procesador de textos.

Para trabajar este programa seguiremos los apuntes propuestos por el IES María de Molina. En los siguientes enlaces se pueden descargar tanto el pdf como los documentos e imágenes para realizar las actividades.

APUNTES DE KOMPOZER

DEFINICIONES DE MECANISMOS PARA LAS ACTIVIDADES

IMÁGENES PARA LAS ACTIVIDADES

Por último, si no tenemos instalado en Linux el programa, tendremos que ejecutar las siguientes órdenes en el terminal:

sudo apt-get install libatk1.0-0 libc6 libcairo2 libfontconfig1 libfreetype6 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk2.0-0  libidl0 libnspr4 libnss3 libpango1.0-0 libpng12-0 libstdc++6 libx11-6 libxft2 libxinerama1 libxrender1 libxt6 zlib1g

wget https://launchpad.net/ubuntu/+archive/primary/+files/kompozer-data_0.8%7Eb3.dfsg.1-0.1ubuntu2_all.deb

wget https://launchpad.net/ubuntu/+archive/primary/+files/kompozer_0.8%7Eb3.dfsg.1-0.1ubuntu2_i386.deb

sudo dpkg -i kompozer-data_0.8~b3.dfsg.1-0.1ubuntu2_all.deb

sudo dpkg -i kompozer_0.8~b3.dfsg.1-0.1ubuntu2_i386.deb

Para ponerlo en español hay que descargar este .xpi:
http://kompozer.sourceforge.net/l10n/langpacks/kompozer-0.8b3/
A continuación, abriendo KompoZer en inglés, en Tools, abrir Add-ons y allí eligimos el .xpi descargado.

Finalmente, para alojar gratuitamente nuestro sitio web podemos usar el servicio que ofrece www.hostinger.es,

El programa FileZilla nos servirá para subir los archivos que componen nuestro sitio web al servidor.

HTML y CSS


El lenguaje HTML consiste en un conjunto de etiquetas predefinidas que el navegador web interpreta a la hora de generar una página para que sea visualizada.

html

Asimismo, el CSS es el lenguaje utilizado para definir el modo de presentación del código HTML de una página web.

En la red podemos encontrar multitud de recursos sobre estos lenguajes. Como material complementario he seleccionado unos sitios que me han parecido interesantes.

css_html

En la página web de Alexander Iribar,  se presenta la información paso a paso y con aplicaciones prácticas. Es un buen sitio para aprender los conceptos fundamentales. Los puntos a trabajar son:

  1. Cómo crear una página web.
  2. Algunos componentes fundamentales.
  3. Información complementaria.
  4. CSS: Cascade style sheet.

Además en estos dos enlaces de la web HTML.net se encuentran alojados unos cursos básicos sobre estos lenguajes:

  1. Tutorial HTML.
  2. Tutorial CSS.