Archive

Archive for the ‘tutoriales’ Category

Optimizar javascript con HeadJS

24/11/2012 2 comentarios

HeadJS es una libreria muy buena, que optimiza al máximo la carga de todos los javascripts de tu web, cargándolos de manera asisncrona de forma que se carguen mas rapido que de la forma habitual, o sea al final del html antes de la etiqueta </body>.

Un ejemplo práctico:

1. Lo que el usuario novato suele hacer…(al principio)

<!doctype html>
<html>
<head>
<meta charset=”utf-8″/>
<title>SCRIPT SRC in head</title>
<link rel=”stylesheet” href=”estilo.css”>
<script src=”http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js”></script&gt;
</head>
<body>
<div id=”wrap”>
….contenido
fin contenido….
</div>
</body>
</html>

2. Lo que recomiendan en casi todos lados para optimizar la velocidad….(al final)

<!doctype html>
<html>
<head>
<meta charset=”utf-8″/>
<title>SCRIPT SRC at bottom</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body>
<div id=”wrap”>
….contenido
fin contenido….
</div>
<script src=”http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js”></script&gt;
<script src=”http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js”></script&gt;
</body>
</html>

3. Lo que yo hago y recomiendo…de verdad se nota el cambio (usar HeadjS)

<!doctype html>
<html>
<head>
<meta charset=”utf-8″/>
<title>SCRIPT SRC con headjs</title>
<link rel=”stylesheet” href=”estilo.css”>
<script src=”../js/head.min.js”></script>
head.js(“http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js&#8221;)
.js(“http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&#8221;)
.js(“http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js&#8221;)
.js(“http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js&#8221;)
.js(“http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js&#8221;);
</head>
<body>
<div id=”wrap”>
….contenido
fin contenido….
</div>
</body>
</html>

Solo debeis añadir el javascript de HeadjS y juego cargar con head.js(“una libreria”) seguido de .js(“otra libreria”) y finalizar con ;

Eso es todo probadlo y vereis los cambios…

Si no sabeis que descargar os dejo la versión 0.99 de la libreria y minimizada para descargar. Es esta http://db.tt/Tn08GgBl

Un saludo. nos veremos pronto.

Optimizar web con 1and1


En el siguiente post y demás que seguiré publicando veremos los posibles problemas que he encontrado al tener una pagina web alojada en 1&1.

En el primer caso hablaré del servicio contratado por mi para mi cliente: es 1&1 Dual Básico, que es lo suficientemente potente para comenzar a programar sin problemas de espacio y en html, css, javascript y php.

Antes de seguir con el tutorial debereis saber un par de cosas de vuestro servidor, en este caso la ruta por defecto de vuestra pagina web alojada en el.

1. Debeis ir a Dominios y espacio web

2. Pinchais en el y vais a la primera opción que es Dominios

3. Seleccionais el dominio que deseais ver , en mi caso es alonsomotorracing.com(MX)

4. Y os mostrara la información requerida. En mi caso y el vuestro supongo, es del estilo /homepages/43/numero/htdocs/.

(Recordar que numero es un numero asociado a cada uno, no pongo el mio por razones evidentes)

5. Ya habiendo apuntado este dato vamos al siguiente paso

6. Deseais que vuestra web por razones de compresión utilice GZip, que por defecto viene desactivada en 1&1 por razones de seguridad.

7. Creais un arhivo php.ini que sobreescribará las opciones por defecto que tiene vuestro servidor y muy importante para que funcione debeis ponerlo en cada carpeta de vuestra web que querais optimizar, me explico, si quereis optimizar los css y los teneis en una carpeta destinada para ello (p.e. /css) pues meteis el php.ini dentro, si teneis otra con los javascripts (p.e. /js) pues haceis lo mismo. y el raiz tambien deberá ir para que lea tambien los archivos html o php. ¿Ententdido? Seguimos.

8. El archivo a crear con nombre php.ini es el siguiente:

allow_url_fopen = on
zlib.output_compression = on
zlib.output_compression_level = 9
auto_prepend_file = [ruta fisica]/contentHeader.php
session.use_cookies = off

9. Donde pone [ruta fisica] poneis la ruta que averiguaisteis antes…la de /homepages/43/numero/htdocs/. (quitais el puntito del final) o sea que quedaria asi:

allow_url_fopen = on
zlib.output_compression = on
zlib.output_compression_level = 9
auto_prepend_file = /homepages/43/numero/htdocs/contentHeader.php
session.use_cookies = off

10. Ahora queda crear otros dos archivos uno es el que aparece en este php.ini que es contentHeader.php, aunque podeis ponerle el nombre que deseeis.

11. El archivo en cuestion es el siguiente:

<?php
$pathinfo = pathinfo($_SERVER[‘PHP_SELF’]);
$extension = $pathinfo[‘extension’];
if($extension == “css”) {
header(“Content-type: text/css”);
header(“Cache-Control: max-age=604800, public”);
header(“Last-modified: 2011-09-24 20:10”);
}
if($extension == “js”) {
header(“Content-type: text/javascript”);
header(“Cache-Control: max-age=604800, public”);
header(“Last-modified: 2011-09-24 20:10”);
}
if($extension == “html”) {
header(“Content-type: text/html”);
}
?>

12. Este archivo solo va en el raiz de vuestra web y será llamado por el php.ini que habeis colocado en vuestros directorios a comprimir. Solo funciona con css, js, html y php. No lo hagais en los de las imagenes, sino se corromperán las cabeceras.

13. El último archivo es el .htaccess que funciona sobre Apache y en este caso con el 1&1 Dual Básico de mi servidor, no lo he probado en otros sitios, aunque en los gratuitos algunos lo permiten…esos si los he comprobado.

14. El archivo es el siguiente: (debeis crearlo como querais y con el programa que querais, pero al guardarlo con el nombre htaccess debeis añadirle el punto al principio para que quede oculto en el servidor.

# Apache configuration file
# httpd.apache.org/docs/2.2/mod/quickreference.html

# ———————————————————————-
# Webfont access
# ———————————————————————-

<FilesMatch “\.(ttf|otf|eot|woff|font.css)$”>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
</FilesMatch>

# ———————————————————————-
# Proper MIME type for all files
# ———————————————————————-

# Audio
AddType audio/ogg oga ogg
AddType audio/mp4 m4a

# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm

# Proper svg serving. Required for svg webfonts on iPad
# twitter.com/FontSquirrel/status/14855840545
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

# Webfonts
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff

# Assorted types
AddType image/x-icon ico
AddType image/webp webp
AddType text/cache-manifest appcache manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall xpi
AddType application/octet-stream safariextz
AddType text/x-vcard vcf

# ———————————————————————-
# Gzip compression
# ———————————————————————-

<IfModule mod_deflate.c>
#The following line is enough for .js and .css
AddOutputFilter DEFLATE js css

#The following line also enables compression by file content type, for the following list of Content-Type:s
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml

#The following lines are to avoid bugs with some browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Webfonts and SVG:
<FilesMatch “\.(ttf|otf|eot|svg)$” >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

#—————————————————————–
# Estas dos lineas siguientes son especificas para el servidor 1&1
#—————————————————————–
AddType x-mapp-php5 .php .html .htm .js .css
AddHandler x-mapp-php5 .php .html .htm .js .css

# ———————————————————————-
# Expires headers (for better cache control)
# ———————————————————————-

<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Your document html
ExpiresByType text/html “access plus 0 seconds”

# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”

# RSS feed
ExpiresByType application/rss+xml “access plus 1 hour”

# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”

# Media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”

# Webfonts
ExpiresByType font/truetype “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

# CSS and JavaScript
ExpiresByType text/css “access plus 1 week”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType text/javascript “access plus 1 week”

<IfModule mod_headers.c>
Header append Cache-Control “public”
</IfModule>

</IfModule>

# ———————————————————————-
# ETag removal
# ———————————————————————-

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>

FileETag None

# ———————————————————————-
# Start rewrite engine
# ———————————————————————-

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
</IfModule>

# ———————————————————————-
# Suppress or force the “www.” at the beginning of URLs
# Aqui teneis dos opciones la elegida por mi es la segunda, si vosotros
# quereis la primera, quitad los comentarios (#) de delante de las lineas
# pertinentes y ponerlas en la segunda opcion, las dos no pueden estar
# activadas a la vez.
# ———————————————————————-

# Option 1:
# Rewrite “www.domain.com -> domain.com”

#<IfModule mod_rewrite.c>
# RewriteCond %{HTTPS} !=on
# RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
# RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
#</IfModule>

# ———————————————————————-

# Option 2:
# To rewrite “domain.com -> http://www.domain.com&#8221; uncomment the following lines.

<IfModule mod_rewrite.c>
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
RewriteCond %{HTTP_HOST} (.+)$ [NC]
RewriteRule ^(.*)$ http://www.%1/$1 [R=301,L]
</IfModule>

# ———————————————————————-
# Prevent 404 errors for non-existing redirected folders
# ———————————————————————-

Options -MultiViews

# ———————————————————————-
# Custom 404 page
# ———————————————————————-

ErrorDocument 404 /404.html

# ———————————————————————-
# UTF-8 encoding
# ———————————————————————-

# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset utf-8

# Force UTF-8 for a number of file formats
AddCharset utf-8 .html .css .js .xml .json .rss

# ———————————————————————-
# A little more security
# ———————————————————————-

Options -Indexes

# Block access to “hidden” directories whose names begin with a period. This
# includes directories used by version control systems such as Subversion or Git.
<IfModule mod_rewrite.c>
RewriteRule “(^|/)\.” – [F]
</IfModule>

# ————————————————————————-
# DISABLE HOTLINKING
# donde pone unas lineas mas abajo nombredominio sustituir por el vuestro
# solo el nombre (p.e. alonsomotorracing) sin www ni .com ¿ok?
# ————————————————————————-
RewriteEngine on
# Options +FollowSymlinks
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?nombredominio/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|js|css)$ – [F]

Para los que no os guste el copia y pega os dejo un archivo comprimido con los tres archivos listos. El enlace es http://db.tt/5alJITCI

Eso es todo por ahora…seguire en otros tutoriales otro tipo de optimizaciones para imagenes y demás partes relacionadas con la web. Un saludo a todos.

Mas libros añadidos (Actualizado 02/02/12)…


En el menu de Libros he añadido unos pocos libros nuevos y curiosos sobre programacion, paginas web, servidores y HTML 5 / CSS 3, incluyendo un manual de desobediencia sobre la Ley Sinde.

Y una segunda parte con manuales web de HTML, XHTML, CSS, AJAX y Python 3.

Además he añadido 2 nuevas secciones…una sobre Java y otra sobre MySQL…que mientras pueda ire actualizando…(en español si me es posible)

Espero que os ayuden…por cierto los enlaces debido a las restricciones que ultimamente hay en Internet corresponden a mi cuenta de DROPBOX….pinchad los enlaces y los que tengais Chrome/Chromium vereis el PDF en el navegador…un saludo.

Instalacion de Ruby on Rails en Linux

05/05/2011 1 comentario

Ruby es un lenguaje de programación interpretado. Ruby funciona con cualquier sistema operativo moderno, pero se siente más “en casa” en sistemas tipo Unix (como por ejemplo y es nuestro caso de instalación un Linux).

La manera en que instalemos ruby depende mucho de nuestro tipo de máquina y sus necesidades. Es recomendable que lea todo lo relevante a la plataforma que desee instalar antes de que haga una decisión acerca de cómo instalarlo.

http://www.ruby-lang.org/es/

http://www.pablasso.com/2009/01/12/%C2%BFcomo-instalar-ruby-on-rails-en-ubuntu

http://www.noticias-tecnologia.com.ar/tutoriales/instalar-ruby-on-rails-en-windows/

Pasos rápidos y sencillos (Para Linux Ubuntu 10.04, 10.10 y 11.04):

NOTA: DEBE SER UNA INSTALACIÓN LIMPIA, ME REFIERO DESDE CERO…DESINSTALANDO TODO AQUELLO QUE TUVIÉSEMOS EN EL DISCO RELACIONADO CON RUBY, RAILS, GEM O REDCAR….

mike@m7:~$ sudo apt-get install rails

Una vez todo instalado, incluidas las dependencias, tendréis un entorno listo para funcionar…pero si queremos tener las ultimas versiones de todo no tendremos otro remedio que seguir los siguientes pasos para poder tenerlos.

mike@m7:~$ sudo apt-get install build-essential git-core curl

mike@m7:~$ bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

mike@m7:~$ echo ‘[[ -s “$HOME/.rvm/scripts/rvm” ]] && source “$HOME/.rvm/scripts/rvm”‘ >> ~/.bashrc

En otra consola diferente, cerráis la que esta abierta y volvéis a abrir otra diferente (sino no funcionara)

mike@m7:~$ rvm notes

mike@m7:~$ sudo apt-get install build-essential bison openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev

mike@m7:~$ sudo gem install sqlite3-ruby

mike@m7:~$ rvm install ruby-1.9.2

mike@m7:~$ rvm use ruby-1.9.2 –default

mike@m7:~$ gem update –system

mike@m7:~$ gem install rails

mike@m7:~$ gem install sqlite3

mike@m7:~$ ruby -v

Y debería apareceros lo siguiente:

mike@m7:~$ gem -v

mike@m7:~$ rails -v


mike@m7:~$ gem list

Y por ultimo os recomiendo que descargeis el siguiente entorno para programación que encontré para ello, sobre todo para Ruby, escrito en Python….

Enlace de descarga: http://www.sublimetext.com/2

Lo descargáis en cualquier carpeta, lo descomprimís y os metéis en la carpeta…veréis lo siguiente…

Bien, el ejecutable es “sublime_text”…desde Nautilus (pulsando dos veces sobre el nombre del archivo) o desde la terminal con

mike@m86:~/rails/Sublime Text 2$ ./sublime_text

Y listo … aquí lo tenéis en funcionamiento….

Instalar Firefox 4.0 desde repositorios…


Para instalar Firefox 4.0 desde los repositorios oficiales nada mas fácil que introducir esto desde la consola lo siguiente…

Tanto para 10.04 como 10.10 de Linux en Ubuntu:

sudo add-apt-repository ppa:mozillateam/firefox-stable

sudo apt-get update

sudo apt-get install firefox ubufox

O directamente en una sola línea de la siguiente forma:

sudo add-apt-repository ppa:mozillateam/firefox-stable && sudo apt-get update && sudo apt-get install firefox ubufox

Si tenéis problemas con el idioma, y solo descarga la versión inglesa elegid de los siguientes enlaces dependiendo de la versión que tengais 32 bits / 64 bits.

Además si quereis cambiarle la apariencia en Linux y darle un toque mas azul podeis probar con el siguiente tema GTK+

Enlace de descarga: Tema Bluebird para Firefox 4

Y además podeis tener el tema completo en Ubuntu de la siguiente forma:

sudo add-apt-repository ppa:webupd8team/themes && sudo apt-get update && sudo apt-get install bluebird-gtk-theme

o por separado también asi:

sudo add-apt-repository ppa:webupd8team/themes

sudo apt-get update

sudo apt-get install bluebird-gtk-theme

Como acelerar Ubuntu…

20/03/2011 1 comentario

Todos los que leemos este blog, o eso espero, somos usuarios de Ubuntu, principalmente. Esta distro es muy simple de usar, instalar y configurar. Pero, seamos sinceros, no se caracteriza por su velocidad.

Si bien es veloz y estable, aquí les dejo un par de trucos que he visto en Ubuntips para mejorar su rendimiento.

Mover los directorios temporales a la memoria

Mover el directorio /tmp a la memoria porque es mas veloz que el disco y ademas ayuda a cuidar el disco, en especial si han realizado la instalación de ubuntu en una netbook con SSD.

Deben editar el archivo /etc/fstab y agregar la siguiente linea:

tmpfs /tmp tmpfs defaults,noexec,nosuid 0 0

Guardar los cambios y reiniciar el pc.

Instalar Preload

Preload es una aplicacion que de manera inteligente pre-cargara en la memoria los archivos y aplicaciones que mas uses. A causa de esto, pueden notar que el pc tarda un poco mas en arrancar pero solo es eso, luego notareis como todo va mas rapido.

sudo apt-get install preload

Deshabilitar los servicios que no usemos

En muchos casos se corren todo el tiempo servicios que no se usan y que estan constantemente consumiento memoria y procesador. Ejemplos clasicos son: apache y mysql, para deshabilitar por ejemplo a mysql ejecutad el siguiente comando:

sudo update-rc.d mysql remove

Si quereis saber que se ejecuta al inicio debéis hacer lo que hice yo antes del anterior comando:

ls -l /etc/rc0.d

ls -l /etc/rc1.d

y asi sucesivamente hasta el rc6.d, con lo que veréis que programas o servicios se ejecutan desde el nivel 0 hasta el 6 del kernel de Linux.

Mucho ojo con lo que quitais, consultad en el manual de Ubuntu para que sirve cada servicio que deseais deshabilitar.

Desactivar las aplicaciones con autoarranque

Hay varias aplicaciones que normalmente no se usan y aun asi arrancan cuando arrancamos el pc. Las pueden ver en Sistema -> Preferencias -> Aplicaciones al inicio.

Cambiar el modo de usar la Swap

Al igual que como decia con respecto a /tmp si es posible no usar el disco y usar la memoria en su lugar entonces deberíamos hacerlo, porque los accesos al disco son lentos.

Si tienen 2, 3 o 4Gb de Ram probablemente no necesiten casi nada de Swap. No vayan a cometer ese error que dice “Swap debe ser el doble de la ram”, por lo general la regla no se cumple.

Entra a /etc/sysctl.conf y cambien la siguiente linea (agregar si no existe):

vm.swappiness=10

El valor asignado le dirá a su sistema cual es la probabilidad de que use Swap, es un valor entre 0 y 100. Si tienen menos de 1Gb de ram deberian cambiar ese valor a 40 o 50 para que use mas la swap.

Después de modificar el archivo deben ejecutar

sudo sysctl -p o reiniciar el sistema

para que los cambios surtan efecto correctamente.

Para aplicar todos los cambios, debemos reiniciar el sistema.

Espero que les sea de utilidad. Los invito a comentar su experiencia. Y si encuentran algún truco más que me lo comenten. Un saludo.

Etiquetas: , ,

Linux: poner las páginas de Man en castellano

02/03/2011 6 comentarios

Las páginas de Man son indispensables cuando tenemos alguna duda acerca de la utilización de un comando o de sus parámetros.

Para quien no las haya usado basta con ejecutar desde consola:

$ man comando_del_que_obtener_información

Ejemplo:

$ man ls

Pero claro la información aparece en ingles. Si te interesa verla en castellano, Víctor Jose (Gracias) le envió un tip a Ubuntu Life de como lograrlo y que vio en Ubuntu-es.

Los pasos serian los siguientes:

(Primero lo de siempre)

$ sudo apt-get update

$ sudo apt-get upgrade

Y ahora sí:

$ sudo apt-get install manpages-es manpages-es-extra

$ sudo dpkg-reconfigure locales

Otra forma es ponerlo todo en un solo comando:

$ sudo apt-get update && sudo apt-get install manpages-es manpages-es-extra && sudo dpkg-reconfigure locales

Y listo, las páginas man deberían estar en español…o por lo menos casi todas.

A %d blogueros les gusta esto: