Archivo

Archive for the ‘navegadores’ 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.

Puta crisis!!!

24/11/2012 2 comentarios

Bien…en primer lugar pedir disculpas a todos mis seguidores…

He estado desconectado mucho tiempo…la crisis…sin trabajo e intentando dedicar mi tiempo a solucionar problemas diversos, he tenido que recurrir a trabajar en cualquier cosa para mantenerme.

Empezando desde hace ya tiempo con la programación de webs, he estado metido en varios proyectos, entre los cuales cuento a http://www.joyika.com y terminando ahora http://www.alonsomotorracing.com

He decidido empezar otra esta semana…quizás ahora mismo…de un artista amigo mio.

Empezaré relatando algunos problemas que me he encontrado en el camino y la forma correcta de solucionarlos. Por lo menos los que me han surgido a mi.

Asi que sin mas deciros que aunque no me pase mucho por aqui, he intentado resolver todas vuestras dudas y solcuionar los problemas con los archivos subidos a servidores que ya no existen…en algunos casos lo siento, en otros intentad siempre usar mis cuentas de Dropbox, que son las mas seguras y por ahora no me las han cerrado.

 

Un saludo y gracias a todos.

CCleaner 3.15.1643: CCleaner nos ofrece una versión con mejoras…

26/01/2012 1 comentario

CCleaner es el mejor programa gratuito limpiador de ficheros temporales y registro de Windows, eso es de sobra conocido por todos los usuarios que lo utilizamos a diario, así que dejando sutilezas aparte, me dedicaré a exponeros las nuevas cualidades del CCleaner 3.15.1643.

CCleaner 3.15.1643 incorpora las siguientes mejoras (26 de Enero de 2012) y correcciones respecto a la versión anterior:

  • Se añade la limpieza de archivos directos de Chrome Canary Omnibox
  • Se añade la opción de limpiar la papelera de reciclaje con archivos de más de 24 horas
  • Mejoras en la limpieza del historial de Firefox
  • Mejoras en los resultados de análisis de cookies de Firefox y Chrome, así como de la caché
  • Mejoras en el limpiador de retroalimentación del controlador para el éxito de las operaciones
  • Mejorado el algoritmo de la sincronización de hilos para que no ocurran posibles errores
  • Mejoras en la limpieza del registro de Windows y la búsqueda de MS
  • Se añaden algunos cambios menores y se solucionan algunos errores leves
  • Además se añaden varios cambios en la limpieza de los navegadores y programas

UploadBox borrará todos sus archivos el 30 de Enero

26/01/2012 1 comentario

UploadBox se suma al pánico general, surgido entre los servicios de alojamiento de archivos (cyberlockers) tras el cierre de Megaupload y anuncia que el próximo 30 de Enero borrará todos sus archivos. UploadBox ya no permite subir ningún tipo de archivo, pero insta a los usuarios que aprovechen al máximo los días antes de su cierre, para descargar todo el contenido que les sea posible.

Como consecuencia de la operación de  intervención del FBI sobre Megaupload; que trajo como consecuencia su cierre y el arresto de su fundador y cúpula directiva, muchos han sido los servicios de alojamiento de archivos que han modificado sus términos de uso, eliminado los programas de afiliación que premiaban con dinero o puntos a los usuarios que más contenido subían para compartir (FileServe, FileSonic, 4shared), cancelando la posibilidad de compartición de archivos  e incluso varios ya han comenzado a borrar masivamente todos los archivos que pudieran estar protegidos por derechos de autor, como es el caso de Rapidshare y MediaFire.

El cierre de cyberlockers como Megaupload y Uploadbox y el borrado del contenido protegido por copyright de los que aún siguen en pie,está provocando una huida masiva de sus usuarios hacia otras alternativas de intercambio de archivos como la red Bittorrent y los programas P2P como Emule o Ares.

A la hora de terminar de escribir esto el dominio Uploadx.com muestra la siguiente pantalla en el navegador….

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.

Como averiguar el nivel de seguridad SSL de una página web (HTTPs)

15/06/2011 4 comentarios

En anteriores artículos os he explicado qué tipos de cifrados asimétricos, simétricos, y de autenticación (hash) podemos encontrarnos.

Os he explicado en muchas ocasiones que conectándonos a través de SSL estamos más seguros en la red que no haciéndolo.

También informé sobre la herramienta de Google para acelerar el SSL, y sobre la implementación de SSL en Youtube, en Facebook y en Twitter.

Ahora os traigo una pequeña página web que analiza la seguridad de la página web (en lo que al SSL se refiere).

Es capaz de decirnos sus puntos fuertes y sus puntos débiles. Al final del escáner nos muestra los resultados y nos da una puntuación.

A continuación tenéis la web y unas capturas de pantalla para que lo veáis. Nos metemos en esta web: Qualys SSL Labs

Metemos la dirección de la página web y pinchamos en el botón Submit, si la página web ya está analizada (de un análisis anterior), nos mostrará los resultados inmediatamente.

En esta pantalla encontramos información sobre el certificado, cuando expira, la llave utilizada (key) y el algoritmo. Como ejemplo he usado mi banco, Google y mi propio blog… a continuación algunos pantallazos.

En la siguiente captura podéis ver los protocolos y cifrados que soportan, soportar más protocolos no es sinónimo de una mayor seguridad, justo al contrario.

Se deberían deshabilitar esos protocolos antiguos, por suerte, Facebook no usa ninguno antiguo (luego veremos que hay otras webs que sí).

Y aquí tenemos en lo que casi todos fallan, la renegociación TLS, donde lo han deshabilitado para esquivar el bug del TLS-renegotiation. Otros simplemente lo tienen activado…con el bug.

Sin embargo, la web de Google, cumple con todo lo establecido, o sea perfecta.

Ahora ya podremos saber de una manera más técnica si una web con SSL es más segura que otra, sobre todo podéis mirar la seguridad de los bancos y plataformas de pago que es donde la seguridad es lo más importante.

Enlaces de interés:

  1. Twitter implementa HTTPs por defecto para proteger nuestra seguridad y privacidad
  2. Youtube empieza a usar el protocolo HTTPS (SSL) para conexiones cifradas en sus vídeos
  3. Facebook permite conexiones HTTPS siempre que nos conectemos
  4. Ciberataque a RSA : Roban información de la división de seguridad de EMC
  5. Redes Sociales : Seguridad y privacidad
A %d blogueros les gusta esto: