Archivo de la etiqueta: página

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.

 

Encabezado y pie de página en posición fija en CSS


En esta actividad vamos a ampliar el ejercicio realizado anteriormente que se resolvió en una entrada de este blog. Se exponían los ingredientes de la receta de un bizcocho, y ahora queremos añadir una serie de párrafos en los que se explique la preparación, de modo que el tamaño total del contenido obligue a hacer scroll vertical.

Además, vamos a disponer un elemento <div> como encabezado de la página, con un fondo azul oscuro y situado a modo de barra superior en la página. Se mantendrá en esa posición fija incluso cuando el usuario haga scroll.

También se tendrá que añadir otro elemento <div> que corresponda al pie de página, con un fondo de color verde oscuro y anclado en la parte inferior de la página.

Asimismo, para que no haya espacio entre los elementos, se eliminará el margen, estableciéndolo en 0 píxeles.

Finalmente, se tendrá que establecer un margen interior para el contenido, con el objetivo de que no quede tapado por el encabezado o el pie de página.

El resultado final aparece en la imagen de abajo, así como el código HTML y CSS.

act9p83

htmlact9p83i

htmlact9p83ii

cssact9p83i

cssact9p83ii

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.

Creación de página web


El alumnado de 4º de Diversificación realizará esta práctica para evaluar su aprendizaje en la unidad didáctica dedicada a creación de páginas web. Se trabajará con el editor de páginas web NVU.

Así, deberéis hacer una web sobre cualquier tema con las siguientes condiciones:

a) La web tendrá como mínimo cinco páginas.

b) Cada página mostrará al menos una imagen.

c) La web incluirá tres hiperenlaces relacionados con el tema de la misma.

d) Las páginas de tu sitio web estarán enlazadas entre sí.

Recuerda que debes crear una carpeta que contenga todos los archivos html. Nombra esta carpeta como WEBAPELLIDOS. La página principal debe tener el nombre de index y te recomiendo que las imágenes las guardes en una subcarpeta de recursos. Una vez terminado, comprime la carpeta y envíala a la dirección de correo josempanadero@gmail.com

Los criterios de evaluación son los siguientes:

– Contenido (redacción propia y originalidad). 4 puntos.

– Formato……………………………………………….. 3 puntos.

– Inclusión de imágenes ……………………………. 1 punto.

– Enlaces externos……………………………………. 1 punto.

– Enlace entre páginas ………………………………. 1 punto.

Finalmente, si queréis publicar vuestra web, el siguiente enlace os puede ser de utilidad: http://www.awardspace.com

Alojamiento de página web.


En 4º de la ESO, el alumnado está elaborando su propia web. Una vez diseñada tendremos que alojarla en un servidor para que pueda visualizarse.

Para alojar una página web existen varias opciones en la red. Una de ellas es http://www.bravenet.com. Los pasos del proceso son los siguientes:

1. Entrar en www.bravenet.com.

2. Registrarse (JOIN BRAVENET).

3. Una vez nos hemos registrado seleccionar “GET FREE HOSTING”.

4. Activar la opción “BUILD A NEW WEBSITE” y “USE A SUBDOMAIN”.

5. Subir los archivos en “FILE MANAGER” seleccionando “UPLOAD FILES”.

6. En otras nuevas sesiones entramos en “WEBSITES” y “FILE MANAGER” para subir o gestionar otros archivos.

Práctica de creación de página web con NVU.


El alumnado de 4º de la ESO realizará esta práctica para evaluar su aprendizaje en la unidad didáctica dedicada a creación de páginas web.

Así, deberéis hacer una web sobre cualquier tema con las siguientes condiciones:

a) La web tendrá como mínimo cinco páginas.

b) Cada página tendrá enlaces internos para subir y bajar al inicio y al final de la página.

c) Cada página mostrará al menos una imagen (150 píxeles de ancho y alto).

d) La web incluirá tres hiperenlaces relacionados con el tema de la misma.

e) Las páginas de tu sitio web estarán enlazadas entre sí.

f) La web debe incluir un mapa de imagen.

g) La web tendrá al menos dos vídeos, insertando también enlaces a los mismos.

h) Deberás publicar la web en http://www.bravenet.com.

Todas las tablas tendrán de ancho 700 píxeles.

Los criterios de evaluación son los siguientes:

– Contenido (redacción propia y originalidad). 2 puntos.

– Formato……………………………………………….. 1 punto.

– Inclusión de imágenes ……………………………. 1 punto.

– Enlaces internos…………………………………….. 1 punto.

– Enlaces externos……………………………………. o´5 puntos.

– Enlace entre páginas ………………………………. 1 punto.

– Mapa de imagen …………………………………….. 1´5 puntos.

– Inclusión de vídeos ……………………………….. 1 punto.

– Publicación ………………………………………….. 1 punto.