Archivo del Autor: josepanadero

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

 

Anuncios

Aplicación con App Inventor


App Inventor es una herramienta muy útil para crear aplicaciones en Android.

Mediante un entorno gráfico muy intuitivo, podemos programar sin tener conocimientos avanzados en programación. Por ello, es una alternativa recomendable para iniciar al alumnado en la programación.

En este blog ya se ha tratado esta herramienta con anterioridad en otra entrada.

Comparto una  aplicación que he creado con App Inventor, denominada Calcula Descuento, que permite calcular la cantidad rebajada y el precio final de un producto. Para ello, se introducirá el precio inicial y el porcentaje de descuento, obteniendo la aplicación la cantidad total rebajada y el precio final.

Para descargarla del Play Store, totalmente gratuita, haz click en este enlace:

App Calcula Descuento

 

 

 

Prueba práctica de Writer


Vamos a realizar la prueba práctica de Writer. Para ello, debes completar las siguientes tareas:

Tarea 1: Abre un documento nuevo en Writer y guárdalo como EXAMEN_WRITER_NOMBRE_APELLIDOS.

Tarea 2: Copia el texto que aparece en este archivo y pégalo en tu documento. Ten en cuenta, que la información que aparezca en el texto entre paréntesis son aclaraciones, y no deberán formar parte del documento final. El texto en tu documento debe tener el siguiente formato:

  • Letra Califa de 12 puntos.
  • Margen izquierdo y derecho de 2 cm.
  • Alineación justificada.
  • Títulos con letra Califa 16 puntos en negrita.

Tarea 3: Busca alguna imagen relacionada con el texto e insértala en el documento, con un borde de color azul de 4 puntos de anchura.

Tarea 4: Incluye en el documento las fórmulas que aparecen entre paréntesis en el texto que has descargado.

Tarea 5: El texto tendrá una sangría de primera línea de 2 cm. en cada uno de los párrafos. Además, el espaciado encima del párrafo será de 1 cm y el  espaciado debajo del párrafo de 1 cm. Asimismo, los párrafos tendrán un interlineado simple.

Tarea 6: En el apartado 3 del texto que te has descargado aparecen una serie de libros, especificando título, autor, editorial y año de publicación. Toda esta información se tendrá que presentar en una tabla que tendrás que insertar en tu documento. La tabla tendrá 4 columnas y seis filas, fondo amarillo y tipo de letra Califa 10 de color azul oscuro. La información en cada celda aparecerá centrada tanto en vertical como en horizontal. Por último, el borde exterior y todas las líneas interiores de la tabla serán también de color azul oscuro, con un estilo de línea de un punto.

Tarea 7: Inserta en el documento un encabezado y un pie de página. En el encabezado se tiene que incluir el texto: “Prueba de Writer. Nombre y apellidos”. Este texto se presentará en tipo de letra Califa, tamaño 10, y estará alineado a la izquierda. En el pie de página, aparecerán los campos número de página a la derecha y la fecha a la izquierda.

Tarea 8: El documento creado lo exportaréis directamente a pdf. A continuación me lo enviaréis a mi cuenta de correo electrónico.

 

 

 

 

Transparencia en colores de fondo en CSS


Vamos a realizar un ejercicio en el que se superpongan tres cuadros de diferentes colores para apreciar las mezclas de los mismos. Para ello necesitamos utilizar la propiedad CSS background-color haciendo uso de rgba, en el que configuramos los valores para rojo, verde y azul y especificamos un valor para la transparencia del tono, que estará comprendido entre 0 y 1.

Para seleccionar un tono es recomendable visitar cualquiera de las diferentes webs que existen en la red para obtener la combinación rgb.

Así, para obtener una salida como la que se ve más abajo, se pueden apreciar a continuación los códigos HTML y CSS utilizados para ello.

act8p83

htmlact8p83

cssact8p83

Imágenes de fondo en CSS


Para incluir imágenes de fondo en CSS utilizaremos las propiedades background-image para indicar la ruta de la imagen, background-position para establecer la alineación vertical y horizontal de la imagen y background-repeat.

El uso de background-repeat se debe a que si la imagen es más pequeña que el elemento se repetirá por defecto, horizontal y verticalmente hasta ocupar todo el espacio disponible. Si queremos modificar este comportamiento, se puede hacer con los valores no-repeat (no se repite), repeat-x (se repite horizontalmente) y repeat-y (se repite verticalmente).

Asimismo, con la propiedad background-size especificaremos el tamaño de la imagen.

De esta forma hemos diseñado una web con imágenes de la Mezquita de Córdoba, creando tres bloques <div> de 200px de ancho y 200px de alto. Hemos asignado a cada uno de los bloques una imagen de fondo de 50×50 y un borde distinto. Además, se cumplen los siguientes requisitos:

  • En el primer bloque la imagen de fondo no se repite y está centrada tanto vertical como horizontalmente.
  • En el segundo bloque, la imagen se repetirá horizontalmente y estará situada en la parte inferior.
  • En el tercer bloque, la imagen se repetirá verticalmente y se situará a la derecha.

El resultado es el que aparece en la imagen de abajo.

act1p79

El código HTML y CSS para obtener este resultado se muestra a continuación.

htmlact1p79

cssact1p79