Las pseudo-clases :first-xxxx seleccionan el primer elemento que cumple cierta condición; por el contrario, las pseudo-clases :last-xxxx hacen lo mismo pero contando de atrás hacia adelante.
background: Los fondos y lo standard |
Establecer el fondo de una etiqueta cualquiera es algo bastante común y no debería causar problemas si conocemos a forma en que funciona esta propiedad que, genéricamente, se define con background, con ella, podemos definir un color o una imagen como fondo de cualquier elemento.
Algunos generadores online |
- Font-Face Kit Generator Permite que subamos nuestros archivos de fuentes y genera un pack optimizado con los distintos formatos necesarios para incrustarlos en un sitio web. El resultado final podemos descargarlo e incluye un demo y el CSS necesario.
- CSS Menu Generator Nos ayuda a generar menús de distinto tipo basándonos en una serie de diseños básicos. El resultado, lo descargamos en formato HTML.
- pForm Permite crear formularios utilizando diseños predefinidos que vamos personalizando mediante un editor visual y que luego podemos descargar en formato HTML.
- Pure CSS Menu Es un sitio que permite crear menús desplegables utilizando sólo CSS.
Algunos sitios donde se puede entrar a buscar inspiración cuando se trata de generar fondos para nuestros sitios.
El límite de los feeds |
Paginar es separar las entradas del blog en grupos que tienen una determinada cantidad de ellas de tal forma que podemos verlas "saltando" de unas a otras sin necesidad de hacerlo secuencialmente tal como ocurre con el típico sistema de Blogger donde avanzamos o retrocedemos pero, siempre en orden cronológico.
Hay muchos scripts que hacen eso pero todos ellos tienen una limitación fundamental; en Blogger siempre debemos usar los feeds para casi cualquier cosa y los feeds no son infinitos, tienen un tamaño máximo; por lo tanto, jamás podremos leer el 100% de las entradas si la cantidad publicada supera dicho límite. Ese número máximo es 500.
De allí; que algunas personas pregunten ¿qué pasa? cuando utilizan Json para mostrar algo y eso que queremos ver, es incompleto.
La cantidad de entradas a leer se establece con el parámetro max-results; por ejemplo:
Hay muchos scripts que hacen eso pero todos ellos tienen una limitación fundamental; en Blogger siempre debemos usar los feeds para casi cualquier cosa y los feeds no son infinitos, tienen un tamaño máximo; por lo tanto, jamás podremos leer el 100% de las entradas si la cantidad publicada supera dicho límite. Ese número máximo es 500.
De allí; que algunas personas pregunten ¿qué pasa? cuando utilizan Json para mostrar algo y eso que queremos ver, es incompleto.
La cantidad de entradas a leer se establece con el parámetro max-results; por ejemplo:
/feeds/posts/default?alt=json-in-script&max-results=VALOR&alt=json-in-script&callback=FUNCION
¿Qué debemos tener en cuenta con ese tipo de scripts? Dos cosas: si el valor es muy alto, el tiempo de carga aumentará pero, aún más, cuando hacemos este tipo de cosas, los datos del feed se cargan y se procesan, es decir, hay un código que los lee, los ordena, busca, cambia y muestra algo de alguna manera y todo eso, se ejecuta una cantidad de veces. Obviamente, si los datos a procesar son muchos, el tiempo que lleva ejecutar esas instrucciones aumenta y puede llegar a aumentar tanto que el navegador nos muestre una ventanita diciendo que un script de la página está demorando mucho y nos dará la opción de continuar o detener la operación.
Por lo tanto, la cantidad que usemos en max-results, debe ser un valor "lógico" aunque es imposible definir cuál es ese número exacto ya que dependerá de la longitud de las entradas. Se pueden cargar muchas si son cortas pero conviene cargar pocas si son largas.
El segundo punto importante es acordarse que hay un máximo de 500 entradas que pueden ser leídas de una sola vez, por más que coloquemos un valor mucho mayor, nada ocurrirá, no habrá errores pero se leerán 500 así que poner esto:
Por lo tanto, la cantidad que usemos en max-results, debe ser un valor "lógico" aunque es imposible definir cuál es ese número exacto ya que dependerá de la longitud de las entradas. Se pueden cargar muchas si son cortas pero conviene cargar pocas si son largas.
El segundo punto importante es acordarse que hay un máximo de 500 entradas que pueden ser leídas de una sola vez, por más que coloquemos un valor mucho mayor, nada ocurrirá, no habrá errores pero se leerán 500 así que poner esto:
/feeds/posts/default?alt=json-in-script&max-results=9999&alt=json-in-script&callback=FUNCION
es lo mismo que poner esto:
/feeds/posts/default?alt=json-in-script&max-results=500&alt=json-in-script&callback=FUNCION
Es fácil de comprobar. En este ejemplo se pueden cargar los feeds de este blog y procesarlos; allí se verá cuantas entradas hay publicadas, cuantas entradas son leídas y el título de la entrada más vieja a la que puede accederse; noten el tiempo que se tarda en leer y mostrar el resultado, pese a que en realidad, el script no hace nada:
Resúmenes y cantidad de entradas en Blogger |
En estos tiempos en que están común el uso de plantillas de tipo magazine donde se muestra un home con un resumen de cierta cantidad de entradas, esto, que es una buena forma de "ahorrar" espacio y no recargar visualmente una página web, trae sus conflictos y provoca ciertas dudas, algunas de las cuales pueden ser respondidas y otras ... quien sabe.¿Es mejor usar este tipo de plantillas en lugar de las tradicionales? Eso no puede responderse, es totalmente subjetivo.
¿Es una forma de aliviar la carga del sitio, de hacerlo más rápido? Depende ¿De que depende? De la forma en que haga ese resumen.
Probablemente, este sea el punto clave de todo el asunto ya que no es cierto que usar estos resúmenes implique que el sitio sea más "liviano" ya que muchos scripts que hacen este tipo de cosas, simplemente cargan el 100% de las entradas, extraen luego los datos necesarios, crean los resúmenes y luego los muestran de una manera diferente. Si usamos este tipo de scripts, nuestro home no será más liviano, tendrá el mismo volumen que tendría si mostráramos las entradas completas ... y un poco más.
Esto, suele ser un problema cuando la diagramación de un sitio depende de que siempre se muestre una cantidad exacta de entradas ya que, muchas veces, Blogger muestra menos que las que nosotros definimos en la Configuración. Decidimos que se muestren diez y se ven nueve; navegamos hacia atrás y se ven ocho o cualquier otro número. Si, para colmo, tenemos agregado algún tipo de script de paginación, al avanzar o retroceder, se saltean entradas ¿Por que ocurre esto?
El motivo principal es algo comentado hace tiempo, Blogger había comenzado a utilizar lo que ellos llaman Autopaginación, evaluando los tiempos de carga de los blogs y limitando su extensión a cierta cantidad no definida explícitamente. El resultado de eso es que, si a entender del servicio, la página generada es demasiado grande porque las entradas son largas, no tiene en cuenta el valor establecido por nosotros, muestra menos y esto no tiene ninguna posibilidad de ser modificado.
Por lo tanto, si el script que usamos carga las entradas completas y luego hace un resumen, en realidad, no se reduce el total y es fácil de comprobar, basta ver el código fuente generado por el navegador y allí encontraremos el HTML que permanece oculto.
Hay que recordar una y mil veces que ocultar algo con CSS o JavaScript no es lo mismo que condicionarlo con alguno de los códigos que posee Blogger. Cuando algo se oculta, sigue existiendo, cuando algo se condiciona, no existe y por lo tanto no forma parte de la página que muestra el navegador. Esto último, es lo que hace el botón MORE o LEER MÁS del editor de entradas; usando ese sistema, las entradas no se cargan por completo y eso reduce el tiempo de carga total.
Si bien la mayoría de los scripts usan los feeds para resumir las entradas, una posición intermedia es tratar de crear ese resumen sin cargar la entrada, leyendo el dato y manipulándolo en la memoria. Este otro sistema, probablemente mejore el rendimiento y permita que se vea una cantidad de entradas fijas sin que Blogger interfiera pero, tiene una contra, al hacerse sólo con JavaScript, esas entradas serán invisibles para los buscadores y por lo tanto, el blog no será tan sencillo de indexar.
A decir verdad, no existe un método perfecto, todos tienen pros y contras y por lo tanto, cuál debe usarse es una decisión personal.
Otro ejemplo de animaciones con CSS |
Crear animaciones con CSS es interesante pero engorroso; además, para que funcionen, hay que agregar los prefijos de cada navegador lo que hace que el código a escribir sea largo. De todos modos, aunque sea experimental, es algo para probar y ver qué pasa. Para más información: Mozilla | Chrome/Safari | w3.org.
En este caso, se trata de un ejemplo creado por David Walsh, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.
El HTML es muy simple:
En este caso, se trata de un ejemplo creado por David Walsh, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.
El HTML es muy simple:
<a href="javascript:void(0);" class="album"> <img src="URLIMAGEN_1" class="photo1" /> <img src="URLIMAGEN_2" class="photo2" /> <img src="URLIMAGEN_3" class="photo3" /> </a>
Las reglas de estilo básicas también:
<style>
.album {
display:block;
position: relative;
vertical-align: top;
width: 250px;
z-index: 5;
}
.album img {
border: 10px solid #ABC;
display: block;
height: 250px;
left: 0;
position: absolute;
top: 0;
width: 250px;
}
/* un agregado para que las imágenes se ponga en primer plano */
.album img:hover {
z-index: 1000;
}
</style>Y por último, la animación en si misma:
<style>
@-moz-keyframes image1 {
0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
}
@-webkit-keyframes image1 {
0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
}
@-moz-keyframes image2 {
0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
}
@-webkit-keyframes image2 {
0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
}
@-moz-keyframes image3 {
0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
}
@-webkit-keyframes image3 {
0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
}
.album:hover .photo1, .album:focus .photo1 {
-moz-animation-name: image1;
-moz-animation-duration: .2s;
-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
-webkit-animation-name: image1;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
}
.album:hover .photo2, .album:focus .photo2 {
-moz-animation-name: image2;
-moz-animation-duration: .2s;
-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
-webkit-animation-name: image2;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}
.album:hover .photo3, .album:focus .photo3 {
-moz-animation-name: image3;
-moz-animation-duration: .2s;
-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
-webkit-animation-name: image3;
-webkit-animation-duration: .2s;
-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
}
</style>
Supercharge: Opciones de reload en Firefox |
Supercharge es una de esas nuevas extensiones para Firefox que se instalan sin necesidad de reiniciar el navegador y que tiene una serie de funciones que vienen muy bien a la hora de luchar con las páginas webs que creamos o navegamos ya que agrega funciones extras a botón recargar.Como siempre, haciendo click con el botón izquierdo sobre ese ícono del navegador, recargaremos la página de modo normal que es lo mismo que podríamos hacer usando la tecla F5 pero, hay otras formas de recargar una página que funcionan en todos los navegadores y esta extensión ayuda en esa tarea, combinando el click en ese botón con ciertas teclas o usando atajos del teclado:
CTRL + botón izquierdo recargará la página sobrescribiendo la caché y forzando al navegador a "leer" otra vez; es lo mismo que usar CTRL + F5
ALT + botón izquierdo recargará las imágenes que no se hayan cargado; lo mismo ocurrirá con ALT + F5
SHIFT + botón izquierdo o SHIFT + F5 cargarán la página desde la caché de Google
Usando las mismas combinaciones poer con el botón central del ratón, las pa´ginas se recargarán en una nueva pestaña:
botón central para recarga normal
CTRL + botón central sobrescribiendo la caché
SHIFT + botón central cargará la página desde la caché de Google
y con ALT + botón central se recargarán todas las pestañas al mismo tiempo.
Quienes tengan algún conflicto con las combinaciones de teclas establecidas, pueden cambiarlas en las mismas opciones de la extensión o agregar algunas extras.
REFERENCIAS:ghacks.net
