Semana Santa en Fuentes de Ebro

El pasado viernes 23 de marzo comenzó la celebración de la Semana Santa en Fuentes de Ebro, que se prolongará hasta el próximo domingo 1 de abril.
El municipio tiene una larga tradición en la celebración de esta festividad, a continuación incluimos el programa de actos de este año.
 

Comenzamos con Javascript

JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con  funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también usado en muchos entornos sin navegador, tales como   node.js o Apache CouchDB. Es un lenguaje script multi-paradigma, basado en prototipos,  dinámico, soporta estilos de programación funcional, orientada a objetos e imperativa.

 

Ejemplo en sublime programas hechos con Javascript.

 

Ejemplo de como se ven esos programas en un navegador.

Los peregrinos a su paso por Fuentes de Ebro

¿Sabías qué...

tenemos dos rutas de peregrinaje que pasan por nuestra localidad?

La primera es El Camino Ignaciano, ruta que recorrió en el año 1522 San Ignacio de Loyola, desde Loyola hasta Manresa. 

La segunda, es la ruta de peregrinos más conocida a nivel internacional tanto por su carácter religioso como cultural, El Camino de Santiago. 

Almacenamiento web

A lo largo de esta semana, todos los miembros de informática del taller de empleo hemos estado trabajando en el diseño y desarrollo de páginas web. El tema de la página web fué propuesta por otro compañero. Una vez que terminamos de diseñar la página la hicimos en HTML y CSS, para poder visualizarlas las almacenamos en una plataforma llamada Web Hosting. Las páginas también estan adaptadas a versión móvil para que se puedan ver los contenidos ajustados al tamaño de estos dispositivos.

 

Animaciones CSS3

Hemos aprendido a como crear animaciones de objetos con CSS3

En este video podemos ver como se mueven los objetos.

Propiedad FLEXBOX

Flexbox es una nueva propiedad que se ha creado específicamente para crear
sitios web. Si recordáis bien los elementos flotantes os dije que se crearon
para poner texto alrededor de una imagen. Pues bien esta nueva propiedad
nos va a permitir crear autenticas páginas profesionales. Al final seremos
capaces de hacer una autentica página web real.

Resumiendo Flexbox es un conjunto de propiedades que nos permiten distribuir nuestros elementos de una forma flexible para crear mejores layouts. Para utilizar flexbox necesitamos un contenedor padre que tenga elementos hijos, estos últimos son los elementos que serán flexibles.

Flexbox se divide en 2 grupos de propiedades:

1. Propiedades para los elementos padre.
2.  Propiedades para los elementos hijo

Propiedades del contenedor padre (El primero es el que viene por defecto):

• display:flex; Nos permite habilitar que los elementos hijos sean flexibles.
• flex-direction:
• row | row-reverse | column | column-reverse
• flex-wrap:
• no-wrap | wrap | wrap-reverse
• flex-flow: <flex-direction> || <flex-wrap>;
• Es un atajo de flex-direction y flex-wrap.
• justify-content:
• flex-start | flex-end | center | space-between | space-around
• align-items:
• flex-start | flex-end | center | stretch | baseline
• align-content: (Importante esta propiedad solo funciona cuando hay más
• de una fila de elementos).
• stretch | flex-start | flex-end | center | space-between | space-around

Vamos a ver ahora un ejemplo de cada propiedad usando un archivo en HTML
y otro en CSS.

FLEXBOX PARA LOS ELEMENTOS HIJOS

Lo primero que vamos a ver que son mucho más importantes las propiedades
de los elementos padre. Las propiedades que podemos tener son las
siguientes:

• order → Con esta propiedad podemos establecer el orden en el que aparecen los elementos de una caja flexible. Por defecto tiene el valor 0 y muestra los valores con el que aparecen en el código HTML.
• flex-grow → Especifica el factor de crecimiento, es decir, cuanto crecerá un elemento en relación a los demás. Por defecto tiene el valor 0.
• flex-shrink → Determina el factor de reducción y por defecto tiene el valor de 1. Para que funcione el contenedor padre ha de tener la propiedad nowrap.
• flex-basis: El tamaño inicial que tiene un elemento, podría sustituir al valor width, por defecto tiene el valor auto.
• La propiedad resumida: flex: <flex-grow> || <flex-shrink> || flex-basis. El valor que usaremos normalmente sera: flex: auto;
• align-self: Nos permite posicionar un elemento de forma diferente a los restantes.
• flex-start | flex-end | center | stretch | baseline