<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<title>Tema: Grafismo | Sentido Web</title>
<link>http://sentidoweb.com/</link>
<description>Actualidad y maneras de hacer en Internet (programación, diseño, tendencias, negocios...)</description>
<language>es</language>
<copyright>Copyright 2008</copyright>
<lastBuildDate>Tue, 06 Mar 2007 09:24:53 +0000</lastBuildDate>
<generator>http://www.movabletype.org/?v=3.2</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs> 

<item>
<title>Palette Grabber: obtén la paleta de colores mediante Firefox</title>
<description><![CDATA[<p><strong>Palette Grabber</strong> es una extensión para Firefox que nos permite obtener los colores de una página web y exportarlos a un archivo para su posterior utilización.</p>

<p><img alt="pallettegrabber.png" src="http://sentidoweb.com/img/2007/03/pallettegrabber.png" width="350" height="224" class="center"/></p>

<p>El formato más sencillo al que exporta los colores es un fichero de texto con los componentes RGB de cada color en formato decimal. Pero lo que más nos puede ser útil es que lo exporta a formatos de paleta de colores de Adobe, Flash, Paintshop Pro, GIMP y Adobe Fireworks.</p>

<p>Esta herramienta la veo muy útil para cuando te mandan hacer un prototipo de alguna página nueva y hay que basarse en un diseño que no es tuyo, por lo que no tienes el original sobre el que se trabajó.</p>

<p><a href="https://addons.mozilla.org/firefox/2290/">Palette Grabber</a></p>]]></description>
<link>http://sentidoweb.com/2007/03/06/palette-grabber-obten-la-paleta-de-colores-mediante-firefox.php</link>
<guid>http://sentidoweb.com/2007/03/06/palette-grabber-obten-la-paleta-de-colores-mediante-firefox.php</guid>
<category>Firefox</category>
<pubDate>Tue, 06 Mar 2007 09:24:53 +0000</pubDate>
</item>
<item>
<title>Usar la API de Google para obtener bordes redondeados</title>
<description><![CDATA[<p>Para aquellos que necesiten crear gráficos con bordes redondeados y no sepan de editores gráficos, la API de Google <strong>roundedcorners</strong> le puede venir muy bien para obtener las imágenes necesarias.</p>

<p><img alt="roundedcorners.png" src="http://sentidoweb.com/img/2006/12/roundedcorners.png" width="50" height="50" class="center"/></p>

<p>Tan solo es necesario <a href="http://groups-beta.google.com/groups/roundedcorners?c=999999&bc=white&w=4&h=4&a=tr">llamar a un URL</a> para obtener la imagen. Teniendo en cuenta que el parámetro <em>c</em> de la url indica el color de la esquina (RGB o RRGGBB), <em>bc</em> el color de fondo, <em>h</em> la altura, <em>w</em> el ancho y <em>a</em> el tipo de esquina que debe generar (<em>tl</em> para arriba a la izquierda, <em>tr</em> para arriba a la derecha, <em>bl</em> para abajo a la izquierda, <em>br</em> para abajo  a la derecha).</p>

<p><a href="http://xach.livejournal.com/95656.html">Google's own cornershop</a></p>

<p>Vía / <a href="http://ajaxian.com/archives/googles-rounded-corner-generator">Ajaxian</a></p>]]></description>
<link>http://sentidoweb.com/2006/12/15/usar-la-api-de-google-para-obtener-bordes-redondeados.php</link>
<guid>http://sentidoweb.com/2006/12/15/usar-la-api-de-google-para-obtener-bordes-redondeados.php</guid>
<category>Grafismo</category>
<pubDate>Fri, 15 Dec 2006 09:54:10 +0000</pubDate>
</item>
<item>
<title>Tutoriales sobre ilustración y diseño</title>
<description><![CDATA[<p><img alt="illustrationclass.png" src="http://sentidoweb.com/img/2006/10/illustrationclass.png" width="150" height="29" class="right"/>En <a href="http://webintenta.com">Intenta</a> siempre encuentro cosas realmente interesantes (aunque la información la han obtenido de <a href="http://dissenyart.host.sk.mialias.net/">DissenyArt</a>). En este caso se trata de una página que nos enseña diseño y como crear ilustraciones, lo cual para quienes somos unos expertos en el copy/paste conceptual, nos va a venir muy bien para aprender y no necesitar tanto del CTRL+C/CTRL+V.</p>

<p>Los tutoriales está muy muy bien, te explican paso a paso cómo lo han ido realizando, con imágenes de cada paso. La única pega que le pongo es que te tienes que bajar un zip y luego descomprimirlo en tu ordenador para ver el tutorial.</p>

<p><a href="http://www.illustrationclass.com/">illustrionclass.com</a></p>

<p>Vía / <a href="http://www.webintenta.com/illustrationclasscom-tutoriales-de-ilustracion-y-diseno.html">Intenta</a></p>]]></description>
<link>http://sentidoweb.com/2006/10/25/tutoriales-sobre-ilustracion-y-diseno.php</link>
<guid>http://sentidoweb.com/2006/10/25/tutoriales-sobre-ilustracion-y-diseno.php</guid>
<category>Grafismo</category>
<pubDate>Wed, 25 Oct 2006 10:41:31 +0000</pubDate>
</item>
<item>
<title>Color toy: generador de esquemas de color</title>
<description><![CDATA[<p>Ya hemos hablado en otras <a href="http://sentidoweb.com/2006/09/25/colors-on-the-web-ayuda-para-diseaadores.php">ocasiones</a> de aplicaciones que nos ayudan a generar esquemas de colores. Ayer mismo yo necesitaba una, pero por problemas de conexión durante todo el día no pude acceder a ninguna para que me ayudara.</p>

<p><img alt="colortoy.png" src="http://sentidoweb.com/img/2006/10/colortoy.png" width="318" height="148" class="center"/></p>

<p>¿Qué tiene de especial <strong>Color Toy</strong>?, su sencillez, no tiene rueda de colores, ni puedes elegir si quieres colores análogos o en contraste. Simplemente introduces un color y te da un esquema de colores, rápido y sencillo.</p>

<p><a href="http://defmech.com/color/">Color Toy</a></p>

<p>Vía / <a href="http://infectedfx.net/2006/10/18/enlaces-rapidos-x/">Infected-FX</a></p>]]></description>
<link>http://sentidoweb.com/2006/10/19/color-toy-generador-de-esquemas-de-color.php</link>
<guid>http://sentidoweb.com/2006/10/19/color-toy-generador-de-esquemas-de-color.php</guid>
<category>Grafismo</category>
<pubDate>Thu, 19 Oct 2006 11:50:35 +0000</pubDate>
</item>
<item>
<title>Texturas para tus diseños en Texture King</title>
<description><![CDATA[<p><img alt="textureking.png" src="http://sentidoweb.com/img/2006/10/textureking.png" width="297" height="58" class="right"/><strong>Texture King</strong> es un repositorio de texturas para que las utilices de forma libre en tus diseños ya sea de forma personal o profesional. El que sean libres no quiere decir que tengan licencia Creative Commons, por lo que podemos usarlas, pero no podemos distribuirlas.</p>

<p>Las fotos están divididas por categorías que corresponden al material de la textura, pero no estaría mal que también se pudieran buscar por tags, tipo color, ya que a veces ese tipo de búsquedas nos puede venir muy bien.</p>

<p><a href="http://www.textureking.com/index.php/category/plasticrubber/">Texture King</a></p>

<p>Vía / <a href="http://meneame.net/story/el-rey-de-las-texturas">menéame</a></p>]]></description>
<link>http://sentidoweb.com/2006/10/18/texturas-para-tus-disenos-en-texture-king.php</link>
<guid>http://sentidoweb.com/2006/10/18/texturas-para-tus-disenos-en-texture-king.php</guid>
<category>Grafismo</category>
<pubDate>Wed, 18 Oct 2006 18:55:30 +0000</pubDate>
</item>
<item>
<title>Iconos gratuitos para tu web</title>
<description><![CDATA[Una colección de iconos para nuestra web, sencillos, pequeños y muy claros. Su uso es gratuito si no incluyes más de 10 iconos en tu web, en otro caso deberíamos pagar una licencia de 30$.

<img alt="iconos.png" src="http://sentidoweb.com/img/2006/10/iconos.png" width="197" height="158" class="center"/>

Organizado por diferentes categorías: tipos de fichero, web, blogs y CMS, usuarios y comercio electrónico. Nos puede ayudar mucho, nos ahorrará mucho trabajo y le dará un buen toque de diseño a nuestro sitio.

De paso, visitando el sitio y el blog del autor de los iconos, os recomiendo que os paséis por su galeria de <a href="http://www.ndesign-studio.com/resources/vector-cliparts/">cliparts vectoriales</a>, su tutorial de cómo <a href="http://www.ndesign-studio.com/resources/tutorials/tracing-photo/1/">vectorizar una fotografía</a> o cómo crear un <a href="http://www.ndesign-studio.com/resources/tutorials/abstract-background/">fondo abstracto</a>.]]></description>
<link>http://sentidoweb.com/2006/10/04/iconos-gratuitos-para-tu-web.php</link>
<guid>http://sentidoweb.com/2006/10/04/iconos-gratuitos-para-tu-web.php</guid>
<category>Grafismo</category>
<pubDate>Wed, 04 Oct 2006 09:20:26 +0000</pubDate>
</item>
<item>
<title>Colors on the Web: ayuda para diseñadores</title>
<description><![CDATA[<p><img alt="colorsontheweb.png" src="http://sentidoweb.com/img/2006/09/colorsontheweb.png" width="272" height="115" class="right"/>Visitando una entrada de <a href="http://blogvecindad.com/color-wizard/2006/09/22">Vecindad Gráfica</a>, he encontrado una página que nos puede ser muy útil a los que diseñamos sin llegar a ser grandes diseñadores. Se trata de <strong>Colors on the Web</strong>, una página centrada en los colores y el diseño web. En ella encontraremos información sobre los colores (colores primarios, saturación, ...), el significado de los colores (por ahora solo el rojo), el uso de colores en la web, combinación de colores (rueda de colores, colores análogos, ...) y tres utilidades bastante interesantes: un <a href="http://www.colorsontheweb.com/colorwizard.asp">selector de colores</a> similar a las que ya existen, una <a href="http://www.colorsontheweb.com/colorwheel.asp">rueda de color</a> que selecciona aleatoriamente colores y nos muestra sus resultados en un diseño y una <a href="http://www.colorsontheweb.com/colorschemes.asp">colección de esquemas</a> organizada por categorías.</p>

<p><a href="http://www.colorsontheweb.com">Colors on the Web</a></p>

<p>Vía / <a href="http://blogvecindad.com/color-wizard/2006/09/22">Vecindad Gráfica</a></p>]]></description>
<link>http://sentidoweb.com/2006/09/25/colors-on-the-web-ayuda-para-disenadores.php</link>
<guid>http://sentidoweb.com/2006/09/25/colors-on-the-web-ayuda-para-disenadores.php</guid>
<category>Grafismo</category>
<pubDate>Mon, 25 Sep 2006 09:42:47 +0000</pubDate>
</item>
<item>
<title>Encontrar un color para el diseño</title>
<description><![CDATA[<p>Al menos a mí me ocurre que cuando estoy empezando con un diseño, y tengo que basarme en una imagen, me paso bastante tiempo buscando los colores que vayan con la imagen. Normalmente uso un editor de imágenes, realizo la pixelación de la imagen y voy buscando que los colores sean representativos. Esto puede ser sencillo con esta rápida y cómoda aplicación on line, que nos permite enviar una imagen, seleccionar el tamaño de los cuadrados de la pixelación y ver qué códigos tienen los colores. También se podría usar la <a href="http://sentidoweb.com/2006/06/09/laboratorio-calcular-fondo-de-imagen-con-php.php">entrada</a> que explicamos sobre fondo de pantalla calculado de una imagen, pero esta opción nos permite optar a varios colores.</p>

<p><img alt="color-pallete.png" src="http://sentidoweb.com/img/2006/07/color-pallete.png" width="350" height="217" class="center"/></p>

<p><a href="http://jrm.cc/color-palette-generator/">Color Palette Generator</a></p>

<p>Vía / <a href="http://blogvecindad.com/generador-de-paleta-de-colores-a-partir-de-una-imagen/2006/07/24">Maestros del Web</a></p>]]></description>
<link>http://sentidoweb.com/2006/07/25/encontrar-un-color-para-el-diseno.php</link>
<guid>http://sentidoweb.com/2006/07/25/encontrar-un-color-para-el-diseno.php</guid>
<category>Grafismo</category>
<pubDate>Tue, 25 Jul 2006 09:51:28 +0000</pubDate>
</item>
<item>
<title>Novedades de Adobe Photoshop CS3</title>
<description><![CDATA[<p><img alt="photoshopbox.gif" src="http://sentidoweb.com/img/2006/06/photoshopbox.gif" width="95" height="110" class="right"/>Parece que Adobe Photoshop CS3 viene cargada de novedades, entre una de las más importantes es la creación de dos versiones, una <em>Standard</em> y otra <em>Premium</em>, la cual incluirá más funcionalidades. Por ejemplo, la nueva versión de <a href="http://www.adobe.com/products/photoshop/cameraraw.html">Camera Raw</a> irá incluida en ambas versiones de Photoshop. <a href="http://www.adobe.com/products/photoshop/pop_vanishing.html">Vanishing Point</a> estará solo en la versión Premium.</p>

<p>A parte de mejoras en la edición de imágenes, también añadirá funcionalidades al uso de tabletas gráficas al estilo de Corel Painter y dará la posibilidad de exportar a CAD.</p>

<p>Vía / <a href="http://www.bitelia.com/2006/06/19/novedades-de-adobe-photoshop-cs3/">Bitelia</a></p>]]></description>
<link>http://sentidoweb.com/2006/06/20/novedades-de-adobe-photoshop-cs3.php</link>
<guid>http://sentidoweb.com/2006/06/20/novedades-de-adobe-photoshop-cs3.php</guid>
<category>Grafismo</category>
<pubDate>Tue, 20 Jun 2006 09:32:20 +0000</pubDate>
</item>
<item>
<title>Microsoft crea un rival para JPEG</title>
<description><![CDATA[<p><img src="http://sentidoweb.com/img/2006/03/microsoft.png" alt="Microsoft" class="right" height="37" width="136" />Microsoft ha creado un nuevo formato de compresión de imágenes, <a href="http://www.microsoft.com/whdc/xps/wmphoto.mspx">Windows Media Photo</a>, el cual ocupa la mitad que un fichero JPEG y con mejor resolución. Su intención es que sea soportado por Vista y por XP y dicen que es lo más adecuado para teléfonos móviles ya que ocupa menos espacio y para imprimirse. </p>

<p>Claro, que realmente para que este formato tenga un éxito decente, deberá ser exportado por aplicaciones Adobe que son las más utilazadas dentro del mundo del diseño. También habría que hacer una comparativa con otros formatos como PNG, aunque yo creo que el éxito de JPEG es como el de MP3, haber sido el primero en aparecer, luego han aparecido formatos mejores pero la gente ha seguido usando el mismo de siempre. </p>

<p>Sobre la licencia no se sabe nada, pero bueno, tambien JPEG tiene liciencia y eso no ha creado ningún problema.</p>

<p><a href="http://news.com.com/2100-1025_3-6076650.html?part=rss&tag=6076650&subj=news">Microsoft shows off JPEG rival</a></p>]]></description>
<link>http://sentidoweb.com/2006/05/25/microsoft-crea-un-rival-para-jpeg.php</link>
<guid>http://sentidoweb.com/2006/05/25/microsoft-crea-un-rival-para-jpeg.php</guid>
<category>Microsoft</category>
<pubDate>Thu, 25 May 2006 10:19:32 +0000</pubDate>
</item>
<item>
<title>Botones: Distintas formas de enviar un formulario</title>
<description><![CDATA[<p><img alt="input-image.gif" src="http://sentidoweb.com/img/2006/04/input-image.gif" class="right" width="96" height="70" /> Existen distintas formas de enviar los datos de un formulario a la aplicación web que se encarga de procesar la información. Todos los métodos son igualmente válidos, y va según los gustos usar unos u otros.</p>
<p>Los <a href="http://www.w3.org/TR/REC-html40/interact/forms.html">formularios</a> dentro de HTML disponen de sus propios elementos para enviar los datos al formulario. El elemento en cuestión es el <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1">input</a>, el cual según sea su atributo <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#adef-type-INPUT">type</a>, podemos enviar los datos directamente con el elemento <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#submit-button">submit</a> o podemos reiniciar los valores de los elementos del formulario con el botón <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#reset-button">reset</a>.</p>
<pre><code>&lt;input type="submit" value="Enviar" /&gt;
&lt;input type="submit" value="Reiniciar" /&gt;</code></pre>
<p>En los formularios de <strong>Sentido Web</strong> usamos <strong>los elementos input con el <a href="http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1">type="imagen"</a></strong>. Este elemento usa una imagen como elemento submit, devolviendo la posición x e y de la imagen donde se ha producido el evento:</p>

<pre><code>&lt;input name="preview" type="image" align="top" value="Revisar" src="http://sentidoweb.com/i/bt/bt-revisar.gif" /&gt;
&lt;input name="post" type="image" align="top" value="Publicar" src="http://sentidoweb.com/i/bt/bt-publicar.gif" /&gt;</code></pre>

<p>Cuando se usa esta posibilidad, se enviarán dos parámetros al script usando el texto que hayamos usado en el atributo <em>name</em>, se le añade un <em>_x</em> para la coordenada x y un <em>_y</em> para la coordenada y, en el caso de Firefox también manda el parámetro sin sufijo. En el caso anterior, para saber cual de los dos se ha pulsado, se comprueba si hay parámetro <em>preview_x</em> o <em>preview_y</em> para el primer caso y <em>post_x</em> o <em>post_y</em> para el segundo caso.</p>
<p>Siguiendo con el elemento input, podemos usar el botón (<a href="http://www.w3.org/TR/REC-html40/interact/forms.html#push-button">type="button"</a>), pero habrá que añadirle el evento <em>onclick</em> para que haga el <em>submit</em>.</p>
<pre><code>&lt;input type="button" value="Enviar" onclick="document.forms[0].submit()" /&gt;</code></pre>
<p>Otra forma distinta es mediante el uso de un enlace, en el href o en el onclick se deberá escribir el código Javascript necesario para el envío del formulario:</p>

<pre>&lt;a href="javascript:document.forms[0].submit()"&gt;Enviar&lt;/a&gt;</pre>

<p>Y por último, pero no por ello menos importante ;), mediante la pulsación de la tecla <em>intro</em> en una de las cajas del formulario. Esto lo realizan normalmente los navegadores cuando dentro de un formulario hay alguna forma estándar de hacer el submit, pero en el caso de que no queramos poner botón de submit, tendremos que ejecutar el siguiente código en el evento <em>onkeypress</em> de la caja:</p>
<pre><code>&lt;input name="nombre" onkeypress="if (event.keyCode == 13) document.forms[0].submit()"/&gt;</code></pre>]]></description>
<link>http://sentidoweb.com/2006/04/17/botones-distintas-formas-de-enviar-un-formulario.php</link>
<guid>http://sentidoweb.com/2006/04/17/botones-distintas-formas-de-enviar-un-formulario.php</guid>
<category>How to</category>
<pubDate>Mon, 17 Apr 2006 17:00:00 +0000</pubDate>
</item>
<item>
<title>Laboratorio: Recorta imágenes dinámicamente con PHP y HTML</title>
<description><![CDATA[<p>En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
<a href="http://sentidoweb.com/lab/recortar/php/recortar.html"><img alt="crop.png" src="http://sentidoweb.com/img/2006/04/crop.png" width="400" height="239" class="center"/></a>
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.</p>]]></description>
<link>http://sentidoweb.com/2006/04/11/laboratorio-recorta-imagenes-dinamicamente-con-php-y-html.php</link>
<guid>http://sentidoweb.com/2006/04/11/laboratorio-recorta-imagenes-dinamicamente-con-php-y-html.php</guid>
<category>Laboratorio</category>
<pubDate>Tue, 11 Apr 2006 15:18:12 +0000</pubDate>
</item>
<item>
<title>Ponle copyright a tus imágenes mediante PHP</title>
<description><![CDATA[<p><img alt="copyright.png" src="http://sentidoweb.com/img/2006/04/copyright.png" class="right" width="180" height="180" /> Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, <strong>pero también queremos que quede bien claro quién es el autor</strong>. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.</p>

<p>El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.</p>]]></description>
<link>http://sentidoweb.com/2006/04/04/ponle-copyright-a-tus-imagenes-mediante-php.php</link>
<guid>http://sentidoweb.com/2006/04/04/ponle-copyright-a-tus-imagenes-mediante-php.php</guid>
<category>PHP</category>
<pubDate>Tue, 04 Apr 2006 17:15:00 +0000</pubDate>
</item>
<item>
<title>Cómo crear márgenes según un contorno</title>
<description><![CDATA[<p><a href="http://sentidoweb.com/lab/margen/js/margen-flor.html"><img src="http://sentidoweb.com/img/2006/04/margen-flor.png" width="200" height="183" alt="Margen asimétrico" class="right"/></a>Hace unos días <a href="http://sentidoweb.com/2006/03/31/margenes-redondeados-mediante-css.php">comentábamos</a> sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.</p>
<p>Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.</p>]]></description>
<link>http://sentidoweb.com/2006/04/03/como-crear-margenes-segun-un-contorno.php</link>
<guid>http://sentidoweb.com/2006/04/03/como-crear-margenes-segun-un-contorno.php</guid>
<category>Grafismo</category>
<pubDate>Mon, 03 Apr 2006 14:15:12 +0000</pubDate>
</item>
<item>
<title>Protege tus imágenes con Apache</title>
<description><![CDATA[<p>Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página.</p>

<p>Para los que usamos Apache existe una fácil solución combinándolo con <strong>mod_rewrite</strong>, el método se basa en <strong>crear un fichero .htaccess</strong> que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio.</p>

<p>Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto <strong>example.com</strong> por el nombre de tu dominio:</p>

<pre>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTP_REFERER} !^$
    RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
    RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]
</pre>
]]></description>
<link>http://sentidoweb.com/2006/03/31/protege-tus-imagenes-con-apache.php</link>
<guid>http://sentidoweb.com/2006/03/31/protege-tus-imagenes-con-apache.php</guid>
<category>Apache</category>
<pubDate>Fri, 31 Mar 2006 13:39:58 +0000</pubDate>
</item>


</channel>
</rss>