Archive for the ‘Tips’ Category

CSS: Aplicar CSS a nuestras tablas

Escrito por Marc | Archivado en Desarrollo web, Tips

Aún existiendo CSS, es imposible dejar de utilizar las tablas, sobre todo cuando hablamos de listados y tenemos la necesidad de introducir contenido tabulado. Para todo esto, de momento practicamente todos seguimos usandolas, mientras no salgns las nuevas especificaciones CSS que nos permite plagiar una estructura de tablas con tags CSS.

Después de  mucho buscar y rebuscar he encontrado un listado muy bueno de unos 98 diseños basados en CSS y que se pueden aplicar a listados realizados con tablas.

Aprovechando las características THEAD, TBODY y TFOOTER, podremos dejar nuestras tablas realmente bonitas de una forma rápida y sencilla.

También es muy provechoso para aprender del código y podernos montar así nuestros propios estilos a raíz de lo que nos enseñan estos maravillosos CSS.

Venga, no te costará nada

Data tables and Cascading Style Sheets

Tags:
Leer mas | Comentarios (0) | Nov 24, 2008

Cambiar color de la linea punteada que aparece en las imagenes con links (change outline color)

Escrito por Marc | Archivado en Desarrollo web, Tips

En nuestro CSS hemos de poner;

PLAIN TEXT
CSS:
  1. * {outline-color: #ffffff; }

De esta manera cambiaremos el color de esa molesta linea punteada en todos lo que tenga enlaces de nuestra web, pudiendo poner así el color que mas combine en cada caso.

Tags:
Leer mas | Comentarios (0) | Nov 20, 2008

jQuery: Cambiar color de fondo de una capa, al hacer rollover en una imagen.

Escrito por Marc | Archivado en Desarrollo web, Tips

Hace unos días realizando un proyecto hemos tenido la necesidad de tener que cambiar el color de fondo de una capa, cuando se pusiera el ratón encima de una imagen que estaba lincada. Básicamente para destacar el texto que había debajo de esta imagen y el precio.

Teníamos que emular el efecto rollover de un link pero distorsionado, así que nos pusimos manos a la obra, evidentemente teniendo a mano la librería jQuery, esto es cuestión de minutos!

Ver ejemplo en funcionamiento

PLAIN TEXT
HTML:
  3. <script language="javascript" type="text/javascript" src="jquery.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function () {
  7. $("#img").mouseover(function () {
  8.       $("#enlace").css("background","#7e7e7e");
  9. });
  10. $("#img").mouseout(function () {
  11.       $("#enlace").css("background","#f0f0f0");
  12. });
  13. });
  14. </script>
  15. <style type="text/css">
  16. body{
  17.     font-family:Arial;
  18.     color:#333333;
  19. }
  20. .link1,.link1:visited{
  21.     font-size:10pt;
  22.     font-weight:bold;
  23.     color:#000000;
  24.     text-decoration:none;
  25. }
  26. .link1:hover{
  27.     font-size:10pt;
  28.     font-weight:bold;
  29.     color:#488b2e;
  30. }
  31. </style>
  32. </head>
  35.     <div style="width:399px; margin-bottom:10px;" id="img"><img src="imagen.jpg"/></div>
  36.     <div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
  37.         <div style="float:left; wdith:150px; padding:6px 0 0 3px;"><a href="#" class="link1">Enlace</a></div>
  38.         <div style="float:right; width:30px; padding-top:3px;">33€</div>
  39.     </div>
  40. </div>
  41. </body>
  42. </html>

Tags: , ,
Leer mas | Comentarios (0) | Oct 31, 2008

CSS: El retorno de la tablas al desarrollo web

Escrito por Marc | Archivado en Desarrollo web, Tips

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:

PLAIN TEXT
CSS:
  1. display: table-row;

PLAIN TEXT
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

PLAIN TEXT
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">
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>CSS Level 2 with table based settings</title>
  7.     <link href="tables.css" rel="stylesheet" type="text/css" />
  8. </head>
  10. <div id="wrapper">
  11.     <div id="header">
  12.         Header information
  13.     </div>
  14.     <div id="main">
  15.         <div id="nav">
  16.             Navigation list here
  17.         </div>
  18.         <div id="columns">
  19.             <div id="sidebar">
  20.                 Nifty sidebar
  21.             </div>
  22.  
  23.             <div id="content">
  24.                 What would your site be without content
  25.             </div>
  26.         </div>
  27.     </div>
  28. </div>
  29. </body>
  30. </html>

el CSS

PLAIN TEXT
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

Tags: ,
Leer mas | Comentarios (0) | Oct 24, 2008

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

Escrito por Marc | Archivado en Tips

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.

Tags: ,
Leer mas | Comentarios (0) | Oct 21, 2008

MySQL: Recoger el último ID insertado en la base de datos.

Escrito por Marc | Archivado en Desarrollo web, Tips

Muchas veces, creamos tablas con ID autonuméricos en nuestra base de datos mySQL, y también algunas veces necesitamos recoger el identificador autonumérico que se acaba de insertar para poder trastear con él y asociar/relacionar registros de otras tablas.

Hay el metodo rudo que es:

  1. Ejecutamos un select sobre la tabla que contiene el ID autonumérico y lo ordenamos descendentemende por el ID, de manera, que el primer registro que nos devuelte este recordset, es el que se acaba de insertar.
  2. Metemos este ID en una variable y tachan... ya disponemos de el último ID autonumérico que se acaba de insertar.

El problema de esto, es que generamos un trafico de ida y venida bastante absurdo en la base de datos, en relación a los datos que necesitamos recuperar, un simple ID.

Pero como casi todo en este beautiful world, hay un modo mucho mas sencillo de hacerlo:

  1. Despues de ejecutar nuestro INSERT contra la tabla X, solo tenemos que asignar mysql_insert_id() a una variable.

Ejemplo:

PLAIN TEXT
PHP:
  1. $_sql = "INSERT INTO tabla (nombre,apellido) VALUES ('Marc','Grijander');"
  2. $insertar = mysql_query($_sql);
  3.  
  4. $ultimo_id = mysql_insert_id();

Que opción os gusta mas? ;)

Referencia a mysql_insert_id(); en php.net

Tags: ,
Leer mas | Comentarios (0) | Oct 8, 2008

JS: Actualizar ventana padre desde pop-up.

Escrito por Marc | Archivado en Desarrollo web, Tips

Muchas veces, abrimos una ventana flotante donde hemos puesto un formulario desde el cual actualizamos datos. Casi siempre suele ser un listado de datos, registros listados de una base de datos y el pop-up suele contener un pequeño FROM para actualizar datos básicos.

Solemos abrir este pop-up para actualizar datos y cuando hacemos esto, lo ideal es que la ventana donde esta el listado (padre del pop-up que hemos abierto) se actualice al hacer el submit de los datos y de este modo podamos ver el resultado sin tener que forzar la recarga de dicho listado con un click o usando cualquier atajo de teclado.

Esto es muy fácil de hacer desde javascript, solamente necesitamos una linea de código. Ésta linea tenemos que añadirla al final de la página que procesa el PHP o ASP, vamos el lenguaje de servidor que realice la inserción de los datos en la base de datos.

PLAIN TEXT
JAVASCRIPT:
  1. window.opener.location.reload();

Fácil, no? Pues si además queremos que una vez recargada la página padre el pop-up se cierre automáticamente, solamente le tenemos que añadir una linea mas a este código.

PLAIN TEXT
JAVASCRIPT:
  1. window.opener.location.reload();
  2. window.close();

Cabe destacar que este código sirve para cualquier página que esté escrita en lenguaje script, ASP o PHP ya que dicho código es javascript y se interpreta íntegramente en el navegador del cliente/usuario.

Tags: ,
Leer mas | Comentarios (0) | Oct 6, 2008

« Older Entries