Archive for Octubre, 2008

Google Street View de Barcelona sale mañana.

No solo con las vistas de calle de Barcelona si no de muchas localizaciones mas de España como Madrid, Valencia y Sevilla.

Mañana, según las ultimas informaciones, será el día en que entrará en funcionamiento. Así que podremos aprovecharnos de esta excelente herramienta con la cual podemos ver en detalle la localización donde hemos de ir, incluso podríamos decir que acerca un poco a la gente de fuer a de estas localidades e invita a recorrer, estas grandes ciudades y conocerlas mejor, ni que sea a través de la pantalla.

Todo este verano (al menos en Barcelona) se ha visto estos coches negros, con una cámara en la parte superior del techo del coche, con una pegatina pequeñita donde ponía (google), dando vueltas por la ciudad condal y por sus cercanías.

Como anécdota, decir que Google Street View a grabado situaciones un tanto inverosímiles como robos a tiendas, ladrones saliendo de apartamentos, gente saliendo de tiendas eróticas y una pequeña lista mas de raras situaciones.

Mañana sin falta dedicaremos un rato a revisar este servicio y como no a buscar las casas de parientes, amigos y familiares, como todo buen curioso que se precie…:P

CSS: El retorno de la tablas al desarrollo web

Pues si amigos, desde hace unos días se ha estado difundiendo esta información, la he visto en un par o tres de blogs y hasta el momento no he visto oportuno comentar la noticia, una noticia que me parece explendida!

Si amigos, por que todos los que llevamos nuestros añitos en el sector y que pasamos unos ratos memorables con las tablas, intentando montar verdaderas estructuras para maquetar los diseños inmaquetables de nuestros grande amigos con los que vivimos en simbiosis los diseñadores (larga vida!! au au au). Intentando no anidar mas de 2 tablas en una web, viendo como poco a poco iban desapareciendo, siendo enterradas por las capas (DIV's), siendo utilizadas para tareas tan mundanas y básicas como la creación de cuadriculas con contenidos o alineamientos imposibles  en horizontal...

Pues si, vuelven las tablas, pero no de la forma en que las conocemos, vuelven adaptadas a los nuevos tiempos, vuelven reconvertidas y reinventadas en CSS para utilizar al gusto y antojo con nuestras capas (DIV's).

Realment hay situaciones que con las tablas era cosa de 5 minutos, pero con las malditas capas, te pasabas un buen rato anidando y alineando con FLOATS a lado y lado...ufff que bien nos va a venir este apaño!!!

Según puedo leer y entender en un par de artículos en inglés (aviso, mi inglés es un poco wat you name :P), Ahora podremos crear una estructura de capas basada en tablas, con sus denominaciones de FILA, COLUMNA, asignando propiedades de CSS2 del tipo:

CSS:
  1. display: table-row;

CSS:
  1. display: table-cell;

Podemos ver que para ello, usamos la propiedad DISPLAY de nuestras capas.

Cabe destacar que esto según he leido por ahí viene dado por la inminente salida de Internet Explorer 8 y su mejorado soporte para dichas propiedades: TABLE, TABLE-ROW, TABLE-CELL

Como se va a usar:

  • TABLE: Hace que el elemento se comporte como una tabla.
  • TABLE-ROW: Hace que el elemento se comporte como una fila (TR).
  • TABLE-CELL: Hace que el elemento se comporte como una celda (TD).
  • TABLE-ROW-GROUP: Hace que los elementos se comporten como el cuerpo de una tabla (TBODY).
  • TABLE-HEADER-GROUP: Hace que los elementos se comporten como la cabecera de una tabla (THEAD).
  • TABLE-FOOTER-GROUP: Hace que los elementos se comporten como el pie de una tabla (TFOOT).
  • TABLE-CAPTION: Hace que el elemento se comporte como leyenda.
  • TABLE-COLUMN: Hace que los elementos se comporten como columna (COL).
  • TABLE-COLUMN-GROUP: Hace que los elementos se comporten como un grupo de columnas (COLGROUP).

Pues no se ve muy complicado no? Vamos a ver un ejemplo (no lo he echo yo, lo he cogido prestado de una de las webs que mas a bajo indico como referencia para saber mas)

Ejemplo práctico:

el HMTL

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.     <title>CSS Level 2 with table based settings</title>
  6.     <link href="tables.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div id="wrapper">
  9.     <div id="header">
  10.         Header information
  11.     </div>
  12.     <div id="main">
  13.         <div id="nav">
  14.             Navigation list here
  15.         </div>
  16.         <div id="columns">
  17.             <div id="sidebar">
  18.                 Nifty sidebar
  19.             </div>
  20.  
  21.             <div id="content">
  22.                 What would your site be without content
  23.             </div>
  24.         </div>
  25.     </div>
  26. </div>
  27. </body>
  28. </html>

el CSS

CSS:
  1. body
  2.     {
  3.     margin-left: 0px;
  4.     margin-top: 0px;
  5.     margin-right: 0px;
  6.     margin-bottom: 0px;
  7.     }
  8.  
  9. #header
  10.     {
  11.     display:block;
  12.     margin:0px auto;
  13.     width:870px;
  14.     padding:15px;
  15.     background-color:#666;
  16.     color:#FFF;
  17.     }
  18. /* nothing unusual so far */
  19.  
  20. #main
  21.     {
  22.     display: table;
  23.     margin:0px auto;
  24.     width:900px;
  25.     }
  26. /* display: table to make the main div be treated by browsers as a table */
  27.  
  28. #nav
  29.     {
  30.     display: table-row;
  31.     width: 900px;
  32.     height:50px;
  33.     line-height:50px;
  34.     text-indent:15px;
  35.     background-color:#D6D6D6;
  36.     color:#333;
  37.     }
  38.  
  39. /* is treated as a table row */
  40.  
  41. #sidebar
  42.     {
  43.     display: table-cell;
  44.     width: 185px;
  45.         height: 500px
  46.     padding-left:15px;
  47.     background-color:#FF6633;
  48.     color:#333;
  49.     }
  50.  
  51. #content
  52.     {
  53.     display: table-cell;
  54.     width: 685px;
  55.     padding-left:15px;
  56.     background-color:#77BBDD;
  57.     color:#333;
  58.     }
  59.  
  60. /* are placed inside the same father element: columns (check out the XHTML), and are treated as table cells */

Aquí tenéis 2 enlaces donde poder leer y aprender un poco mas sobre esta fantástica noticia.

The Return of Table-Based Layout
Everything you know about CSS is wrong

Envato empresa madre de famosas webs de recursos

Esta compañía afincada en Australia, si se puede llamar afincada ya que la mayoría de profesionales con los que trabaja se comunican a través de E-Mail o skype, sostiene una lista de webs que representan un arsenal de recursos que aprovechamos profesionales del sector en muchas facetas de nuestro trabajo.

Todos conocemos sites como: FlashDen, AudioJungle, Theme Forest, PSDTUTS, AUDIOTUTS, NETUTS, ...

Son alrededor de 11 millones de páginas vistas al mes las que consiguen y por el pogresivo augmento en la calidad de sus recursos, tutoriales o guias se divisa un futuro prometedor para una moderna empresa con una enfoque muy acertado.

Tip: Como Sacar imágenes de un documento Word (.doc)

En este "Tip" (truco), vamos a explicar de una forma breve como sacar las imágenes que hay dentro de un documento WORD.

Este tema ya lo trate hace un tiempo en Nemawashi, el blog personal (personalisisisimo que regento, cuando tengo tiempo). Lo comento por que quizás a alguien le suena haberlo leído en otro lado.

Lo recupero, por que hace poco me he vuelto ha encontrar con el mismo problema y al ver que es un mal bastante común en internet, pues cuanta mas difusión tenga, mas fácil será encontrar la solución ;)

Al caso:

Hace tiempo me pasaron un dossier en formato .doc (de word) y me pidieron que si podía poner el texto que aparecía en el dossier junto con unas imágenes que también había en el .doc en una pequeña página web.

Pues ahí vino mi problema, no es nuevo, ya me había pasado otras veces con la documentación de algún cliente, pero siempre, le había pedido las imágenes a parte y listos, asunto arreglado.

En este caso, no era un documento de un cliente y claro, no tenía las imágenes, las habían borrado (maaaal hecho).

Pues nada, no se por que, hoy me ha dado por comerme la cabeza probando distintas maneras de hacerlo. He descartado el hacer una impresión de pantalla (Ctrl + Impr. pant) y luego con el photoshop recortar las imágenes, ya que con esto consigo la imagen en la calidad cutre-salchichera con la que word la muestra.

Después de darle muchas vueltas y de mirar en los menús del WORD donde esperaba encontrar un botón que dijera “extraer imágenes del documento…” o alguna cosa similar que me hiciera alavar al gran Microsoft, pero no, la solución ha sido “Guardar como página web”.

Lo mas flipante es que le di sin querer por que se me escapo el ratón…y ya que estaba, decidi completar la acción. Me di cuenta que al guardar el .doc como página web, word genera un html y una carpeta con los archivos que hay incluidos en el documento, en este caso imágenes, y que las deja en su calidad original (la calidad con la que se hizo el insert de dichas imágenes en el documento).

Así que, para todo aquel que lo necesite, para extraer imágenes de un .doc (word) en su calidad original, usad “Archivo > Guardar Como > Guardar como página web”. Esto generará una serie de carpetas en la ubicación donde marquéis para guardar el .html generado y en una de estas carpetas deben de estar las imágenes.

Que bien quedarían en mi escritorio….

Pues si, no? hace días que los estoy viendo por todo internet y cada vez estoy mas convencido que en mi escritorio quedarían de fabula, a que si Victor? jejeje

En mi PC no tengo altavoces, y siempre tengo que andar medio autista en la oficina. Creo que ha llegado el momento de no seguir mas en silencio, no se que tal sonarán pero curiosos lo son un rato largo :P

El principio KISS

Keep It Simple Stupid.

A veces, al plantear algunas cosas deberiamos tener este principio entre ceja y ceja.

Amen!

Emily Forgot

El nombre verdadero de esta magnifica ilustradora afincada en Londres es Emily Alston.

Esta ilustradora que estudió en Liverpool aglutina una serie de disciplinas artísticas con naturalidad, modernidad y plasticidad, con lo justo nos conduce a una lectura rápida y concisa de sus obras,

Una delicia de trabajos basados en la cuotidianidad o en un surrealismo muy original.

En su página web podemos comprar laminas, e incluso una vajilla!