Blog Informático – Erik Sanchis

Facebook Twitter Gplus RSS

Efecto CSS para Galeria de Imágenes

Published on 18 abril 2013, by in CSS, Desarrollo Web, Html.

imgres

Buscando un efecto para una galería que fuera en CSS y no en JavaScript. Y al final he adaptado estos estilos muy simples y que te sirven para animar una Galería creada con HTML y sólo deberemos utilizar CSS para poder animarla.

img.homeGalery{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
 -moz-transform:scale(0.8); /*Mozilla scale version*/
 -o-transform:scale(0.8); /*Opera scale version*/
 -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
 -moz-transition-duration: 0.5s; /*Mozilla duration version*/
 -o-transition-duration: 0.5s; /*Opera duration version*/
 opacity: 0.7; /*initial opacity of images*/
 margin: 0 10px 5px 0; /*margin between images*/
 margin-right: 2%;
 margin-bottom: 5%;
 }
 img.homeGalery:hover{
 -webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
 -moz-transform:scale(1.1); /*Mozilla scale version*/
 -o-transform:scale(1.1); /*Opera scale version*/
 box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
 -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
 -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
 opacity: 1;
 }

 

Tags: ,
 

Como instalar un parche manualmente en Drupal

Published on 28 enero 2013, by in CMS, Desarrollo Web, Drupal, Guias, PHP, Software.

drupal-logo

Aplicar un parche manualmente en Drupal es simple, en primer lugar tenemos que saber que archivo tenemos que modificar. Generalmente el principio del parche nos indicará la ruta del fichero que queremos modificar e información sobre el creador, fecha y cambios a realizazr.

Veremos que hay signos — o ++  a lo largo del fichero. Los simbolos — nos indican el trozo de código que debe ser modificado podemos seleccionar el código, copiarlo y con (cntrl+F) buscar la línea en el fichero que tenemos que modificar y en su lugar reemplazar el código por el trozo que tiene los símbolos ++ pero siempre eliminando los ++.

Las líneas que no tienen simbolos — o ++ nos indican texto que no debe de ser modificado, referencias del creador del parche, fecha o ruta de aplicación del parche.

Ejemplo de parche.

 

From 9a857301521940bfa0f33b824c2642c967af07cf Mon Sep 17 00:00:00 2001
From: Bill Seremetis <bill@seremetis.net>
Date: Mon, 20 Feb 2012 03:06:29 +0200
Subject: [PATCH] modified unicode.inc to play nice with PCRE v8.30

---
 includes/unicode.inc |    2 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

diff --git a/includes/unicode.inc b/includes/unicode.inc
index 9dde2ca..a2618cf 100644
--- a/includes/unicode.inc
+++ b/includes/unicode.inc
@@ -73,7 +73,7 @@ define('PREG_CLASS_UNICODE_WORD_BOUNDARY',
   '\x{A836}-\x{A839}\x{A874}-\x{A877}\x{A8CE}-\x{A8CF}\x{A8F8}-\x{A8FA}' .
   '\x{A92E}-\x{A92F}\x{A95F}\x{A9C1}-\x{A9CD}\x{A9DE}-\x{A9DF}' .
   '\x{AA5C}-\x{AA5F}\x{AA77}-\x{AA79}\x{AADE}-\x{AADF}\x{ABEB}' .
-  '\x{D800}-\x{F8FF}\x{FB29}\x{FD3E}-\x{FD3F}\x{FDFC}-\x{FDFD}' .
+  '\x{FB29}\x{FD3E}-\x{FD3F}\x{FDFC}-\x{FDFD}' .
   '\x{FE10}-\x{FE19}\x{FE30}-\x{FE6B}\x{FEFF}-\x{FF0F}\x{FF1A}-\x{FF20}' .
   '\x{FF3B}-\x{FF40}\x{FF5B}-\x{FF65}\x{FFE0}-\x{FFFD}');

-- 
1.7.9.1

En este caso buscaremos la línea que contenga el código “ \x{D800}-\x{F8FF}\x{FB29}\x{FD3E}-\x{FD3F}\x{FDFC}-\x{FDFD} ”

 

Y lo reemplazaremos por  ” \x{FB29}\x{FD3E}-\x{FD3F}\x{FDFC}-\x{FDFD} ”

 

 

5 repositorios de imágenes gratis

Published on 23 enero 2013, by in Desarrollo Web, Diseño, Freeware, Internet.

Blog informatico

 

1.Google Advanced Image Search: Puedes filtrar las búsquedas por  Creative Commons o imágenes de dominio público.

2.Public Domain Photos: Es un directorio con fotos gratis para uso comercial. Hay 25000 fotos en 2500 galerías publicadas.

3.Totally Free Images Más de medio millón de imágenes sin derechos de autor. Dominio Público. Totalmente gratis! Puedes descargar / modificar / venta / lo que sea!

4.Pixabay:  Contiene fotografías e imágenes clipart gratuitas. Encuentra y comparte sorprendentes imágenes de dominio público

5.Sprixi: Buscador de imágenes gratuito , en la parte inferior te dice las restricciones de copyright que tiene cada imágen.

 

Tags: ,
 

Comprobar web en diferentes resoluciones Online

 

Uso text-shadow css3 – sombra de texto

Published on 8 enero 2013, by in CSS, Desarrollo Web, Interest, Navegadores.

css3-markup

En CSS3 tenemos una propiedad llamada text-shadow que nos da la posibilidad de crear una sombra sobre cualquier texto sin necesidad de utilizar imagen. Esto nos beneficia sobre todo por la versatilidad que nos da la utilización de CSS3 y para mejorar nuestro posicionamiento ya que los buscadores pueden indexar mejor nuestra información si está creada con texto.

La forma más simple de utilización de text-shadow es

h2 {text-shadow: 1px 1px #333}

Texto con sombra

Lo que nos dara una sombre de color gris ubicada 1pixel hacía la derecha y 1 pixel hacía abajo.

Podemos añadirle otro parámetro para determinar la difuminación que nos interesa.

h2 {text-shadow: 1px 1px 3px #333}

Texto con sombra

Este tercer parámetro nos dará presentará una sombra difuminada en 3 pixels que podemos hacer más nítida si bajamos la cantidad de pixels.

Otra ventaja que tenemos utilizando esta propiedad es que podemos crear varias sombras en un mismo texto.

h2 {text-shadow: 1px 1px 2px #600,
	  -2px 3px 2px #060,
	  4px -5px 2px #006}

Texto con sombra

Una herramienta muy interesante para crear textos son sombra online y que nos genera el código automaticamente es este generador text-shadow que con una interfaz gráfica nos permite crear una sombra a nuestro gusto y nos genera el código automaticamente para que lo podamos copiar en nuestra hoja de estilos.

 

 

Problemas paginar con query_posts() en WordPress

Published on 12 diciembre 2012, by in CMS, Desarrollo Web, Html, PHP, Wordpress.

wordpress_logo

Extracto de código utilizando query_posts() y paginación por defecto de WordPress. Concretamente he creado una plantilla de WordPress para una página en el que añado un query_posts() y enseño los post de una determinada categoría en WordPress.  Finalmente le añado un paginador.

Los parámetros que utilizo son los siguientes

  • cat=16&   (El id de la categoría que queremos mostrar)
  • showposts=2&  (Cantidad de post que queremos mostrar por página)
  • orderby=date&  (Ordenador por fecha)
  • order=DESC&  (Descendente)
  • paged=$paged”  (Paginador)

 

<?php $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
query_posts(“cat=16&showposts=2&orderby=date&order=DESC&paged=$paged”); ?>
<?php while (have_posts()) : the_post(); ?>

<h1 class=”entry-title”><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; ?>
<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘&laquo; Entradas antiguas’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Entradas recientes &raquo;’) ?></div>
</div>
<?php $wp_query = null; ?>

 

Es importante añadir la última línea <?php $wp_query = null; ?> para que el bucle no repita .

Tags:
 

Problemas con inline-block en IE7

Published on 30 julio 2012, by in CSS, Definicion, Desarrollo Web, Guias, Html, Internet Explorer, Navegadores.

Algunas veces utilizamos inline-block sustituyendo float ya que se puede obtener los mismo resultados con consequencias diferentes. Generalmente se visualiza correctamente en todos los navegadores menos en IE7 que vemos que nos aparecen los objetos verticalmente y no quedan alineados en la misma línea.

Pero podemos solucionarlo de una forma muy simple.

Ejemplo HTML usando display:inline-block:

<div style="width:200px;">
  <p class="objeto">Menu 1</p>
  <p class="objeto">Menu 2</p>
  <p class="objeto">Menu 3</p>
  <p class="objeto">Menu 4</p>
</div>

Y con estos estilos

.objeto {
  width: 100px;
  display: inline-block;
  margin: 10px;
  background-color: red;
}

Para arreglar esto sólo debemos crear una nueva condición específica para IE7. Para que quede de la forma siguiente.

.objeto {
  width: 100px;
  display: inline-block;
  margin: 10px;
  background-color: red;
}
<!--[if lte IE 7]> .objeto {
  display: inline;
}
<![endif]-->

Veremos que el problema queda solucionado de una forma simple. Si tenéis cualquier problema no dudéis en comentar y os intentaré ayudar.

Tags:
 

Texturas gratuitas Diseño web

Published on 25 julio 2012, by in CSS, Desarrollo Web, Diseño, Html.

De WDL tenemos un listado un poco obsoleto pero no por eso menos útil de las mejores texturas para diseño web. Estas textura de diseño web nos pueden ser de mucha utilidad para crear buenos diseños y efectos ampliando nuestra capacidad de crear diseño atractivos.

Estas texturas gratuitas nos permite ampliar nuestros recursos de diseño web.

Textures 07 – Stock Pack

textures

Patterns .36 (25 patterns)

seamless patterns

Dirty Paper Textures

textures

Patterns .38 (25 patterns)

seamless patterns

Inspiration Flow

textures

Vintage Grunge

textures

Free Vector Seamless Backgrounds (6 patterns)

seamless patterns

Colorful Grunge

textures

Vintage Wallpaper Textures

textures

Seamless Paper Patterns (6 patterns)

seamless patterns

Textures 06 – Stock Pack

textures

Tags: , , ,