Hoy os traemos una herramienta muy interesante para comprimir archivos desde PhotoShop al formato PNG uno de los más usados en la web.


Estas son las notas del autor:

pngquant Photoshop plug-in

It provides PNG saving better than Save for Web. Typically creates PNG files 60-70% smaller than 24/32-bit PNG from Save for Web, and unlike 8-bit PNG from Photoshop, always supports semi-transparent alpha channel.

To use it choose regular Save As and PNG for Web (pngquant) as the file type. A small web-optimized PNG file will be written without any prompts.


Lo pueden descargar desde gitHub 



Una forma muy sencilla de "comprimir" la salida HTML con PHP es utilizar la función ob_start () con una función de devolución de llamada que elimina las saltos innecesarios. Pestañas, etc.


La forma más sencilla es hacer lo siguiente.

function ob_html_compress($buf){
    return str_replace(array("\n","\r","\t"),'',$buf);
}

ob_start("ob_html_compress");
// Your Code
ob_end_flush();

También debe activar GZIP en la configuración de PHP utilizando zlib.outputcompression en lugar de utilizar obgzhander () como su ob_start () de devolución de llamada.

Pero, por supuesto, podría ser una buena idea extender la función obhtmlcompress para filtrar un poco más de salida innecesaria, si acaba de reemplazar el cuerpo de la función.

return preg_replace(array('//Uis',"/[[:blank:]]+/"),array('',' '),str_replace(array("\n","\r","\t"),'',$buf));

A continuación, filtrará múltiples espacios y comentarios HTML también.

Para instalar OsClass directamente en el idioma castellano (Español-España)

Deben hacerlo antes de la instalación de OsClass

Descargan el instalador al escribir este tutorial la versión actual es 3.5.7 descargar desde la web oficial 

y descargan también la traducción al castellano es_ES.zip 

Lo descomprimen y lo agregan  la carpeta a la carpeta  /oc-content/languages/  quedará algo así /oc-content/languages/es_ES es recomendable cambiar el nombre de la carpeta en_US para la instalación.

Luego hay modificar el archivo install.php que esta en la carpeta /oc-includes/osclass buscamos  en_US y reemplazamos por es_ES  

Ya podemos proceder con la instalación de OsClass en Castellano.




Vamos a explicar los pasos a seguir para colocar el mapa con el tamaño personalizado en OsClass para la versión 3.5.7 que es la actual a la hora de escribir este tutorial.

Editamos el map.png dentro de oc-content/themes/spain/images/map.png con algún editor de imágenes y cambiamos el tamaño al que nos convenga para este ejemplo se ha usado 440x350 px.


1.- Abre el archivo original map.php. ubicado en oc-content/themes/spain/map.php

Para incluir la imagen en el cuadro de texto del map resizer es recomendable dar la url de la imagen en cuestión.

<!-- img src="LA_URL_DEL_MAPA_EN_TU_WEB" alt="usa" usemap="#Map" border="0" style="position: absolute; left: 0px; top: 2px; width: 440px; height: 350px; opacity: 0;" width="440" height="350" -->


2.- Seleccionamos todo el bloque de código entre las etiquetas < map > y < /map > copiamos y pegamos el código en la siguiente url http://blog.outsharked.com/p/image-map-resizer.html en el campo "Source HTML"



3.- En el campo New Size entramos las dimensiones 440 y 350 y luego le damos al botón Resize It. 

4.- Esto nos convertirá todas las coordenadas adaptadas a nuestras nuevas dimensiones en los campos <area shape, ahora bien  copia el contenido del resultado del campo "Resized HTML" sustituye el código en oc-content/themes/spain/map.php


5.- Para terminar debes cambiar las líneas de código que dibujan el mapa con el canvas:

<!-- div style="position:relative; background-image:url(<?php echo osc_current_web_theme_url('images/map.png'); ?>); width:440px; height:350px;">

<canvas id="map-status" style="position:absolute;left:0; top:2px; width:440px; height:350px;" width="440" height="350"></canvas>

<canvas id="map-hover"  style="position:absolute;left:0; top:2px; width:440px; height:350px;" width="440" height="350"></canvas>

<img src="<?php echo osc_current_web_theme_url('images/map.png'); ?>" alt="usa" usemap="#Map" border="0" style="position: absolute; left: 0px; top: 2px; width: 440px; height: 350px; opacity: 0;" width="440" height="350">

</div -->

Aquí vendrá lo que copiamos del "Resized HTML".


6.- Hemos terminado.

Bueno como siempre encantados de ayudar y ya sabes si te ha gustado comparte.

Descargamos o creamos un archivo de acciones .atn compatible para PhotoShop.

Para importar el archivo podemos hacerlo de dos formas:


Arrastrar y soltar el archivo.atn en nuestro menú de Acciones de PhotoShop, o desde el propio menú Acciones > Cargar acciones...



Por ultimo para usar las acciones recién cargadas nos vamos abajo al menú de Acciones  y presionamos el botón "Play" 



Con este tutorial ya sabes como cargar y usar Acciones en PhotoShop.