Sunday, July 28, 2019

Crear un instalador personal de Firefox

Firefox Addon Maker es un sotfware que nos facilita la instalación de Firefox, permitiéndonos crear un instalador personal que podría incluir todas las extensiones y plugins que normalmente usamos, así como los marcadores, contraseñas y la mayoría de las opciones de configuración que tengamos. De ese modo, las actualizaciones serán menos traumáticas y más rápidas.

La aplicación es portable por lo que no requiere instalación basta descomprimir el ZIP y usar el archivo exe.

Se nos abrirá una ventana con todas las opciones y allí seleccionaremos la versión a incluir que podemos no tener y se descargará desde Mozilla, el idioma y cualquier otro tipo de plugin. Si queremos usar los datos guardados, dejamos todo como está y si queremos crear un instalador limpio, podemos crear un perfil nuevo.


El resultado final, será otroa archivo Firefox_XX_es-ES_Silent.exe que estará alojado en al misma carpeta donde hayamos guardado el programa y que podemos usar cuando se nos ocurra.

REFERENCIAS:ghacks.net

Friday, July 26, 2019

Algunas librerías para manejar la etiqueta Canvas

Estas son algunas librerías que podrían ayudar a manejar la etiqueta canvas de modo más simple, entendiendo que simple no significa fácil.

EaselJS es una de las más completas y modernas, enfocada básicamente a la parte gráfica. En la página de los autores se pueden ver muchos demos online como este.

Artisan JS es más sencilla y las funciones son limitadas pero bastante intuitivas. Puede verse un ejemplo de su funcionamiento en este generador de wallpapers.

jCanvaScript provee muchos métodos y funciones que permite generr contenido en cualquier plataforma incluyendo móviles aunque, como en todos estos casos, para Internet Explorer se requieren librerías extras como ExCanvas. Incluye animaciones drag and drop y manejo de eventos tanto del mouse como del teclado.

Wednesday, July 24, 2019

Una forma sencilla de desplazarse con jQuery

Este sería un método genérico de agregar la posibilidad de animar el desplazamiento interno ha cualquier parte de una página web. En palabras simples, hacer click en alguna parte y que la página se mueva y nos ubique allí.

Hay muchos plugins de jQuery que lo hacen pero para un uso normal, suelen ser excesivos porque están pensados para adaptarse a situaciones y necesidades diversas y, al final de cuentas, uno siempre los usa de modo bastante más elemental.

¿Cómo hacer esto? Basta saber dos cosas: la posición de la etiqueta donde se hace click y la posición de la etiqueta a donde queremos ir; luego, bastaría usar la propiedad scrollTop para mover la página esa distancia.

Por ejemplo, este enlace nos desplazaría hasta el footer de la página:
<a class="moverse" href="#footer-wrapper">ir al footer</a>
El script es sencillo, asociamos una clase cualquiera (en este caso la llamo moverse) a un evento onclick:
$('.moverse').live('click', function(e) { 
// con esto, impedimos que se ejecute (más información)
e.preventDefault();
// leemos el atributo href de la etiqueta que es el ID a donde queremos ir
var adonde = $(this).attr('href');
// guardamos su posición en la página (más información)
var posicion_donde = $(adonde).offset();
// y calculamos la distancia entre donde estamos y donde queremos ir
var distancia = posicion_donde.top;
// por último, nos movemoss usando una animación (más información)
$('body,html').animate({scrollTop: distancia}, 500);
});
<a class="moverse" href="#outer-wrapper">ir al inicio de la página</a>

Monday, July 22, 2019

Listas y bullets

Cuando se crean listas HTML, por defecto, estas incluyen un bullet (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad list-style-type cuyos valores básicos son disc y decimal respectivamente. Si no queremos que se vean, usamos el valor none y desaparecen.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

Una característica de las listas es que ese bullet o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente "grande" o cierto color, esas propiedades también se aplican a la "decoración" por lo tanto, de modo normal, no es posible diferenciarlas:

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

En Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:

::-moz-list-bullet permite establecer el estilo del bullet de las etiquetas LI en una lista desordenada (UL)
::-moz-list-number permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)

Por ejemplo:
ul li {color: #FFF; font-size: 16px;}
ul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}
ol li {color: #FFF; font-size: 16px;}
ol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

En cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:
<li><span>item 1</span></li>
Y crear reglas de etilo diferentes:
ul li {color: Yellow; font-size: 25px; line-height: 0.9;}
ul li span {color: #FFF; font-size: 16px;}
ol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
ol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

Friday, July 19, 2019

Paneles deslizantes con CSS

Esto que llaman paneles deslizantes es, en realidad, otra forma de crear un slideshow con textos añadidos y efectos varios, desarrollado por codrops y que hace uso extremo del CSS3.

Tal vez pueda ser un poco engorroso pero los resultados son interesantes y hay varios demos 1, 2, 3, 4, que difieren en las animaciones porque, esencialmente, tienen la misma estructura.

Sólo muestro las variantes de uno de ellos que, por supuesto, no será visible en Internet Explorer. El HTML es el siguiente:
<div class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label><div class="clr">
</div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
<h3>
<span class="big"> titulo panel 1 </span>
<span class="small"> texto inferior panel 1 s</span>
</h3>
<h3>
<span class="big"> titulo panel 2 </span>
<span class="small"> texto inferior panel 2 </span>
</h3>
<h3>
<span class="big"> titulo panel 3 </span>
<span class="small"> texto inferior panel 3 </span>
</h3>
<h3>
<span class="big"> titulo panel 4 </span>
<span class="small"> texto inferior panel 4 </span>
</h3>
</div>
</div>
Si esto les parece muy largo ... ni miren el CSS.

<style>
.cr-container { /* el contenedor */
border: 10px solid #FFF;
height: 400px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 600px;
}
.cr-container br {display:none;}
.cr-container label { /* la navegación inferior */
color: #98541C;
cursor: pointer;
float: left;
font-size: 30px;
height: 32px;
line-height: 30px;
margin-top: 350px;
position: relative;
text-align: center;
width: 150px;
z-index: 1000;
}
.cr-container label:before {
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
content: "";
height: 32px;
left: 50%;
margin-left: -16px;
position: absolute;
width: 32px;
z-index: -1;
}
.cr-container label:after { /* una línea vertical que separa los paneles */
background: -moz-linear-gradient(#FFF,#000,#FFF);
background: -webkit-linear-gradient(#FFF,#000,#FFF);
background: linear--linear-gradient(#FFF,#000,#FFF);
bottom: -20px;
content: '';
height: 400px;
position: absolute;
right: 0px;
width: 1px;
}
.cr-container label.cr-label-img-4:after { width: 0px; }
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #000;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #FFF;
box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);
}
.cr-container input { display: none; }

/* las imagenes son fondos */
.cr-bgimg {
background-repeat: no-repeat;
background-position: 0 0;
height: 400px;
left: 0px;
position: absolute;
top: 0px;
width: 600px;
z-index: 1;
}
.cr-bgimg div {
background-repeat: no-repeat;
float: left;
height: 100%;
overflow: hidden;
position: relative;
width: 150px;
}
.cr-bgimg div span {
height: 100%;
left: 150px;
position: absolute;
text-indent: -9000px;
top: 0px;
width: 100%;
z-index: 2;
}
.cr-bgimg div:nth-child(odd) span { left: -150px; }

/* cada una de ellas */
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(URL_IMAGEN_1); }
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(URL_IMAGEN_2); }
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(URL_IMAGEN_3); }
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(URL_IMAGEN_4); }
/* los panales tiene 150 pixeles de ancho */
.cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }
.cr-bgimg div:nth-child(2) span { background-position: -150px 0px; }
.cr-bgimg div:nth-child(3) span { background-position: -300px 0px; }
.cr-bgimg div:nth-child(4) span { background-position: -450px 0px; }

/* las animaciones */
.cr-container input:checked ~ .cr-bgimg div span {
-moz-animation: slideOutRight 0.6s ease-in-out;
-webkit-animation: slideOutRight 0.6s ease-in-out;
}
@-webkit-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
@-moz-keyframes slideOutRight{
0%{ left: 0px; }
100%{ left: 150px; }
}
.cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {
-moz-animation: slideOutLeft 0.6s ease-in-out;
-webkit-animation: slideOutLeft 0.6s ease-in-out;
animation: slideOutLeft 0.6s ease-in-out;
}
@-webkit-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
@-moz-keyframes slideOutLeft{
0%{ left: 0px; }
100%{ left: -150px; }
}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
-moz-transition: left 0.5s ease-in-out;
-webkit-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
-moz-animation: none;
-webkit-animation: none;
animation: none;
left: 0px;
z-index: 10;
}

/* los textos en geenral */
.cr-titles h3 { font-weight: normal; }
.cr-titles h3 span {
left: 0px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: 10000;
}
/* el texto superior más grande */
.cr-titles h3 span.big {
color: #FFF;
font-family: Helvetica;
font-size: 60px;
left: 0px;
letter-spacing: -2px;
text-shadow: 1px 2px 1px #000;
top: 230px;
-moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
/* el texto inferior más pequeño */
.cr-titles h3 span.small {
background: rgba(255, 255, 255, 0.7);
color: #000;
font-family: Tahoma;
font-size: 14px;
letter-spacing: 0;
margin-top: 100px;
opacity: 0;
padding: 5px 0;
text-shadow: 1px 1px 1px #FFF;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}

/* animaciones de los textos */
.cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
opacity: 0;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
opacity: 1;
}
</style>


Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4
Slice 2 - Image 1Slice 2 - Image 2Slice 2 - Image 3Slice 2 - Image 4
Slice 3 - Image 1Slice 3 - Image 2Slice 3 - Image 3Slice 3 - Image 4
Slice 4 - Image 1Slice 4 - Image 2Slice 4 - Image 3Slice 4 - Image 4

esta es la imagenUn ejemplo de paneles deslizantes

algunos efectosLorem ipsum dolor sit amet, consectetuer adipiscing elit.

usando CSS3wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

personalizabledefiniendo estilos para cada panel

Wednesday, July 17, 2019

Cómo instalar Xampp en Windows

Una de las formas más prácticas de trabajar con WordPress y con muchos otros de estos servicios, es utilizarlos offline, instalándolos en nuestra PC y experimentar a gusto sin temor a destruir nada.

Para eso, la mejor opción es XAMPP, un soft gratuito que nos permite instalar una distribución de Apache que contiene MySQL, PHP y todo lo necesario para correr y gestionar un sitio web.

Hay versiones para casi todos los sistemas operativos. La última versión para Windows incluye:
  • Apache 2.4.2
  • MySQL 5.5.25a
  • PHP 5.4.4
  • phpMyAdmin 3.5.2
  • FileZilla FTP Server 0.9.41
Una vez descargado, procedemos a la instalación que es muy simple, similar a la de cualquier otro programa.

Instalando Xampp en Windows

Terminado esto, lo ejecutamos y se abrirá el panel de control. Si no están iniciados los servicios, hacemos click en Start, tanto de Apache como de MySQL que son los dos imprescindibles. Cerramos el panel que permanecerá como ícono en la barra de tareas.

El Panel de Control de Xampp

Para entrar al servidor abrimos el navegador y escribimos localhost en la barra de direcciones, nos llevará a una página similar a esta:
http://localhost/xampp/splash.php

Seleccionamos el idioma que nos resulte cómodos y vamos a crear una base de datos. En la izquierda, dentro de Herramientas hacemos click en phpMyAdmin:
http://localhost/phpmyadmin/

Una vez allí, colocamos el nombre (por ejemplo "wordpress" sin comillas), elegimos utf8_unicode_ci y click en Crear.

Con eso ya estamos casi listos, nos falta instalar Wordpress, así que descargamos la última versión o la que nos guste, la descomprimimos y la debemos copiar y pegar en la carpeta \\xampp\\htdocs\\ que es donde se agregarán todos nuestros archivos.

Lo que sigue es similar a instalar WorPress en un hosting. Vamos a la carpeta \\xampp\\htdocs\\wordpress que es la raiz de nuestro sitio y buscamos el archivo wp-config-sample.php. Hacemos una copia del mismo y lo renombramos como wp-config.php. Lo editamos y colocamos nuestros datos:
[php]
define(''DB_NAME'', ''wordpress''); // el nombre de la base de datos que acabamos de crear
define(''DB_USER'', ''root''); // nuestro nombre de usuario para MySQL (no cambiar)
define(''DB_PASSWORD'', ''''); // la contraseña (la dejamos en blanco)
define(''DB_HOST'', ''localhost'');
define(''DB_CHARSET'', ''utf8'');
define(''DB_COLLATE'', '''');
[/php]
Para terminar, vamos a esta dirección:

http://localhost/wordpress/wp-admin/install.php

y seguimos el proceso normal, poner el título del blog, un email, nos dará un nombre de usuario (admin) y una contraseña aleatoria y nos llevará a la pantalla de login:

http://localhost/wordpress/wp-login.php

que es la que usaremos de ahí en adelante para entrar en nuestro sitio.

El resto, será igual que administrar WordPress desde un hosting. Podemos agregar temas, plugins (aunque algunos no funcionarán), exportar la base de datos de nuestro blog e importarla a Xampp, crear otras, etc.

Una de las ventajas es que no es necesario utilizar el editor interno y podemos usar cualquier otro como Notepad++ o el que nos resulte más cómodo. abrimos los archivos, los editamos y los guardamos. Todo se hace más sencillo, más rápido y no necesitamos conectarnos a internet.

Si bien el proceso detallado se refiere a a WordPress, en realidad, la utilidad de software como Xampp no se limita a este tipo de servicios ya que podemos hacer lo mismo con cualquier otro CMS: Joomla, Drupal, o no usar ninguno de ellos y experimentar con el lenguaje PHP de manera directa.

Monday, July 15, 2019

Tooltips animados con CSS

Esta es una forma de generar tooltips animadas, desarrollada por Alessio Atzeni y no sólo requiere CSS3 para ser implementada en cualquier sitio. Obviamente, como muchas de estas cosas, la animación no funcionará en todos los navegadores aunque el tooltip será visible sin problemas.

El HTML es sencillo, sólo es una lista ordenada dentro de un DIV:
<div id="masterpanel">
<ul id="mainpanel">
<li><a href="#" class="picasa"><small>abrir Picasa</small></a></li>
<li><a href="#" class="stumble"><small>enviar a Stumble</small></a></li>
<li><a href="#" class="twitter"><small>compartir en Twitterr</small></a></li>
<li><a href="#" class="youtube"><small>el canal de YouTube</small></a></li>
<li><a href="#" class="facebook"><small>compartir en Facebook</small></a></li>
</ul>
</div>
Cada etiqueta LI contiene un enlace con una clase distinta y el contenido es el texto será el que vamos a ver en el tooltip.

Lógicamente, la clave es el CSS:
<style>
#masterpanel { /* este es contenedor principal */ }
#masterpanel ul { /* la lista */
list-style: none;
padding: 0;
margin: 0;
}
#masterpanel ul li { /* cada item de la lista */
padding: 0;
margin: 0;
position: relative;
}

/* este es el enlace */
#masterpanel ul li a {
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 0;
text-decoration: none;
margin: 0 5px; /* la separación entre ellos */
float: left; /* uno al lado del otro */
position: relative;
padding: 0 20px;
/* el tamaño de las imágenes */
height: 60px;
width: 60px;
}

/* las imágenes son los fondos de esos enlaces */
a.tpicasa {background-image: url(imagen1);}
a.tstumble {background-image: url(imagen2);}
a.ttwitter {background-image: url(imagen3);}
a.tyoutube {background-image: url(imagen4);}
a.tfacebook {background-image: url(imagen5);}

/* el texto del tooltip permanecerá oculto */
#masterpanel a small {
background-color: Brown;
border-radius: 10px;
color: #FFF;
display: none;
font-size: 11px;
line-height: 1;
padding: 5px;
text-align: center;
width: 90px; /* es el ancho real del enlace */
}

/* el efecto hover hace visible al tooltip */
#masterpanel a:hover small {
display:block;
left: 0;
margin-top:-35px;
position:absolute;
top: 0;
z-index:9999;
/* la animación para Firefox y Chrome/Safari */
-moz-animation:mymove .25s linear;
-webkit-animation:mymove .25s linear;
}

/* las reglas de la animación para cada uno de los navegadores */
@-moz-keyframes mymove {
0%{ -moz-transform: scale(0,0); opacity:0;}
50%{ -moz-transform: scale(1.2,1.2); opacity:0.3; }
75%{ -moz-transform: scale(0.9,0.9); opacity:0.7;}
100%{ -moz-transform: scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
0%{ -webkit-transform: scale(0,0); opacity:0;}
50%{ -webkit-transform: scale(1.2,1.2); opacity:0.3;}
75%{ -webkit-transform: scale(0.9,0.9); opacity:0.7;}
100%{ -webkit-transform: scale(1,1); opacity:1;}
}
</style>