Lista de fuentes seguras para utilizar en las Web’s

4 de June de 2008 | Categoría: Diseño

Algo muy importante para un diseñador web es conocer que fuentes puede utilizar en sus proyectos de forma que todos, o la mayoría de los usuarios puedan ver la web correctamente. Para ello en Font Tester han publicado un lista muy completa con todas las fuentes que podemos utilizar y que se verán correctamente en los sistemas operativos más populares.

Lista de fuentes compatibles con la mayoría de sistemas operativos:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Vía: List of Web Safe Fonts (Font tester)

 
Enlace permanente | 0 Comentarios →

Interesante recopilación de 45 themes para Wordpress tipo Magazine. La mayoría de estos diseños suelen ser de pago, pero en este caso todos son gratuitos. (Vía) — [0].

 

Novedades y demo de Wordpress 2.6

23 de May de 2008 | Categoría: Wordpress

Una vez que ya ha salido Wordpress 2.5 y su primera actualización llega la hora de pensar en que es lo que traerá la futura versión 2.6. La verdad es que no hay nada excesivamente novedoso por ahora pero aún queda mucho tiempo.

Por ahora teneís disponible una versión de prueba del panel de control (Usuario: admin / Pass: demo) con acceso como administrador. También en Wordpress Expert han publicado una lista con los cambios que se han aplicado por ahora, además esta lista se irá actualizando con las ultimas novedades. Por ahora la lista esta de la siguiente forma:

  • Posibilidad de mover el archivo wp-config
  • Soporte para Google Gears: ahora tenemos la posibilidad de escribir entradas y editarlas sin conexión, y cuando nos conectemos a internet automáticamente se sincronizará todo.
  • IdentIcons: posibilidad de predefinir un avatar para los usuarios que no tenga configurado un Gravatar.
  • Revisión de Entradas: Podremos convertir nuestro Wordpress en una especie de Wiki permitiendo que los usuarios hagan modificaciones en las entradas.
  • Selección de varios post mediante Shift-Click: en la lista de entrada podremos hacer shif+click para seleccionar varios post tal y como sucede en los sistemas operativos con los archivos.
  • Contador de palabras: se ha añadido en el panel de escritura un contador de palabras escritas.
  • Bookmarklet: recordáis aquel enlace que nos daba wordpress para añadir a nuestros favoritos que al hacer clic en el nos permitía escribir una noticia con el texto seleccionado de forma automática. Pues ahora vuelve con nuevas funcionalidades.

Tras ver la lista de novedades me doy cuenta de que estoy totalmente de acuerdo con Armonth de Sight y es que relacionado con los blogs ya poco más se le puede añadir a Wordpress ahora se esta tendiendo a añadir cosas más generales y no tan enfocadas a lo que un blog es en sí.

 
Enlace permanente | 1 Comentario →

Vectorizandome a mi mismo

22 de May de 2008 | Categoría: Diseño

Es la primera vez que hago una imagen vectorial, pero, creo que me ha quedado bien. Todo comenzó a partir de esta entrada de Andres Nieto en la que un usuario le envió un dibujito bastante interesante. Me anime, y decidí intentar hacer algo parecido con una foto mía. ¿Que os parece?

PD: por el MSN me comentan que los labios me han quedado demasiado grandes y rojos, que debería de cambiarles el color y hacerlos más finos… :(

 
Enlace permanente | 0 Comentarios →

¿Será asi como surgieron los logos de algunas Empresas?

19 de May de 2008 | Categoría: Diseño

Realmente lo dudo, pero se trata de una forma muy creativa de ver algunos de los logos de las empresas más grandes. En Logólogos, un blog, recopilan varías formas de ver algunos logos bastante conocidos, como ya he dicho, una forma bastante curiosa de verlos.

 
Enlace permanente | 1 Comentario →

Menú superior desplegable con jQuery

18 de May de 2008 | Categoría: Tutoriales

 

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.     $(".btn-slide").click(function(){
  6.         $("#panel").slideToggle("slow");
  7.         $(this).toggleClass("active"); return false;
  8.     });
  9.    
  10.     
  11. });
  12. </script>

El código html quedaría de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div id="panel">
  2.     <ul class="list">
  3.         <li><a href="#">Inicio</a></li>
  4.         <li><a href="#">Contacto</a></li>
  5.         <li><a href="#">Portafolio</a></li>
  6.         <li><a href="#">Sobre...</a></li>
  7.         <li><a href="#">Ayuda</a></li>
  8.         <li class="buscar"><input value="Buscar" /></li>
  9.     </ul>
  10.     <div class="clear"></div>
  11. </div>
  12.  
  13. <p class="slide"><a href="#" class="btn-slide">Men&uacute;</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. #panel {
  2.     background: #CCC093;
  3.     height: 50px;
  4.     display: none;
  5. }
  6. .slide {
  7.     margin: 0;
  8.     padding: 0 0 0 5px;
  9.     border-top: solid 4px #825948;
  10.     height: 40px;
  11. }
  12. .btn-slide {
  13.     float: left;
  14.     background: #825948 url(white-arrow.gif) no-repeat right -50px;
  15.     text-align: center;
  16.     width: 144px;
  17.     height: 31px;
  18.     padding: 10px 10px 0 0;
  19.     margin: 0 auto;
  20.     display: block;
  21.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  22.     color: #fff;
  23.     text-decoration: none;
  24. }
  25. .active {
  26.     background-position: right 12px;
  27. }
  28.  
  29. ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
  30. ul.list li {float: left; width: auto;}
  31. ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
  32. ul.list a:hover {text-decoration: none; background: #825948;}
  33.  
  34. ul.list li.buscar {float: right; margin-right: 5px;}
  35. ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

 
Enlace permanente | 0 Comentarios →

Como mostrar una imagen mientras se carga un vídeo

16 de May de 2008 | Categoría: CSS, Tutoriales

El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.

Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. .video {
  2. border: 20px solid #825948;
  3. background: url(video-bg.gif) center no-repeat;
  4. margin: auto;
  5. background-color: #825948;
  6. height: 355px;
  7. width: 425px;
  8. }

Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.

El código Html sería algo así:

[COPIAR]
Código CODE (Copiar):
  1. <div class="video"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" /><embed type="application/x-shockwave-flash" width="425" height="355" src="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" wmode="transparent"></embed></object></div>

Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.

 
Enlace permanente | 4 Comentarios →

Logo friki de Google para conmemorar la invención del laser

16 de May de 2008 | Categoría: Diseño

Google nos sorprende hoy con un logo bastante friki. Se trata de un logo para conmemorar el 48 aniversario del laser desde su invención que se registró el 16 de Mayo de 1960 por Charles Hard Townes y Arthur Leonard Schawlow.

Vía | tiki-o-rama

 
Enlace permanente | 0 Comentarios →