martes, 10 de noviembre de 2009

14 Steps - CSS sprites

CSS spritesAhora mostraremos como hacer sprites en CSS. La técnica consiste en coger una imagen y localizar una zona que la usaremos para mostrar un trozo de la imagen. Lo que conseguimos con los sprites es reducir las peticiones http de imágenes.

Lo que queremos es crear diferentes botones, con la imagen que mostramos a la izquierda. Lo que tendremos que hacer es ir al CSS y modificar el CSS e introducirle los backgrounds indicando que zona de la imagen debe poner en cada botón:







a.ejemplo {display:block; font-weigh:bold; padding:10px 10px 10px 10px; text-decoration:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF04zIki3Bcab-YWaA2vdMKl39a0f7aHp7ie3OMtg8Wb8HbtR2Yj6Zp57RBywuzsIBZ_vVoScV1-bcJfnHMV_Lz0zMuMcmLYHOs8IoZYfId9xajeW_AKG_n1dBdYeUWUNvBeWFyt7oCqo6/s400/botones.gif) 0px 0px;text-align:center;color:#fff}
a:hover .ejemplo {text-decoration:underline;}


Aquí vemos el ejemplo:

Botón

Claves para la optimización web (14 Steps)

A continuación veremos como mejorar el rendimiento de una web en entornos LAMP. Casi todas estas prácticas se pueden utilizar en otros entornos.
  1. Hacer menos peticiones http
  2. Usar CDN
  3. Añadir Expires Headers
  4. Gzip Componentes
  5. Poner hojas de estilo al principio
  6. Poner scripts al final
  7. Evitar CSS expressions
  8. CSS y Scripts externos
  9. Reducir consultar DNS
  10. Minimizar Javascripts
  11. Evitar redirecciones
  12. Borrar scripts duplicados
  13. Configurar Etags
  14. Hacer ajax cacheable

lunes, 9 de noviembre de 2009

14 Steps - Mapas de imagen html

Ahora veremos cuando podemos utilizar un mapa de imágenes en nuestras web. Nos puede ser útiles en menús de inicio (home) y también cuando tenemos una imagen en la que tenemos diferentes zonas para hacer click.
Ahora mostraremos un ejemplo en el que podremos hacer click en cada uno de los primeros cuatro equipos que vemos en la imagen.



Almería
Atlético de Bilbao
Atlético de Madrid
Tenerife


Este es el código necesario para realizar el ejemplo,

<img id="Image-Maps_5200911091044394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTyoTAsKCY46-ElZIMciydoe5ztYGR2R58OJ-Wa0vaprw9l2tYFXatSqQCSnfHnDqoChYMGri9cxFrKfG7UhyphenhyphenKkas9qqB977wCeN-p5wqY38CocTgNC5gAT6ahP5vYGfZBoWyKunGKulQ/" usemap="#equipo" />
<map name="equipo">
<area shape="rect" coords="15,0,73,72" href="http://www.almeriaunion.com/" alt="Almería" title="Almería">
<area shape="rect" coords="72,0,127,72" href="http://www.miathletic.com/" alt="Atlético de Bilbao" title="Atlético de Bilbao">
<area shape="rect" coords="127,0,182,72" href="http://www.colchonero.com/" alt="Atlético de Madrid" title="Atlético de Madrid">
<area shape="rect" coords="181,0,233,72" href="http://www.vamostenerife.com/" alt="Tenerife" title="Tenerife">
</map>

viernes, 6 de noviembre de 2009

Trucos CSS (Tutorial parte 11) - Comprimir el CSS

En servidores como apache en el archivo .htaccess podemos escribir una directriz e indicar al servidor que cuando envie un archivo CSS lo comprima para que su peso sea menor. El cliente se encarga de descomprimir el archivo.

¿Cómo activar la compresión dentro del archivo .htaccess?

<IfModule mod_deflate.c>
AddType application/php .php
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>


Trucos CSS (Tutorial parte 11) - Comprimir el CSS

Trucos CSS (Tutorial parte 10) - Minimizar CSS

Para minimizar el CSS tenemos que utilizar programas o scripts de minimización. Estos programas eliminarán los caracteres no visibles y los comentarios. Incluso hay programas de minimización capaces de unir dos archivos en uno. Esto nos permite una mayor velocidad en la descarga del CSS.

Aquí tenemos un programa que se llama minify que hace lo mencionado antes. Descarga Minify

Trucos CSS Trucos CSS (Tutorial parte 10) - Minimizar CSS

Trucos CSS (Tutorial parte 9) - Utilizar Sprites

¿Qué es un Sprite?
Un Sprite es coger un trozo de una imagen y colocarla en un lugar de la web. Todos pensamos que los sprites se utilizan sólo con icono, es decir imágenes pequeñas para ello veremos los sprites de www.softonic.com. que utilizan una imagen para colocar fondos de cabeceras y la imagen es de gran tamaño.

CSS sprite
Trucos CSS Trucos CSS (Tutorial parte 9) - Utilizar Sprites

Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Aquí no quiero alargarme mucho porque lo que se tiene que explicar está todo en la Cheat Sheet de CSS. Ahí encontraremos el pdf que no explica como utilizar las abreviaturas de CSS.
  • background-color, background-repeat, background-image, background-position, -> background
  • Text-align, text-shadow, text-indent -> text
  • Font-family, font-style, font-variant, font-weight, font-stretch, font-size -> font
  • Border-left, border-right, border-top, border-bottom -> border

Trucos CSS Trucos CSS (Tutorial parte 8) - Abreviaturas de CSS

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Los navegadores nos permiten reducir el tamaño de un color específico abreviandolo. De esta manera reducimos el tamaño del CSS. La abreviación del color consiste en elegir un color que tenga dos cifras iguales; veamos el ejemplo:

#FFCC66 se puede abreviar en #FC6

Es verdad que no es una gran mejora, pero todo ayuda.

Trucos CSS (Tutorial parte 7) - Los colores en CSS

Trucos CSS (Tutorial parte 6) - min-height en IE

La propiedad min-height la reconocen todos los navegadores menos Internet Explorer. Para emular este comportamiento en el navegador Internet Explorer debemos hacer lo siguiente:

Firefox, Opera, Chrome: min-height:100px;
IE: min-height:100px;height:auto !important; height:100px;

Trucos CSS (Tutorial parte 6) - min-height en IE

Trucos CSS (Tutorial parte 5) - Usar clases aninadas

¿Cómo usar clases anidadas en CSS?
Para que nos entendamos, usar clases anidadas o identificadores anidados quiere decir poner varias propiedades dentro de los id ó class de css. Para ver cómo usar las clases anidadas, haremos un ejemplo y quedará explicado.
Primero debemos preparar las clases a anidar en css.

.blanco{color:#ffffff;}
.azul{color:#5c7999;}
.naranja{color:#eabd82;}

.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}

.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs14{font-size:14px}
.fs15{font-size:15px}

.mt5{margin-top:5px}
.mr5{margin-right:5px}
.ml5{margin-left:5px}
.mb5{margin-bottom:5px}
.m5{margin:5px}

.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pl5{padding-left:5px}
.pb5{padding-bottom:5px}
.p5{padding:5px}


Una vez definidos nuestros estilos en el archivo CSS, vamos al archivo html y lo editamos. Si tenemos un texto que queremos que se alinee a la derecha, que tenga un margen derecho de 5 px, un padding derecho de 5 px, fuente 10 px y color naraja, lo podemos definir en el CSS de la siguiente forma:


.estilo_parrafo{text-align:right;padding-right:5px;margin-right:5px;color:#eabd82;font-size:10px}

<p class="estilo_parrafo">Este es el párrafo</p>

Con clases anidadas haríamos:

<p class="mr5 pb5 fs_10 naranja tar">Este es el párrafo</p>

Trucos CSS (Tutorial parte 5) - Usar clases anidadas

Trucos CSS (Tutorial parte 4) - Hacks de Internet Explorer

Como todos sabemos Internet Explorer tiene siempre un comportamiento diferente de todos los standares. Por esto hay hacks que nos permiten introducir estilos o propiedades sólo para Internet Explorer.

Hacks: para Internet Explorer 6 tenemos el hack "_" y para Internet Explorer 6 y 7 tenemos el hack "#". A continuación mostraremos un ejemplo para ver como debemos utilizar estos hacks dentro de nuestra hoja de estilos.


//en todos los navegadores tendremos un margen de 10 pixeles
div img{width:100px;margin:10px;}

//en explorer 6 y 7 tendremos un margen de 15 pixeles
div img{width:100px;margin:10px;#margin:15px}

//en explorer 7 tendremos un margen de 15 pixeles y en explorer 6 un margen de 20 pixeles
div img{width:100px;margin:10px;#margin:15px;_margin:20px}


Trucos CSS (Tutorial parte 4) - Hacks de IE

Trucos CSS (Tutorial parte 3) - Reset al CSS

¿Porqué hacer un reset del CSS?
La razón de hacer al principio del CSS un reset es igualar el comportamiento de todos los navegadores. Tenemos que tener en cuenta que no todos los navegadores tienen los mismos estilos por defecto.

Aquí es dónde nos encontramos con mayor diferencia. Internet Explorer funciona de diferente manera que el resto de navegadores como Firefox, Chrome, Opera, Safari, etc...

Al resetear el CSS facilitamos la maquetación de la página web. Empezamos a crear los estilos desde 0.

A continuación mostramos como hacer un reset de un CSS.
/****************************
*** RESET ***
****************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:??; }
abbr,acronym { border:0; }
form label { cursor:default }
a{outline:none;}
a img{border:0px}


Trucos CSS (Tutorial parte 3) - Reset al CSS

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Dividir el CSS en parte Pública y parte Privada, es decir, si nuestro portal tiene una parte que necesita identificar al usuario con login y password. En este caso vale la pena que creemos un CSS para la parte privada.
Ej: css_publico.css y css_privado.css

Con esta implementación mejoramos el tiempo de descarga del CSS. El navegadores renderizará más rápido los estilos y el usuario tendrá una mejor experiencia.

Trucos CSS (Tutorial parte 2) - Dividir el CSS

Trucos CSS (Tutorial parte 1)

Este pequeño tutorial de CSS nos ayudará a mejorar la hoja de estilos para que se descargue con mayor velocidad y tenga un comportamiento similar en todos los navegadores.

Índice del tutorial de CSS

  1. Dividir el CSS
  2. Reset al CSS al principio
  3. Hacks de Internet Explorer
  4. Usar clases anidadas
  5. min-height en IE
  6. Los colores en CSS
  7. Abreviaturas propias de CSS
  8. Utilizar Sprites
  9. Minimizar el CSS
  10. Comprimir el CSS

jueves, 5 de noviembre de 2009

htaccess Time Cheat Sheet

Aquí tenemos un listado para saber que valor tenemos que poner a las caches.


# 300 5 MIN
# 600 10 MIN
# 900 15 MIN
# 1800 30 MIN
# 2700 45 MIN
#
# 3600 1 HR
# 7200 2 HR
# 10800 3 HR
# 14400 4 HR
# 18000 5 HR
# 36000 10 HR
# 39600 11 HR
# 43200 12 HR
# 46800 13 HR
# 50400 14 HR
# 54000 15 HR
# 86400 24 HR



# 86400 1 DAY
# 172800 2 DAY
# 259200 3 DAY
# 345600 4 DAY
# 432000 5 DAY
# 518400 6 DAY
# 604800 7 DAY
#
# 604800 1 WEEK
# 1209600 2 WEEK
# 1814400 3 WEEK
# 2419200 4 WEEK



# 2419200 1 MONTH
# 4838400 2 MONTH
# 7257600 3 MONTH
# 9676800 4 MONTH
# 12096000 5 MONTH
# 14515200 6 MONTH
# 16934400 7 MONTH
# 19353600 8 MONTH
# 21772800 9 MONTH
# 24192000 10 MONTH
# 26611200 11 MONTH
# 29030400 12 MONTH

Caching with mod_headers, htaccess

Aquí tenemos un ejemplo de como se usa mod_headers.c
# 3 Month
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=7257600"
</FilesMatch>
# 1 Week
<FilesMatch "\.(js|css|pdf|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# 10 Minutes
<FilesMatch "\.(html|htm)$">

Header set Cache-Control "max-age=600"
</FilesMatch>
# NONE
<FilesMatch "\.(pl|php|cgi|spl)$">
Header unset Cache-Control
Header unset Expires
Header unset Last-Modified
FileETag None
Header unset Pragma
</FilesMatch>

Caching with mod_expires - htaccess

Aquí tenemos un ejemplo de cómo cachear con mod_expires.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>

Ejemplos expresiones regulares, php

Validar un nombre de usuario

Esta regla es para permitir usuarios de 4 hasta 28 caracteres de longitud, alfanuméricos y permitir guiones bajos.

$string = "userNaME4234432_";
if (preg_match('/^[a-zd_]{4,28}$/i', $string)) {
echo "example 1 successful.";
}

Números telefónicos

Esto es para validar números de teléfono (en el formato de Estados Unidos, Canadá y México) el número debe ser de la siguiente manera: (###)###-####

$string = "(032)555-5555";
if (preg_match('/^((?[0-9]{3,3})?|[0-9]{3,3}[-. ]?)[ ][0-9]{3,3}[-. ]?[0-9]{4,4}$/', $string)) {
echo "ejemplo 2 realizado con éxito.";
}

El número de teléfono puede ser escrito así (###) ###-####, o así ###-###-#### y también va a validar.

Direcciones de Email

No hace falta decir más el código es el siguiente.

$string = "first.last@domain.co.uk";
if (preg_match(
'/^[^0-9][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[@][a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{2,4}$/',
$string)) {
echo "ejemplo 3 realizado con éxito.";
}

Códigos postales

Códigos postales de que permite solo números en el siguiente formato xxxxx y xxxxx-xxxx

$string = "55324-4324";
if (preg_match('/^[0-9]{5,5}([- ]?[0-9]{4,4})?$/', $string)) {
echo "ejemplo 4 realizado con éxito.";
}

Direcciones IP

No necesitamos hacer un PING ni nada por el estilo, sólo verificamos que estén bien escritas, cómo este ejemplo 255.255.255.0.

$string = "255.255.255.0";
if (preg_match(
'^(?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)(?:[.](?:25[0-5]|2[0-4]d|1dd|[1-9]d|d)){3}$',
$string)) {
echo "ejemplo 5 realizado con éxito.";
}

Colores hexadecimales

Ya que hablamos de números tambien podemos verificar valores hexadecimales de números en sus 2 formas la normal y la abreviada (#333, 333, #333333 o 333333) con el símbolo # opcional.

$string = "#666666";
if (preg_match('/^#(?:(?:[a-fd]{3}){1,2})$/i', $string)) {
echo "ejemplo 6 realizado con éxito.";
}

Buscar comentarios multi-línea

Una forma simple de buscar o eliminar comentarios multilínea en PHP/CSS/Otros lenguajes.

$string = "/* commmmment */";
if (preg_match('/^[(/*)+.+(*/)]$/', $string)) {
echo "ejemplo 7 realizado con éxito.";
}

Fechas

Uno de los formatos de fechas típicos es el MM/DD/YYYY y su validación es la siguiente.

$string = "10/15/2007";
if (preg_match('/^d{1,2}/d{1,2}/d{4}$/', $string)) {
echo "ejemplo 8 realizado con éxito.";
}

URL o dirección

Comprobar si una dirección web está bien escrita.

$szString = "http://www.talkPHP.com";
if (preg_match('/^(http|https|ftp):\/\/([\w]*)\.([\w]*)\.(com|net|org|biz|info|mobi|us|cc|bz|tv|ws|name|co|me)(\.[a-z]{1,3})?\z/i', $szString))
echo "Es una dirección URL válida";

Cheat Sheet - Librerias Javascript

Librerias Javascript, Prototype
Librerias Javascript, JQuery
¿Qué son las librerias javascript?
La librerias Javascript son como una biblioteca o framework, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

Aquí tenemos dos librerias conocidas una Prototype y la otra JQuery. En los pdf's podremos ver todas las funcionalidades que nos aportan estas pequeñas librerias pero a la vez tan potentes. Además mucha gente desarrolla plugins para estas librerias.

miércoles, 4 de noviembre de 2009

Cheat Sheet - expresiones regulares

Cheat Sheet - expresiones regulares Cheat Sheet - expresiones regulares ¿Qué es una expresión regular? Una expresión regular, a menudo llamada también patrón, es una expresión que describe un conjunto de cadenas sin enumerar sus elementos. Por ejemplo, el grupo formado por las cadenas Handel, Händel y Haendel se describe mediante el patrón "H(a|ä|ae)ndel".

La mayoría de las formalizaciones proporcionan los siguientes constructores: una expresión regular es una forma de representar a los lenguajes regulares (finitos o infinitos) y se construye utilizando caracteres del alfabeto sobre el cual se define el lenguaje. Específicamente, las expresión regular se construyen utilizando los operadores unión, concatenación y clausura de Kleene.

En el pdf de expresiones regulares podréis encontrar ejemplos útiles para la utilización en tu propia web, por ejemplo: validar e-mails, validar tags html, validar una fecha, etc...

Cheat Sheet - mod_rewrite

Cheat Sheet - mod_rewriteCheat Sheet - mod_rewrite ¿Qué es mod_rewrite? Mod_rewrite es un motor de reescritura que modifica la apariencia de una URL. La utilizar de reescribir una dirección web es para proveer al usuario ó crawlers una mejor experiencia. Con la que se quiere conseguir que se recuerde más fácilmente la URL.

En el pdf de mod_rewrite podemos ver como se construye una nueva url. También podemos acceder variables http, del servidor, etc...

Cheat Sheet - JavaScript

Cheat Sheet - JavaScript ¿Qué es el Javascript? JavaScript es un lenguaje de scripting basado en Objetos, utilizado para acceder a objetos en aplicaciones. Es utilizado, principalmente, integrado en un navegador web permitiendo el desarrollo de interfaces de usuario mejoradas y páginas web dinámicas.

En el pdf de Javascript se incluye información sobre los métodos del DOM, funciones de tratamiento de strings, funciones de ventana, expresiones regulares...

Cheat Sheet - MySQL

Cheat Sheet - MySQL En la Cheat Sheet de MySQL encontraremos todos los tipos de datos que soporta MySQL. También encontaremos todas las funciones que es capaz de hacer este motor de bases de datos incluso se nos muestran algunos ejemplos de consultas básicas a una tabla.

Otra parte a tener en cuenta es la columna que relaciona MySQL con php. En la columna se nos muestran las funciones en php que obtienen datos de una consulta a la base de datos MySQL.

Cheat Sheet - RGB, Hexadecimal colores

Cheat Sheet - RGB, Hexadecimal colores Par mejorar el rendimiento de una hoja de estilos CSS podemos utilizar los métodos abreviados para los colores. De esta forma podemos pasar a escribir #FC6 en vez de #FFCC66. Gracias a esta abreviación podemos hacer que los archivos css pesen menos y así el tiempo de descarga sea menor.

En la hoja Cheat Sheet - RGB, Hexadecimal colores encontraremos una gran variedad de colores en los que podremos aplicar está pequeña mejora, optimización.

martes, 3 de noviembre de 2009

Cheat Sheet - css

Cheat Sheet - css Cheat Sheet - cssEn las Cheat Sheet de CSS ver la sintaxis de las hojas de estilo (Cascade Style Sheet). En el pdf nos muestra como seleccionar elementos dentro del código html con css, como posicionar un elemento, como darle unos estilos a un elemento, etc...

También podremos ver cuales son los shorthand properties de css.

Cheat Sheet - php

Cheat Sheet - php Cheat Sheet - phpAquí tenemos la primera y la segunda version de las Cheat Sheet de php. Podremos saber de un vistazo las funciones más usadas en vectores, strings, archivo (abrir, guardar, leer), expresiones regulares, la función de fecha date(), etc...

Cheat Sheet - html

Cheat Sheet - htmlEn el pdf de Cheat Sheet html podremos ver con un simple vistazo como son cada uno de los tags que html permiten. También podremos ver los atributos permitidos para un tag e incluso los eventos posibles del html.

lunes, 2 de noviembre de 2009

Cheat Sheet - html character entities

Cheat sheet htmlA continuación tenemos todo los símbolos disponibles en el abecedario y más en formato html. Gracias a la Cheat Sheet de html podemos saber la codificación necesaria para poner acentos, comas, símbolo de euro etc...

Entradas populares