Comprime tus css de 100% bajalos a 27%

25 09 2008

Csszip

Bajalo desde aqui:

http://76.164.236.73/~wwwtupo/csszip.zip

Hice este script, por que esta técnica la vengo utilizando desde hace tiempos, lo que hago es usar la librería zlib de php para comprimir el código, en el post de mañana explicare bien el método, por ahora los dejo con el script.

Léame

Bienvenido a CSSZIP

Este script es muy básico, en el cual mezclamos MODREWRITE y la librería ZLIB de php
Lo único que necesitas como requisito, es tener:

1)Php
2)La librería ZLIB
3)El MODREWRITE activado

El script comprueba si existe la librería zlib, en el caso de que no exista, no genera error,
simplemente no comprimirá nada.

Lo primero es copiar el contenido de el archivo .ZIP en la carpeta donde van los css.
son 2 archivos, uno llamado motor.php, y el otro es .htaccess y listo!, el zlib estara
funcionando.

Después de haber copiado los dos archivos en la carpeta de los .css el mismo script se
activa solo y cada vez que soliciten el archivo .css, el script lo comprimirá. vamos a ver
un ejemplo:

Tengo el archivo “ejemplo.css”, que viene incluido en la carpeta del CSSZIP, sin comprimir el
archivo pesa 11.28 Kb, y después de insertar los dos archivos en la carpeta queda pesando: 3.06 Kb

Antes de comprimir con Csszip

Despues de comprimirlo con Csszip

Dudas y comentarios a:
andreslara501@hotmail.com
http://twitter.com/andreslara501
http://donestandares.wordpress.com

Bajalo desde aqui:

http://76.164.236.73/~wwwtupo/csszip.zip

Pruebalo y me dices!!!!!





Fireworks en linux (Ubuntu) Con wine (Sin Virtualizar Windows)

24 09 2008

Hace algunos años era imposible ejecutar aplicaciones de windows en linux, ahora todo es mas facil y posible con el lanzamiento del wine 1, esto nos permite ya ejecutar aplicaciones como corel, fireworks, dreamweaver, photoshop, y un sin fin de .exe

El problema aun esta en los instaladores, por ejemplo el fireworks aun no deja instalarse de una. A diferencia del dreamweaver, que ya permite con instalador y todo.

Pero mi truco no esta en la instalación, sino en algo que se esta potenciando cada día, que son las aplicaciones portables, esas aplicaciones que con solo darles doble click ya abren, las que no se necesitan instalar.

Entonces los pasos para ejecutar el fireworks o dreamweaver en linux son:

1) buscar en Google “fireworks cs3 portable” o “dreamweaver portable”
2) descargarlos y dejarlos en el escritorio (Es mas cómodo después lo pasan para donde quieran)
3) Actualizar el “wine” a su ultima versión (Si no sabe busque en Google :P es que me da pereza) o sino con el gestor de actualizaciones de Ubuntu actualizas tu sistema completamente y listo, en el caso de que no tenga instalado el wine dele en APLICACIONES después en AÑADIR Y QUITAR… y coloque wine e instale :P y actualice no se olvide!!
4) después de instalado es tan sencillo como darle doble click al fireworks o dreamweaver portable y listo! Ya abre normalmente.

Si por alguna razón le abrió y no le volvió a funcionar como a mi amigo “Angel_fire “ es sencillo, abre el nautilus y te posicionas en la carpeta /home/nombredetuusuario y le das CONTROL + H y ahora muestra las carpetas ocultas, entonces buscas la carpeta “.wine” asi .wine con punto al inicio, esto indica que es una carpeta oculta, entonces la seleccionas y la borras, luego le das doble click al fireworks portable y si no te abre vuelvalo a hacer y veras que ya funciona :)

Asi es de bonito linux!, suerte ya saben dudas, comentarios y recomendaciones a:

http://twitter.com/andreslara501
andreslara501(arroba)hotmail.com

y ya! Suerte! Chau!





Como utilizar el modrewrite (Basico)

23 09 2008

Hola =)

“La continuacion de Es importante una buena “url” (Modrewrite)

Ayer hablamos de el modrewrite, hoy vamos a ver como hacer un ejemplo sencillo, muy básico.

Primero que todo vamos a crear un archivo “.htaccess“, ¿como lo hacemos?, en Internet nos dan algunas opciones, pero les voy a mostrar 2 sencillas:

1º- Descargarme un archivo que ya contenga el punto delante .htaccess y re nombrarlo. Descargar .htaccess

2º- Renombrar un archivo mediante la consola de windows.
Pasito a pasito:
2.1- Crea un archivo en blanco .txt y llévalo a c:/ (llámalo mismamente nuevo.txt)
2.2-Ve a Inicio (abajo a la izquierda en XP) luego clicka en Ejecutar… , escribe cmd y se abrirá la consola de windows.
2.3- Para asegurarnos que estamos en c:/ escribimos en la consola cd c:\ (si no lo estamos nos llevará)
2.4- Renombramos el archivo escribiendo rename nuevo.txt .htaccess

Tomado de: http://blog-indomita.blogspot.com/2008/06/crear-un-archivo-htaccess-o-loquesea-en.html

Si estas en linux es demasiado sencillo, simplemente creas un archivo en blanco y lo re nombras así “.htaccess” sin comillas lógico.

Bueno, ya después de creado, sigue el paso de modificar el contenido, por obvias razones esta en blanco, entonces lo primero que vamos a hacer es escribir esto:

Options +FollowSymLinks
RewriteEngine on
Rewriterule ^(.*)\_(.*)\.html$ index.php?pagina=$1&nombre=$2

si vemos la estructura que tiene es la siguiente, donde aparezca ^(.*)\ nos va a indicar que es la primera variable de la url, y el siguiente ^(.*)\ es la segunda variable, entonces en este caso la primera variable en la url la indico con $1 y la segunda con $2 y así consecutivamente, si vemos hay un guion bajo “_“, este es un carácter que yo usare para separar las variables. entonces la url en el navegador quedaría:

5_articulo-sobre-modrewrite.html

si vemos el 5 indica la pagina osea la variable $1, y el texto “articulo-sobre-modrewrite” nos indica la segunda variable osea $2.

Hagamos un ejemplo, digamos que se necesita por medio de modrewrite hacer una url bonita que quede por ejemplo,

la-pagina-de_andreslara501_lanzada-en-el_2008_y-el-es-de_colombia.html

¿Como la hacemos?, sencillo, la clave esta en saber identificar las variables.

Options +FollowSymLinks
RewriteEngine on
Rewriterule la-pagina-de_^(.*)\_lanzada-en-el_(.*)\_y-el-es-de_(.*)\.html$ index.php?nombre=$1&ano=$2&pais=$3

Ahora si vamos con la explicación, los ^(.*)\ van ubicados donde ira las variables en la url, como me muestra el ejemplo el primer ^(.*)\ contiene el nombre que es ANDRESLARA501 y es la variable $1, el segundo ^(.*)\ contiene el año y es la variable $2 que contiene 2008, y la tercera variable es $3 que contiene el país osea COLOMBIA.

Así podemos jugar con el modrewrite, haciendo muchas cosas muy vacanas (Sinónimo de chevere, divertido, espectacular, palabra muy usada en Colombia) así que anímate, entre mas lo uses en tus aplicaciones php, mejor serán, por que tus usuarios comprenderán mejor la url.

Recuerda que el archivo .htaccess va en la carpeta donde esta el archivo .php que le hagamos el tratamiento del modrewrite.

Chau y éxitos

Dato curioso: :P Escribiendo al final casi coloco “Modrewitter” :P jajajaja hay dios :P





Google no penaliza contenido duplicado

23 09 2008

Hace como 5 minutos encontre este blog chicaseo.com el cual en un articulo de el 15 de septiembre, habla sobre que google no penaliza el duplicado de contenido, para los que aun no se enganchan, el duplicado de contenido es cuando algunos “magos” del internet hacen mucho COPY & PASTE (Copiar y pegar) o por tecnicas de php sustraen el codigo de una web y lo imprimen en su propio sitio, esto hace algun tiempo se hablo que era penalizado por google, pero al parecer y segun el articulo dice que no.

Ahora si va mi opinion:

Creo que en el mundo de los blogs se maneja mucho el copy & paste, seria “ridiculo” que google penalizara este tipo de actos, ya que se reduciria el crecimiento de la web en un 60%.

les dejo el articulo a continuacion:

http://www.chicaseo.com/google-no-penaliza-sitios-con-contenido-duplicado/

Chau!.





Es importante una buena “url” (Modrewrite)

22 09 2008

imagen index

Cuando la internet comenzó su auge, todo era en .htm después se comenzó a usar el .html, y se comenzó a utilizar las paginas dinámicas, osea que el contenido no fuera fijo, por ejemplo paginas como:

index.php?pagina=3

Esto era contenido generado por la maquina (En este caso una computadora con Apache o algún programa para servidores). Entonces se generaban muchas paginas en relación a una base de datos.

Google siempre ha dado algunas pautas para el mejor funcionamiento de la web, como conocemos Google tiene el llamado “Googlebot”, que lo que hace es rastrear las web de la Internet, al hacer esto, se indexan webs tanto como .html como .php y .asp en fin, muchas webs con extensiones diversas, entonces Google miro que el contenido dinámico generado desde los php, como index.php?pagina=1 , index.php?pagina=2, index.php?pagina=3 y asi, eran contenidos que podrían ser falsos y solo sirven para aumentar el numero de paginas indexadas en el buscador.

A Google se le ocurrió que las paginas .html serian mejor catalogadas que las index.php?pagina=3…. pero hecha la ley, hecha la trampa, en php hay algo llamado “modrewrite” (Modulo de re escritura, Me perdonan si esta mal traducido) entonces el modrewrite lo que hace es cuando tu llames con alguna dirección lógica, te redireccione a una foto, o a un .php o a un .html, No me entendieron cierto?, jaja bueno aquí va el ejemplo:

Tenemos:

index.php?pagina=1

Aplicándole el modrewrite podría hacer que me quedara así:

articulo-sobre-modulo-de-re escritura-pagina_1.html

Como ves, se cambio la url “.php” por una “.html” y esto permite que Google valore mas nuestro articulo, esto también sirve a la hora de indexar el contenido en el buscador, por que le estaremos dando mas parámetros para que Google los agregue a la hora de encontrar una búsqueda. Por ejemplo:

si tienes la dirección index.php?pagina=1, el buscador a la hora de indexar, no esta tomando ninguna palabra clave de la url, pero cuando es: articulo-sobre-modulo-de-reescritura-pagina_1.html le estoy dando las palabras claves: “articulo”, “sobre”, ” Modulo”, “re escritura”, “Pagina”.

Todo esto sumado a una estructura basada en estándares, y un muy buen contenido original, nada de COPY & PASTE. Nos proporciona una buena indexacion en Google y en los mas afamados buscadores de la Internet.

Aclaro: Indexacion = El proceso que hace el buscador al momento de tomar información de documentos y archivos de Internet, para clasificar, ordenar y agrupar para la facilidad a la hora de la búsqueda.

Un ejemplo sencillo es de la pagina de ELTIEMPO.COM http://eltiempo.com a continuacion les muestro la captura donde pueden ver en la area de la url el modrewrite aplicado.


Mañana escribiré el articulo de un basico de modrewrite, por ahora pues les pido disculpas y si quieren pues peguen una googleada.

Cualquier cosa escriban a mi mail:

andreslara501(Arroba)Hotmail.com

o sino en mi twitter, igual pueden ver lo que estoy haciendo :P :

http://twitter.com/andreslara501





Volvi

17 07 2008

No estaba muerto, andaba de parranda! jajajaja

No mentiras, sino queandaba en varios proyectos, pero ahora ya ando mas sueltico, mas relajado.

Como novedad les cuento que tengo twitter para los que quieran estar al tanto de lo queh ago “si claro…”

www.twitter.com/andreslara501

Por la noche comienzo a publicar articulos, y tambien comenzare con trucos de programacion web desde UBUNTU





Separar los scripts del html

23 02 2008

html javascript, css

Hay un error común en nuestros sitios web, que es de principiante y es el de incluir código externo en el html, me refiero a esto:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

–>
</style>
</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Eso es ERRÓNEO, ¿Por que?, es sencillo, imagina que entran a tu web desde un móvil, este móvil solo admite HTML, no te admite css. que va a pasar… tu web… se va a cargar mas lento, la simple razón es que esta cargando código css que al móvil no le va a servir, por eso siempre digo que lo que es css, javascript y otros siempre vayan en un archivo aparte!.

Entonces lo correcto seria:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”css/fuentes.css” id=”stilecss” rel=”stylesheet” type=”text/css” />

<title>Untitled Document</title>

</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Lo que esta marcado con naranja es el llamado del archivo css externo, esto nos permite que no coloquemos directamente el código en el html. y así cuando el navegador web del celular, cuando vaya pasando por esa instrucción vera que es un archivo .css y dirá :O ami no me interesa el css, mejor sigo derecho y sigo mirando las demás etiquetas, en cambio si no tubieramos eso el navegador estaría diciendo font-family: Arial, Helvetica, sans-serif; , que es eso1! :S no entiendo, font-size: 18px; , no entiendo eso tampoco, ven… así que perderíamos segundos de carga y el usuario dinero en carga :P .





Una opinión sobre “width” y “height” en las imágenes

14 02 2008

  ancho

El problema de afirmar de forma tajante y sin lugar a dudas es que se pueden crear ideas equivocadas. Una de ellas es muy conocida en el mundillo web:

“No hay que usar tablas en el diseño”

Sin embargo eso se refiere únicamente a no utilizar tablas para maquetar la web. Lo que forma parte del diseño y su maquetación debe ser tarea del CSS, el contenido va para (x)HTML.

De la idea original se ha creada una que no es correcta y es que no se deben usar las tablas “para nada”. Las tablas son para tabular datos y si tenemos que hacer por ejemplo una comparativa lo más fácil es una tabla. Es absurdo crear un sistema de “tablas” de mediante cientos de “div’s”, clases y MUCHO código XHTML/CSS.

En el caso de las imágenes estoy viendo cada día más una idea “equivocada” de este tipo. Es el caso de no utilizar height="" o width="" ya que son atributos de representación que deberían ir al CSS.

Esto último es totalmente cierto. No se “deben” utilizar. Todavía hay cientos de sitios que tienen pendiente eliminar cientos de etiquetas de representación como <font> y atributos como size="".

Pero las imágenes dentro del contenido (las que no forman parte del diseño) ¿deben evitar estos atributos?. De primeras lo correcto sería añadir un identificador o clase a cada imagen y definir sus proporciones vía CSS pero a menos que queramos tener hojas de estilo de megabytes de tamaño y un cacao del copón no compensa mucho.

Viendo la situación creo que con las imágenes se puede especificar sin problemas el tamaño sin recurrir al CSS. En un sitio como SigT el utilizar o no los atributos no es problema pero ¿y en los artículos extensos con muchas imágenes?.

Ahí se hace especialmente molesto leer un artículo y que el texto pegue “saltos” a medida que se descargan las imágenes. Es en ese escenario cuando se hace necesario plantearse cosas como ésta.

“Todo por la experiencia del usuario, oye”.

Y sin embargo con este tema tan superficial ya he tenido varias discusiones con dos “fanáticos de los estándares” de los que “si no valida no es bueno” (como si el validador fuera perfecto). Pero lo mejor, y para más INRI, es que al utilizar estos atributos sigue validando…

Tomado de:

http://sigt.net/archivo/una-opinion-sobre-width-y-height-en-las-imagenes.xhtml 





Tipos de fuentes en css

14 02 2008

Fuentes

Holas :) en css se plantea mucho sobre las fuentes, lo ideal… es usarle las propiedades del css para que se vea bonito al usuario, y para nosotros fácil de manejar.

El css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarlas, no todas :p por que son demasiadas pero si las mas importantes.

Recuerda algo, por el momento no se pueden usar fuentes que el visitante no tenga instaladas, por ejemplo este tipo de letra, es muy bonita y hasta agradable, pero el problema es que si nosotros la instalamos en nuestra pc y trabajamos con css o en html con ese tipo de letra y la subimos a un servidor, esta en NUESTRA PC se va a ver muy bien, el problema es cuando nuestros usuarios abran nuestro sitio web, ellos no verán correctamente por que en la pc del usuario no esta instalada esta fuente.

Por ahora no existe forma de hacer solución a esto, pero lo único que podemos hacer es usar las fuentes default de “windows”, “linux”, “Mac os”, en fin… los sistemas operativos mas usados.

principalmente las fuentes default son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Cada renglón representa un grupo de fuentes, estos grupos están hechos para que tratar de que la web en cualquier sistema operativo sea visible CASI igual, vamos a ver su funcionamiento:

Arial, Helvetica, sans-serif

Si en el sistema operativo no se encuentra ARIAL, el navegador continua con la siguiente, que es Helvatica y si por cuestiones de configuración o lo que sea sigue con sans-serif.

Y que pasa si en el sistema operativo (Mi preferido :P Linux! ), no se encuentra ninguna de el grupo de fuentes?, pues muy sencillo el navegador tiene por defecto configurada un tipo de letra… esto permite que se pueda ver sin problemas.

Ahora… ya que sabemos esto, pasamos a la creación de CLASES PARA FUENTES

Lo primero es crear una fuente:

.fuente_titulos{
}

por que le coloque ese nombre?, Recuerda que es mas fácil identificar el css con nombres relacionados, entonces como es un tipo de fuente, entonces se le coloca al comienzo pues FUENTE, recuerda no dejar espacios.

ahora pasamos a crear las propiedades de esa clase, entonces:

.fuente_titulos{
color:#00699C;
font-size:1.1em;
font-family:”trebuchet MS”, Arial, Helvetica, sans-serif;
}

Lo primero, la propiedad COLOR, es lógico, es el color que le queremos darle a la fuente.
En lo segundo hay una parte que necesito hablar con ustedes :P , y es relacionada con el tamaño de fuente. En css se admiten varios tipos de “medidas” para el tamaño del texto, una de ellas es el PX, Que muchos lo conocen, 12px, 14px, etc… pero… es recomendable que usemos EM, osea 0.8138 em, 0,7340 em, etc… esto lo explicare mas adelante, pero les voy a dar el truco para usar tamaños en em, todo esta en la conversión. Si ustedes digamos tienen 13 px, para pasarlo a em simplemente cojen y multiplican 13 x 0.0626 , osea cojen el valor en px y lo multiplican por 0.0626, este ultimo valor es un numero que equivale a 1 px, entonces al momento que multiplicamos pues nos da el valor jeje.

Lo tercero es el grupo de fuentes, entonces el dreamweaver ya viene con la opción de colocar las básicas igual arriba ya les escribí cuales son. recuerda que solo se puede declarar un grupo, también puedes crear tus propios grupos, pero estos ya están organizados para que sean compatibles y similares.





Como nombrar correctamente los divs y las clases

10 02 2008

Cuando estas trabajando con paginas pequeñas, no tienes muchos problemas con los nombres, pero un error que uno comete generalmente es el de nombrar las clases y los objetos con cosas que uno esta pensando, entonces por ejemplo “.claudia”, “#careperro” y así cosas así. pero no eso no es lo correcto.

lo correcto es crear nombres relacionados a la posición, función y contenedores… osea si el div que vamos a crear esta dentro de un div llamado CABEZOTE, y su función es contener el logo, entonces quedaría algo así:

#cabezote_logo{
}

Ves.. es algo mas organizado, esto que nos permite, que a la hora de ubicarnos y buscar un div en especificio, lo encontraremos en menor tiempo que si estan nombrados al azar.

Recuerda no dejar espacios, pues estos le dan una orden especial al navegador que después veremos.