Mudanza

Si llegaste aquí por alguna razón... te recomiendo que mejor vayas para allá: http://nubedetrapo.com/blog/

Tips para diseñar para móviles (celulares)

Actualmente estoy diseñando un sitio con su versión para celulares y tuve que echarme algunos artículos con mucho blablabla.
Lo primordial es esto:

• Hacer un HTML y CSS especial para la versión móvil.
  Debes colocar un script en tu versión para pc que detecte que se está viendo mediante un móvil y redireccionarlo. (Por lo pronto se los debo porque no me tocó hacer esa parte :B)
• Quita todo el contenido que no sea vital.
• Hazlo lo más ligero posible. El internet en los móviles es más lento, así que también considera quitar fondos pesados e imágenes innecesarias.
• Define el ancho del contenido con porcentaje, de preferencia 100% (ya que las resoluciones varían mucho y en el caso del iPhone con solo girarlo cambia drásticamente)
• Si no quieres que el dispositivo redimensione todo; coloca este código en el  < head >
  < meta name="viewport" content="width=device-width" / >
•  En ocasiones las tipografías también se redimensionan, para evitarlo coloca este código en tu hoja de estilos:
  /*only iPhone*/
  @media only screen and (max-device-width: 960px) {
      /*fixes too big font in mobile Safari*/
      html {  -webkit-text-size-adjust:none;  }
   }
  Según dice ahí, sólo funciona en iPhone, no he podido testearlo en otros
• Recuerda que los dispositivos touch no detectan el :hover en los links.

Por lo pronto es todo; conforme me vaya topando con más tips que pueda agregar los iré poniendo.

:)

Fuentes: prueba/error y mil sitios de google, de los cuales sólo guardé este:
http://www.freepx.net/blog/how-to-stop-font-resizing-on-iphone-without-affecting-zooming-in-safariwebkit/

inspiración de origen asiático

Encontré este sitio web con muchas ilustraciones genialosas. No sé japonés así que no sé en sí cual sea el objetivo del sitio (aparte de ser una gran fuente de inspiración). Aqui el link directo a la galería de ilustraciones: http://alice-books.com/item/list/all?tag=%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88&page=1

Templates para diseño de papelería

Me topé con un sitio mágico en el que hay algunos templates con líneas guía para brochures, flyers,  tarjetas de presentación, etc.

Link: http://www.48hourprint.com/photoshop-templates.html

:D

inspiración :)

:)

Photoshop visto desde los ojos del cliente

Había oído hablar de esta animación pero no había tenido el gusto de verla. Es una versión de photoshop según la idea que tienen los clientes de él. Aqui les comparto el link y una imagen como preview:

El photoshop de la imaginación del cliente podría ser también el de nuestros sueños.

Esto me recordó también una imagen que anduvo por doquier hace algunos ayeres, si no me equivoco como publicidad para la versión de Adobe Photoshop CS4:

Vale la pena recordar esta imagen :)

¡Saludos!

Iconos sencillos y gratuitos para web

Encontré algunos paquetes de iconos que pueden ser usados gratuitamente, son sencillosy están muy bien hechos.

Pixelated icon set:

Iconos: 36
Formato: PSD, GIF

gcons:

Iconos: 100

Formato: PSD, PNG, GIF, JPG

The noun project

Iconos: Incontables
Formato: SVG

Iconic icon set

Iconos:136

Formato: PNG, SVG, OFT/TTF/EOT, Omnigraffle

Dale estilo a los inputs de tus formularios de contacto o de registro

Si deseas crear un Formulario de Contacto o de Registro que se vea mejor la primer opción sería darle estilo a los inputs.
En tu css sólo debes de poner los estilos que deseas para esa etiqueta, por ejemplo:
input{
border: #ccc 1px solid;
height: 25px;
width: 200px;
color: #ccc;
}

Si no quieres que se aplique a todos los inputs de tu sitio web, crea un div que encierre tu formulario y estiliza unicamente los inputs de ahi dentro de la siguiente forma:
.contacto input{
 /*estilos aqui*/ 
} 
donde .contacto es el estilo del div que encierra el form.
También puedes darle estilo al nombre del campo, poniéndolo dentro de un .

En total tendríamos este html:

<div class="contacto">
  <span class="campo">Nombre:</span><input name="" type="text" /><br />
  <span class="campo">E-mail:</span><input name="" type="text" /><br />
  <span class="campo">Asunto:</span> <input name="" type="text" />
</div>

y este css:

.contacto{
font-family:Verdana, Geneva, sans-serif;
color:#39C;
font-size:11px;
}
.contacto input {
border: #39C 1px dashed;
height: 25px;
width: 200px;
color: #777;
margin:5px;
}
.campo{
display:block;
float:left;
line-height:25px;
height:25px;
width:100px;
text-align:right;
margin:5px;
}

Y ese código nos da esto:

Nombre:
E-mail:
Asunto:

Le puedes agregar border-radius box-shadow y demás para que se vea aún mejor, ya es cuestión de cada quien. Además, de la misma forma puedes darle estilo a los text-area.

Si profundizamos un poco más y usamos un poco de jQuery podemos obtener lo siguiente para ahorrar espacio, colocando el nombre del campo dentro del input y haciéndolo desaparecer al teclear dentro de él:

Este sería el html:

<div class="contacto">
  <input name="" type="text" placeholder="Nombre:"/><br />
  <input name="" type="text" placeholder="E-mail:"/><br />
  <input name="" type="text" placeholder="Asunto:"/>
</div>


Y este es el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
  // This adds 'placeholder' to the items listed in the jQuery .support object.
  jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>




Espero le sirva a alguien xD

(El script lo saqué de aqui: http://www.cssnewbie.com/example/placeholder-support/)

Usar tipografías personalizadas en tu sitio web

¿Estás harto de crear sitios web usando sólo arial y helvetica? ¿o de tener que usar imágenes cuando quieres utilizar otra tipografía? ... xD qué simple, ok... ya hay miles de tutoriales de cómo "embedear" tipografías pero están en inglés así que aquí va uno en español, y es muy fácil.

1. Entrar a http://www.fontsquirrel.com/fontface/generator y usar el generador de @font-face kit
2. De los archivos que se bajan necesitarás los de tipo .eot, .svg, .woff y .ttf.
3. Copia el texto de la hoja de estilos generada pero presta especial atención a la línea que tiene el archivo .svg, este debes subirlo a la  primera línea.

@font-face {
    font-family: 'ComfortaaRegular';
    src: url('comfortaa-regular-webfont.eot');
    src: /** aqui hay que poner la línea del .svg **/
         url('comfortaa-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('comfortaa-regular-webfont.woff') format('woff'),
         url('comfortaa-regular-webfont.ttf') format('truetype'),
         url('comfortaa-regular-webfont.svg#ComfortaaRegular') format('svg');  /**esta línea la subes**/
    font-weight: normal;
    font-style: normal;
}

¿por qué mover la línea? ¡Porque así saldrá la tipografía con antialiasing en chrome!
4. No olvides subir a tu server las fuentes.
5. Se utiliza como cualquier tupografía, mandándola llamar en los estilos, por ejemplo:
h1 {
      font-family: ComfortaRegular;
}

¡Cualquier duda en los comments! :D