save ass

Un chiste o cuento para el día de la Ingeniería

patoxs — Fri, 14 May 2010 15:33:31 +0000

Por que un administrador de empresas gana mas que un ingeniero:

“El Teorema del salario de Dilbert establece que: Los ingenieros nunca pueden ganar tanto como los Ejecutivos y los Comerciantes.

Se lo demuestra matemáticamente a partir de los siguientes dos postulados que son del dominio popular:

- Postulado Nro.1: Knowledge is Power (el Conocimiento es Poder)

- Postulado Nro.2: Time is money (el Tiempo es Dinero)

Todos conocemos el siguiente principio de la física:

Poder = Trabajo/Tiempo

Pero considerando que Conocimiento = Poder

Conocimiento es = Trabajo/Tiempo

Y como Tiempo=Dinero

Tenemos que: (Conocimiento es = Trabajo/ Dinero)

Ahora, si en ésta ecuación, despejamos la variable “Dinero” obtenemos que:

Dinero = Trabajo/Conocimiento

Así se demuestra que, cuando Conocimiento se aproxima a cero (0), el

dinero tiende a infinito, independientemente de la cantidad de trabajo

realizado. Con lo que queda demostrado que:

CUANTO MENOS SEPAS; MAS GANARAS.

Compartelo

Probar una página web en diferentes navegadores

patoxs — Fri, 07 May 2010 16:02:55 +0000

Un buen webmaster siempre debe comprobar que su página web sea compatible con los navegadores más usados. Sin embargo, dependiendo del sistema operativo que utilice, pueden presentarse algunas dificultades con algunos navegadores.

Existen sitios web que realizan capturas de pantalla de nuestra página web en diferentes navegadores. Esto nos evita tener que instalar varios navegadores en nuestra PC. Sin embargo, el inconveniente es que no podremos probar las modificaciones que hagamos en tiempo real. Será necesario esperar hasta que nuestra solicitud sea aceptada.

Browsershot (todos los SO + todos los navegadores)
Browsercam (de prueba – todos los SO + múltiples navegadores)
IEcapture (IE7)
Icapture (Mac + Safari)
Scapture (Linux + Firefox, Konqueror, Opera, Dillo + Lynx)
(fuente:kioskea)

Compartelo

Hack CSS

patoxs — Fri, 07 May 2010 15:49:25 +0000

El tema de crear CSS hoy en día se ha vuelto un dolor de cabezas para muchos desarrolladores web, en un principio era sencillo, diseños básicos, casi todo el mundo usaba IE y sólo cuatro se atrevían con navegadores alternativos. Hoy en día las cosas ha cambiando, los diseños son cada día más atractivos y por ende necesitan un desarrollo mas acabado, donde debemos rompernos la cabeza para que nuestros CSS funcionen en todos los navegadores, como también a crecido nuestro conocimiento en estándares (W3C) (maldito IE).

A continuación les dejo dos datos que considero no son comunes y que nos pueden ayudar a terminar un desarrollo mucho más rápido y de calidad.

HACK’s

1.- Creamos un CSS adaptado a Internet Explorer, luego repetimos la regla (lo que sea común no es necesario, únicamente que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole “html>body”.
Afortunadamente a este último IE no lo interpretará mientras que el resto de navegadores sí.
Ejemplo práctico, para entenderlo mejor:

1 2	#header {margin-bottom:3em} html>body #header {margin-bottom:1em}

Hacer que Internet Explorer siga estandares

2.- El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería JavaScript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS. (Fuente:maestrosdelweb)

Para utilizar esta librería debemos descargarla de Google Code. Ejemplo de como implementar:

1
2
3
4

Compartelo

Spritely – animación usando jQuery

patoxs — Fri, 19 Mar 2010 20:21:27 +0000

Spritely es un plugin jQuery para crear un carácter dinámico y de animación para un fondo en HTML puro y JavaScript. Es un plugin liviano que permite crear fácilmente sprites animados y fondos de desplazamiento. Se trata de un plugin que funciona en todos los navegadores importantes incluido el de iPhone e Internet Explorer 6.

Spritely proporciona dos métodos fundamentales, sprite() y pan() ambos para animar la imagen de fondo con las propiedades CSS. La diferencia entre los dos es que una imagen “sprite” contiene dos o más “marcos” de animación, mientras que un ‘pan’ de imagen contiene una imagen continua, que fluye hacia la izquierda o la derecha y luego se repite.

Desarrollado por Artlogic Media; Spritely esta bajo licencia MIT o GPL versión 2.

Compartelo

FindIcons – Iconos gratuitos

patoxs — Wed, 17 Mar 2010 13:30:54 +0000

FindIcons es un motor de búsqueda de iconos con una base de datos 300.000 iconos gratuitos y un total de 2.000 pack de iconos. Es alimentado por una sofisticada herramienta de búsqueda de filtrado y el resultado sistema de concordancia, lo que le permite encontrar fácilmente lo que necesita.

Todos los paquetes de icono en el sitio son libres de utilizar, al menos para uso personal. Algunos paquetes de iconos no están permitidos para uso comercial, mientras que algunos propietarios exigen un enlace a su página web.

Compartelo

SUMO Paint… un Gimp o Photoshop Online

Kultran — Fri, 12 Mar 2010 18:57:15 +0000

No confundir esta herramienta con el limitado Paint que ofrece Microsoft en sus SO. SUMO es una gran alternativa online a Gimp o Photoshop con herramientas profesionales e increíbles como la varita mágica de selección, la posibilidad de trabajar en capas y la opción de guardar online o en tu equipo. Todo esto entre un una gran cantidad de herramientas disponibles en un panel de trabajo muy similar a Photoshop.

Te invitamos a conocer esta gran herramienta online, la cual también esta para descargar.

SUMO Paint

BONUS: Dos imágenes que demuestran la diferencia entre Open Source y Sw Privativo

Fuerza Chile!!!!

Compartelo

wwwsqldesigner – Modelador de base de datos online

patoxs — Thu, 11 Mar 2010 12:37:45 +0000

WWW SQL Designer es el nombre de este interesante proyecto, liderado por Ondrej Zara, y que acaba de formar parte ahora de Google Code y se compone de una interesante aplicación que nos permite crear modelos de base de datos online (diagramas entidad-relación), gracias a un demo, o de manera local, pues se compone de un javascript.

Para funcionar WWW SQL Designer solo necesita tener habilitado Javascript y trabaja perfectamente sobre los navegadores de Mozilla (Firefox, Seamonkey), Internet Explorer (6, 7, 8), Safari y Opera. El trabajo en Konqueror es funcional, pero limitado.

Lo mejor del modelo, que podemos crear con esta aplicación, es que nos permite generar un script sql para crear nuestra base de datos, a fin de que podamos reconstruir nuestro modelo de base de datos en nuestro cliente-servidor local.

Para esto, claro, la aplicación nos permite definir los tipos de variables de los cuales se componen las columnas, así como el tamaño de los mismos, también llaves primarias y foráneas y algunas características de los campos, tales como unicidad, autoincremento, etc.

Pueden probar el demo desde este enlace o visitar la página del autor visitando el otro enlace al final de este post.

Fuente: http://www.tecnologiadiaria.com/

Compartelo

Generador Online de Favicon.

Kultran — Wed, 10 Mar 2010 18:07:20 +0000

Simple y útil es este generador de favicon, que nos proporciona la posibilidad de transformar cualquier imagen gif, jpg, png, y bmp a favicon.

Si te estas preguntando que es un favicon, te podemos contar que es el icono que aparece junto a tu dominio en el navegador que utilices.

Favicon Generator

Ahora si te estas preguntando como colocar el favicon en tu sitio… es muy simple:

1.- Colocas el favicon en la raíz del sitio tal como: http://www.ejemplo.com/favicon.ico

2.- Pones este código en la cabecera del documento HTML, debe funcionar correctamente en la mayoría de los navegadores:

1	<link href="/favicon.ico" rel="shortcut icon" />

Compartelo

Menú animado con jQuery

Blackned — Tue, 09 Mar 2010 18:17:11 +0000

Otro menú con animación de jQuery bastante simple pero elegante.

A continuación mostrare los pasos a seguir para construir este llamativo menú

Paso 1. Incluir las librerías necesarias para el funcionamiento del menú.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smooth Animated jQuery Menu</title>

<link rel="stylesheet" href="animated-menu.css"/>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="animated-menu.js" type="text/javascript"></script>
</head>

Paso 2. Crear la estructura del menú.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<body>
<p>Rollover a menu item to expand it.</p>
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>
</body>
</html>

Paso 3. Creación del CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}

ul{
margin:0;
padding:0;
}

li{
width:100px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}

a{
color:#FFF;
text-decoration:none;
}

p{
padding:0px 5px;
}

.subtext{
padding-top:15px;
}

/*Menu Color Classes*/
.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}

Paso 4. Crear la animación con jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function(){

//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Aquí les dejo la demo de la animación.

Acá esta la descarga de los archivos con el menú listo.

Compartelo

Lorem Ipsum, generador de texto de relleno.

Kultran — Tue, 09 Mar 2010 14:34:48 +0000

En cuantas oportunidades te has encontrado a punto de terminar un sitio web para presentarlo a tus clientes y no se te ocurren los textos para rellenar… bueno seguramente has visto en otros sitios de plantillas textos que comienzan generalmente con Lorem Ipsum…

Es por eso que ahora te traemos un sitio que genera texto de relleno Lorem Ipsum.

Fuerza Chile

Compartelo