Desarrollo web


Como hacer capturas de páginas webs completas

15

Mar 2015

Como hacer capturas de páginas webs completas

Sin duda unas de las cosas que más nos interesa en el mundo del diseño web cuando queremos exponer nuestra sitio web en un portafolio, es la de hacer una captura completa. Existen comandos en los distintos sistema  operativos que nos permiten hacer esto, pero no de una web en su totalidad.

Para realizar esto, tenemos varias extensiones para navegadores como Firefox o Chrome. En esta ocasión os traemos uno de nuestras preferidas para realizar esta función y es Full Page Screen Capture. 

Tan sólo debemos bajarnos esta extensión desde aquí e instalarlo en nuestro navegador Chrome. Una vez hay sido instalado, seguramente nos tocará reiniciarlo para que se complete el proceso.

Hacer una captura es muy sencillo y  si todo se instaló con éxito, nos debe aparecer un icono de una cámara fotográfica en la barra de extensiones  el cual debemos pulsar cuando queramos realizar la captura. Nos aparecerá como un pequeño come cocos indicando el proceso de captura y se nos abrirá en una nueva pestaña la imagen completa, la cual podremos descargar con un simple botón derecho “guardar imagen“.

Ya no tienes excusa si deseas crear un portafolio completo de tus webs o bien necesitas hacer una captura de algo que te interesa en un sitio web. Si en tu caso no usas Chrome, te recomendamos este otro plugin para firefox que puedes descargar desde aquí.Instalarlo es igual de sencillo y además te permite grabar la imagen en los siguientes formatos PDF/PNG/GIF/JPEG/BMP.

Recuerda que en Hispamax publicamos artículos cada relacionados con las temáticas más interesantes del mundo de internet, temáticas como diseño web, tiendas virtuales, programación php, programación javascript, seguridad informática web, diseño etc..

La próxima semana hablaremos sobre como enviar un fichero adjunto desde un formulario web con JQuery post. Un artículo sin duda interesante que no te puedes perder.

 


Aumenta velocidad de carga en tu web con la compresión de tus ficheros HTML y  CSS

24

Dic 2014

Aumenta velocidad de carga en tu web con la compresión de tus ficheros HTML y CSS

Una de las cosas más importantes y valoradas para los buscadores es si duda la velocidad de carga de tu página web. Existen varios métodos para conseguir este objetivo, pero hoy vamos a explicar uno de ellos tanto por su sencillez como su resultado.

Hacemos referencia al ya conocido y multiuso “.htaccess“. Entre muchas utilidades tenemos la posibilidad de habilitar y usar la compresión Gzip siempre y cuando nuestro hosting lo tenga activado en Apache.

Cuando se realiza la solicitud por el navegador para cargar tu página web, nos  devolverá el  archivo comprimido. En la actualidad la mayoría de los navegadores aceptan y trabajan archivos comprimidos.

COMO ACTIVAR LA COMPRESIÓN GZIP PARA TU SITIO WEB

Es tan sencillo como añadir unas líneas de código en nuestro fichero .htaccess incluido en la raíz del hosting o directorio donde tenemos nuestra página web. Si no estás familiarizado con este fichero, te recomendamos que consultes información adicional sobre las posibilidades que nos ofrece.

El código mostrado debajo debe ser añadido a tu .htaccess

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Como podemos observar en el código, inicialmente le estamos indicando que tome en cuenta la compresión siempre y cuando el módulo Gzip esté activado en nuestro servidor, pero ¿como sabemos si este módulo esta activado?. Es muy sencillo si trabajas con php debes usar el comando phpinfo()dentro de un archivo php, <?php phpinfo(); ?> para conocer la configuración de tu Apache. Es importante que este archivo sea borrado una vez se haga la comprobación pues podría dar mucha información a un atacante.

Si en tu caso tu página web no disponía del  .htaccess, debes crearlo con un editor de texto y subirlo al servidor.

YA HE CREADO EL .HTACCESS ¿ Y AHORA QUE?

Y nos preguntamos, bien …. ya lo he subido, pero ¿como se que se ha activado y está comprimiendo?. Esto es muy sencillo, debemos usar herramientas online como esta Gzip compression tool e indicar nuestra url, nos dará el resultado y por lo tanto sabremos si el cambio ha sido satisfactorio.

ACABO DE HACER TODO LO INDICADO PERO NO ME COMPRIME ¿POR QUÉ?

Si tu servidor es apache y no te ha resultado, te dejamos otro código que sí podría resultar óptimo para conseguir la compresión.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Desde Hispamax esperamos que te haya resultado interesante y útil este pequeño artículo. Recuerda que para cms como WordPress dispones de módulos que hacen esta función sin la necesidad de editar manualmente el .htaccess.