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

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

¿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.

Descarga pdf Prototype

Descarga pdf JQuery

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...

Descarga pdf v1

Descarga pdf v2

Cheat 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...

Descarga pdf v1

Descarga pdf v2

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...

Descarga pdf

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.

Descarga pdf