Guiabreve http://www.guiabreve.com Blog personal de Víctor Falcón sobre Desarrollo y Diseño Web Mon, 29 Jun 2009 11:56:25 +0000 http://wordpress.org/?v=2.8 en hourly 1 Google no sierra sus tags HTML a propósito http://www.guiabreve.com/google-no-sierra-sus-tags-html-a-proposito.htm http://www.guiabreve.com/google-no-sierra-sus-tags-html-a-proposito.htm#comments Mon, 29 Jun 2009 11:56:25 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=871 Al parecer Google no sierra sus tags HTML a propósito para arañar unos cuantos milisegundos en la carga de sus páginas. La custión es, ¿os parece bien saltarse los estándares para acelerar la carga?

]]> http://www.guiabreve.com/google-no-sierra-sus-tags-html-a-proposito.htm/feed 1 Página de prueba HTML para testear nuestro CSS http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm#comments Wed, 24 Jun 2009 21:45:24 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=863 En Snipplr podemos ver los fragmentos de código que usan otros diseñadores. Algunos de ellos son realmente buenos como este que he encontrado hoy.

Es sencillo. Simplemente es una página HTML en la que encontraremos aquellos elementos más comunes y asi podremos probar nuestra hoja de estilo CSS y comprobar que elementos hemos definido, cuales no y cuales están bien y cuales no. Todo ello desde una solo página de un solo viztazo.

A continuación os dejo el código aunque también podeís verlo en snipplr.

[COPIAR]
Código HTML (Copiar):
  1. <!-- Sample Content to Plugin to Template -->
  2. <h1>CSS Basic Elements</h1>
  3. The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
  4.  
  5. <hr />
  6. <h1 id="headings">Headings</h1>
  7. <h1>Heading 1</h1>
  8. <h2>Heading 2</h2>
  9. <h3>Heading 3</h3>
  10. <h4>Heading 4</h4>
  11. <h5>Heading 5</h5>
  12. <h6>Heading 6</h6>
  13. <small><a href="#wrapper">[top]</a></small>
  14.  
  15. <hr />
  16. <h1 id="paragraph">Paragraph</h1>
  17. <img style="width: 250px; height: 125px; float: right;" src="images/css_gods_language.png" alt="CSS | God's Language" />
  18.  
  19. Lorem ipsum dolor sit amet, <a title="test link" href="#">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
  20.  
  21. Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
  22.  
  23. <small><a href="#wrapper">[top]</a></small>
  24.  
  25. <hr />
  26. <h1 id="list_types">List Types</h1>
  27. <h3>Definition List</h3>
  28. <dl> <dt>Definition List Title</dt> <dd>This is a definition list division.</dd> </dl>
  29. <h3>Ordered List</h3>
  31.     <li>List Item 1</li>
  32.     <li>List Item 2</li>
  33.     <li>List Item 3</li>
  34. </ol>
  35. <h3>Unordered List</h3>
  37.     <li>List Item 1</li>
  38.     <li>List Item 2</li>
  39.     <li>List Item 3</li>
  40. </ul>
  41. <small><a href="#wrapper">[top]</a></small>
  42.  
  43. <hr />
  44. <h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
  46. <legend>Legend</legend>
  47.  
  48. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
  49.  
  51. <h2>Form Element</h2>
  52. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.
  53.  
  54. <label for="text_field">Text Field:</label>
  55.  
  56. <input id="text_field" type="text" />
  57.  
  58. <label for="text_area">Text Area:</label>
  59.  
  60. <textarea id="text_area"></textarea>
  61.  
  62. <label for="select_element">Select Element:</label>
  63.  
  64. <select name="select_element"> <optgroup label="Option Group 1"></optgroup> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <optgroup label="Option Group 2"></optgroup> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
  65.  
  66. <label for="radio_buttons">Radio Buttons:</label>
  67.  
  68. <input class="radio" name="radio_button" type="radio" value="radio_1" /> Radio 1
  69.  
  70. <input class="radio" name="radio_button" type="radio" value="radio_2" /> Radio 2
  71.  
  72. <input class="radio" name="radio_button" type="radio" value="radio_3" /> Radio 3
  73.  
  74. <label for="checkboxes">Checkboxes:</label>
  75.  
  76. <input class="checkbox" name="checkboxes" type="checkbox" value="check_1" /> Radio 1
  77.  
  78. <input class="checkbox" name="checkboxes" type="checkbox" value="check_2" /> Radio 2
  79.  
  80. <input class="checkbox" name="checkboxes" type="checkbox" value="check_3" /> Radio 3
  81.  
  82. <label for="password">Password:</label>
  83.  
  84. <input class="password" name="password" type="password" />
  85.  
  86. <label for="file">File Input:</label>
  87.  
  88. <input class="file" name="file" type="file" />
  89.  
  90. <input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
  91.  
  92. </form>
  93.  
  94. </fieldset>
  95.  
  96. <small><a href="#wrapper">[top]</a></small>
  97.  
  98. <hr />
  99. <h1 id="tables">Tables</h1>
  100. <table border="0" cellspacing="0" cellpadding="0">
  103. <th>Table Header 1</th>
  104. <th>Table Header 2</th>
  105. <th>Table Header 3</th>
  106. </tr>
  108. <td>Division 1</td>
  109. <td>Division 2</td>
  110. <td>Division 3</td>
  111. </tr>
  112. <tr class="even">
  113. <td>Division 1</td>
  114. <td>Division 2</td>
  115. <td>Division 3</td>
  116. </tr>
  118. <td>Division 1</td>
  119. <td>Division 2</td>
  120. <td>Division 3</td>
  121. </tr>
  122. </tbody></table>
  123. <small><a href="#wrapper">[top]</a></small>
  124.  
  125. <hr />
  126. <h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
  127. Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr>
  129. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></pre>
  130. <blockquote>"This stylesheet is going to help so freaking much."
  131. -Blockquote</blockquote>
  132. <small><a href="#wrapper">[top]</a></small>
  133. <!-- End of Sample Content -->

]]> http://www.guiabreve.com/pagina-de-prueba-html-para-testear-nuestro-css.htm/feed 1 Menús desplegables, ¡solo con CSS! http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm#comments Sat, 20 Jun 2009 20:14:53 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=861 Menús desplegables, ¡solo con CSS! Normalmente solemos usar Javascript para añadirles efectos pero realmente si queremos realizar un menú desplegable sencillo lo podemos hacer solo usando CSS tal y como lo explica el señor Janko en su blog.

]]> http://www.guiabreve.com/menus-desplegables-%c2%a1solo-con-css.htm/feed 0 Revolt: un Theme con piés y cabeza http://www.guiabreve.com/revolt-un-theme-con-pies-y-cabeza.htm http://www.guiabreve.com/revolt-un-theme-con-pies-y-cabeza.htm#comments Fri, 19 Jun 2009 15:07:24 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=851 revolt-theme-284x500Revoltes un theme muy original. Todos los themes tienen header y footer pero este en cuestión tiene pies y cabeza literalmente.

El theme ha sido creado por NenadK y podemos ver una demostración de como queda directamente en su blog, y si nos gusta podemos pasar a descargarlo.

]]> http://www.guiabreve.com/revolt-un-theme-con-pies-y-cabeza.htm/feed 0 La experiencia de crear un theme para Tumblr http://www.guiabreve.com/la-experiencia-de-crear-un-theme-para-tumblr.htm http://www.guiabreve.com/la-experiencia-de-crear-un-theme-para-tumblr.htm#comments Sun, 31 May 2009 23:19:47 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=844 Últimamente me estoy enganchando, y mucho, a Tumblr. Aun que ya lo había usado anteriormente, lo acabé dejando, pero ahora he vuelto a engancharme y no se cuanto durará, pero esta tarde he tenido tiempo y he decidido darle un diseño propio.

La experiencia de crear un theme para Tumblr no ha sido muy buena la verdad. Desde el punto de vista del código todo ha sido bastante sencillo, leyéndonos esta simple página entendemos enseguida la mecánica y estructura del código de un theme, la cual está bastante bien diseñada en mi humilde opinión.

El problema viene cuando estamos a mitad de crear un diseño y queremos ir comprobando como se va viendo. Desde la sección Customize de Tumblr podemos editar el código y previsualizar como va quedando, pero ni colorea el código ni nada de nada, por lo que decidí usar un editor de código externo, en este caso, Coda.

Desde él, es muy difícil, por no decir imposible, hacerse un idea de como va quedando el código que vamos creando y he tenido que estar continuamente copiando y pegando el código al editor de Tumblr, vamos, un verdadero coñazo.

Pero bueno, problemas aparte, estoy bastante contento con el resultado.

Por cierto, si tenéis Tumblr, seguidme si os gusta para yo poder leer los vuestros también.

]]> http://www.guiabreve.com/la-experiencia-de-crear-un-theme-para-tumblr.htm/feed 0 Vídeos de Web OS, el sistema operativo de la Palm Pre http://www.guiabreve.com/videos-de-web-os-el-sistema-operativo-de-la-palm-pre.htm http://www.guiabreve.com/videos-de-web-os-el-sistema-operativo-de-la-palm-pre.htm#comments Mon, 25 May 2009 13:33:04 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=835 palm-preSi me sigues en Twitter sabrás que me encanta la Palm Pre. Me parece en grán telefono. Bonito, pequeño, con teclado y, sobre todo, un gran sistema operativo, Web OS.

Pues bién, desde la salida la beta del SDK algunos afortunados han podido comenzar a probar el sistema operativo aunque solo sea emulandolo en el ordenador y con un ratón. Aúnque por desgracia no podremos probar algunas cosas, como el multitouch, por lo menos podemos ver el aspecto y funcionamiento básico del sistema.

Para los interesados en ver Web OS he encontrado por Youtube este canal en el que tenemos 17 vídeos de dicho emulador funcionando bajo una Mac.

]]> http://www.guiabreve.com/videos-de-web-os-el-sistema-operativo-de-la-palm-pre.htm/feed 0 8 Soluciones basadas en Javascript a los problemas más comunes de CSS http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm#comments Sun, 24 May 2009 16:58:05 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=830 A veces para solucionar algunos de los problemas en cuanto a compatibilidad con los distintos navegadores de CSS no nos basta el CSS, a veces, tenemos que recurrir al Javascript. Por eso os dejo esta entra que recopila 8 Soluciones basadas en Javascript a los problemas más comunes de CSS.

]]> http://www.guiabreve.com/8-soluciones-basadas-en-javascript-a-los-problemas-mas-comunes-de-css.htm/feed 0 Gmail añade traducción automática a los correos en otros idiomas http://www.guiabreve.com/gmail-anade-traduccion-automatica-a-los-correos-en-otros-idiomas.htm http://www.guiabreve.com/gmail-anade-traduccion-automatica-a-los-correos-en-otros-idiomas.htm#comments Sun, 24 May 2009 14:30:24 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=825 Google lleva un mes mejorando y añadiendo nuevas características a Gmail sin parar y prácticamente con cada semana que va pasando tenemos novedades, algunas que merecen la pena ser destacadas y otras no tanto.

Ahora Google ha añadido a Gmail la capacidad de traducir mensajes a cualquier idioma para que nuestros contactos puedan leer los correos aunque no escribamos en su idioma y viceversa.

Que nadie se espere una traducción perfecta, ya que por desgracia, a día de hoy los traductores automáticos dejan mucho que desear, pero, por lo menos servirá para enterarnos de lo que nos quiere decir.

Para activarlo, como siempre, vamos a la pestaña Labs en la configuración de nuestro Gmail.

]]> http://www.guiabreve.com/gmail-anade-traduccion-automatica-a-los-correos-en-otros-idiomas.htm/feed 0 Wordpress 2.8: ya está disponible la Beta 2 http://www.guiabreve.com/wordpress-28-ya-esta-disponible-la-beta-2.htm http://www.guiabreve.com/wordpress-28-ya-esta-disponible-la-beta-2.htm#comments Sun, 24 May 2009 09:53:06 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=823 Acaba de ser publicada la versión Beta 2 de Wordpress 2.8 en esta versión se han hecho algunos cambios y correcciones sobre la beta anterior.

Si estáis siguiendo el desarrollo de esta versión podéis descargar la última versión desde aquí, si no, mejor esperar por lo menos a la primera Release Candidate.

]]> http://www.guiabreve.com/wordpress-28-ya-esta-disponible-la-beta-2.htm/feed 0 Añade colorido animado a tu página con Javascript http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm#comments Wed, 20 May 2009 17:57:01 +0000 Víctor F. Ruiz http://www.guiabreve.com/?p=820 Bonito el efecto que han generado en Dragon Labs (Demo) consiguiendo un fondo colorido y animado. El problema: la forma en que carga no es muy elegante y tendremos que usar una imagen de 3000x900 pixeles.

]]> http://www.guiabreve.com/anade-colorido-animado-a-tu-pagina-con-javascript.htm/feed 0