Archive for the ‘Desarrollo web’ Category
Instalando Google Chrome…era inevitable..
Escrito por Marc | Archivado en Desarrollo web, Internet
La verdad es que lo he alargado todo lo que he podido, no quería instalarme el Google Chrome, por que, si me lo instalo voy a tener que mirar también lo que maqueto en XHTML y CSS en otro navegador mas.
Por que, como somos tan chulos y cada vez mas los programadores disponemos de dos monitores para trabajar, que mas da tener otro navegador en el que validar el trabajo.
A la actual lista de navegadores, tanto para Mac como para PC de:
- Internet Explorer 7
- Internet Explorer 6
- Firefox 2
- Firefox 3
- Safari
Hay que sumarle
- Google Chrome
- Internet Explorer 8 (en breve)
Esto a parte de dejarnos bizcos y con un movimiento de ojos equiparable a los de Marujita Diaz, ahora tendremos que sumar que nuestros genes, estan absorviendo la separación de dedos que nos está causando el usar tan repetidamente el gesto de apretar Ctrl+TAB para cambiar de ventanas!!!
Al final tiene que pasar como con todo en esta vida, los enchufes lo sufrieron, las conexiones de periféricos (LPT1, COM1, COM2) también lo han sufrido, necesitamos un estándar! YA!
Hay que crear un movimiento/plataforma…. algo!
Internet Explorer 8 para el primer cuatrimestre de 2009
Escrito por Marc | Archivado en Desarrollo web, Internet
Que alegría que alboroto….
Aproximadamente en Marzo… pero como siempre.. es un aproximado.
Esperemos que para esa fecha, haya muerto alguno de los actuales internet explorer (más bien, esperemos que el 6 haya caido en lo mas profundo de las estadísticas). Por que si no, nos vamos a volver un tanto locos optimizando el código para IE6, 7 y 8 !!! Además de los ya habituales FireFox 2 / 3 y Safari!!
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
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;
-
* {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.
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!
-
<script language="javascript" type="text/javascript" src="jquery.js"></script>
-
-
<script type="text/javascript">
-
$(document).ready(function () {
-
$("#img").mouseover(function () {
-
$("#enlace").css("background","#7e7e7e");
-
});
-
$("#img").mouseout(function () {
-
$("#enlace").css("background","#f0f0f0");
-
});
-
});
-
</script>
-
<style type="text/css">
-
body{
-
font-family:Arial;
-
color:#333333;
-
}
-
.link1,.link1:visited{
-
font-size:10pt;
-
font-weight:bold;
-
color:#000000;
-
text-decoration:none;
-
}
-
.link1:hover{
-
font-size:10pt;
-
font-weight:bold;
-
color:#488b2e;
-
}
-
</style>
-
</head>
-
<div style="height:28px; width:399px; background:#f0f0f0;" id="enlace">
-
<div style="float:right; width:30px; padding-top:3px;">33€</div>
-
</div>
-
</div>
-
</body>
-
</html>
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:
-
display: table-row;
-
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
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-
<title>CSS Level 2 with table based settings</title>
-
<link href="tables.css" rel="stylesheet" type="text/css" />
-
</head>
-
<div id="wrapper">
-
<div id="header">
-
Header information
-
</div>
-
<div id="main">
-
<div id="nav">
-
Navigation list here
-
</div>
-
<div id="columns">
-
<div id="sidebar">
-
Nifty sidebar
-
</div>
-
-
<div id="content">
-
What would your site be without content
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
el CSS
-
body
-
{
-
margin-left: 0px;
-
margin-top: 0px;
-
margin-right: 0px;
-
margin-bottom: 0px;
-
}
-
-
#header
-
{
-
display:block;
-
margin:0px auto;
-
width:870px;
-
padding:15px;
-
background-color:#666;
-
color:#FFF;
-
}
-
/* nothing unusual so far */
-
-
#main
-
{
-
display: table;
-
margin:0px auto;
-
width:900px;
-
}
-
/* display: table to make the main div be treated by browsers as a table */
-
-
#nav
-
{
-
display: table-row;
-
width: 900px;
-
height:50px;
-
line-height:50px;
-
text-indent:15px;
-
background-color:#D6D6D6;
-
color:#333;
-
}
-
-
/* is treated as a table row */
-
-
#sidebar
-
{
-
display: table-cell;
-
width: 185px;
-
height: 500px
-
padding-left:15px;
-
background-color:#FF6633;
-
color:#333;
-
}
-
-
#content
-
{
-
display: table-cell;
-
width: 685px;
-
padding-left:15px;
-
background-color:#77BBDD;
-
color:#333;
-
}
-
-
/* 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
El principio KISS
Escrito por Marc | Archivado en Desarrollo web
Keep It Simple Stupid.
A veces, al plantear algunas cosas deberiamos tener este principio entre ceja y ceja.
Amen!
