Errores Javascript

Tu framework CSS

Icono de Desarrollo webComo comenté, en la entrada anterior sobre la revisión del framework CSS «Blueprint», repetiré que no niego que sea útil, no obstante yo esperaba otra cosa y, como dije, la sorpresa fue más o m[...]

  • 11
  • ene
  • 2009

Publicado por J.A.Cobo. Guardado en Desarrollo web, Diseño web.
hace 1 año y 6 meses 2 comentarios

Como comenté, en la entrada anterior sobre la revisión del framework CSS «Blueprint», repetiré que no niego que sea útil, no obstante yo esperaba otra cosa y, como dije, la sorpresa fue más o menos ver que uno mismo ya tiene algo parecido.

Si bien, la estructura de los archivos, la separación y la organización, sí que me ha sido de utilidad para organizar algo mejor mis hojas de estilos, algo a lo que hasta ahora no había decido meterle mano en serio.

Estructura de la plantilla

Así que, tras reorganizar mis hojas, separarlas y distribuirlas algo mejor (por no decir mucho), me ha quedado algo así en lo concerniente a CSS:

Se omite el resto del código, pero básicamente establece los selectores base de modo que sirve también para navegadores antiguos que no soportan la regla @import; (ver nota final sobre el CSS del W3C para navegadores obsoletos).

Basic.css
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

/**
 * Info:
 * Estructura de directorios para css e imágenes / Directories structure for images and CSS:
 * (Sup) Raíz del theme / Theme root
 * - css
 * 	(Archivos / Files)
 * 	- basic.css			- link header - screen, handheld
 * 	- basicTest.css			- link header alternate - screen
 *	- layout.css			- import - screen
 * 	- layoutTest.css		- link header alternate - screen
 *	- custom.css			- import - screen
 *	- grid.css			- import - screen
 * 	- typography.css		- import - screen, print, handheld
 
 * 	- print.css			- link header - print, handheld
 * 	- w3cOldBrowsers.css		- link header alternate - handheld, tty
 
 * 	(Directorios / Directories)
 * 	- browsers
 *		- ie.css
 * 		- opera.css
 * 	- plugins
 *		- extra.css
 *		- noStandar.css
 *		- links.css
 * 		- niceImages.css
 *		- (Otros / Others): imagebox/imagebox.css, lightbox/lightbox.css
 * 	- forms
 * 		- forms.css
 * 	- tables
 *		- tables.css
 * 	- sections
 *		- home.css
 *		- ingle.css
 *		- ...
 * - images
 *	- bg
 *	- icons
 *	- errors
 *	- plugins
 * * Opcional / Optional:
 *	- forms
 *	- tables
 *	- sections
 *	- header
 *	- footer
 * -------------------------------------------------------- */
 
/* Importar estilos:
 * ------------------------------------------------------ */
@import url("layout.css");				/* Estructura base */
@import url("custom.css");				/* Estilos personalizados */
@import url("grid.css");					/* Rejilla genérica */
@import url("typography.css");			/* Estilos de fuentes genéricas */
@import url("plugins/niceImages.css");		/* Estilos avanzados para imágenes */
@import url("plugins/links.css");			/* Estilos avanzados para enlaces */
@import url("plugins/extraStyles/extra.css");	/* Estilos extras */
@import url("noStandar.css");				/* Estilos sobre borradores actuales */

…bien, lo más obvio y lo mejor de todo es que te puedes permitir hacer esto si usas algún sistema de compresión y caché de archivos, por ejemplo: Minify ^^!

Layout elástico

Aquí, el layout elástico del que hablaba y que, al menos a mí, me va muy bien:
Se incluyen algunas reglas que deberían ir en otras hojas, pero para el ejemplo da igual. Igualmente, hay reglas que pueden estar subordinadas -por especifidad o lo que sea- a otras en otros estilos, por ejemplo si necesitas un visibility:hidden; un text-indent negativo, las cuales se pueden aplicar como clases a los elementos mediante el lenguaje de servidor que uses, o JavaScript… o como tú veas.
Eso, como es lógico, depende ya de tu sistema para la plantilla puesto que desde CSS no puedes más que hacer esto, no depende de él que una estructura exista o no y por lo tanto si se incluye, aun no viéndose, el peso de la página será el mismo.

Layout.css
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

/* Chagelog:
 * 12/01/09:    beta1   - Cambio de medidas en espaciados / Resizes padding: Ems to %
 * 11/01/09:    1.0     - Inicial / Initial
 * ---------------------------------------------------------------------------- */
 
/* ------------------------------------------------------------------------ *
 * Estructuras y Estilos Basicos (Layout) - Elástico: Total 98%
 * ------------------------------------------------------------------------ */
#wrapper {
    width:98%;
    min-width:96em;
    max-width:126em;
    margin:0 auto 1em auto;
    /* Forzando el margen inferior con un borde de color de fondo. */
    border-bottom:1px solid white;
    padding:0;
    text-align:center; /* Fix IE */
}
 
/* Contenido:
 * ------------------------------------- */
/* Genericos */
#mainNav, #content, #footer {text-align:left !important;}
 
/* ----------------------------------------------------------------- *
 * Tipos de estructura: (3 -por defecto-, 2 o 1 columna).
 * 2 Columnas reales: #mainNav + #content
 * ----------------------------------------------------------------- */
 
/**
 * Por defecto:
 * 3 Columnas ( Predeterminado 16/(78/22)82 )
 * 16 + 82          = 98
 *      78 + 22     = 100
 *
 * 0 + 15 + 1 | 82 |
 * 1 + 75 + 2 | 0 + 21 + 1 |
 *
 * - Por si #content tiene fondo independiente, se le aporta 
 * - a #mainContent siempre un 2% de relleno izquierdo.
 *
 * - Igualmente, #secondaryContent necesita 1% de relleno a la derecha, 
 * - para diferenciarlo del fondo.
 * ------------------------------------------------------- */
/* Sidebar */
#mainNav                        {width:15%; float:left; padding:1em 1% 1em 0;}
 
/* Contenedor de mainContent y secondaryContent */
#content                        {width:82%; float:right;}
    #mainContent                    {width:75%; float:left; padding:0 1% 0 2%;}
    #secondaryContent               {width:21%; float:right; padding:0 1% 0 0;}
 
/**
 * twoCol:
 * 2 Columnas SIN Sidebar ( P.Ej: Wordpress Home 0/(58/42)98 )
 *  0 + 98          = 98
 *      58 + 42     = 100
 *
 * 58 | 2(auto) + 40 |
 *
 * - #secondaryContent:
 * - Al flotar a la derecha, el 2 % restante forma un 
 * - espaciado automático entre #mainContent a la derecha.
 * ------------------------------------------------------- */
/* Sidebar */
body#twoCol #mainNav            {display:none; width:0;}
 
/* Contenedor de mainContent y secondaryContent */
body#twoCol #content            {width:98%; float:right; padding:0 1%;}
    body#twoCol #mainContent        {width:58%; float:left; padding:0;}
    body#twoCol #secondaryContent   {width:40%; float:right; padding:0;}
 
/**
 * twoCol2:
 * 2 Columnas SIN Contenido Secundario ( 18/(0/100)80 )
 * 18 + 80          = 98
 *      100 + 0     = 100 
 *
 * 2 + 97 +1 | 0
 *
 * - twoCol2
 * ------------------------------------------------------- */
/* Sidebar */
body#twoCol2 #mainNav           {width:18%; float:left;}
 
/* Contenedor de mainContent y secondaryContent */
body#twoCol2 #content           {width:80%; float:right; padding:0;}
    body#twoCol2 #mainContent       {width:97%; float:left; padding:0 1% 0 2%;}
    body#twoCol2 #secondaryContent  {display:none; width:0;}
 
/**
 * 1 Columna ( 0 / 100 / 0)
 * ------------------------------------------------------- */
/* Sidebar */
body#oneCol #mainNav            {display:none;}
 
/* Contenedor de mainContent y secondaryContent */
body#oneCol #content            {width:98%; float:right; padding:0 1em;}
    body#oneCol #mainContent        {width:98%; float:left;}
    body#oneCol #secondaryContent   {display:none; width:0;}
 
/* Pie (footer):
 * ------------------------------------- */
#footer {
    clear:both;
    margin:1em auto;
    padding:0.5em 1em;
}

Rejilla flexible

Ahora el estilo que usaba antes como apoyo, extra.css, que ha pasado a ser unos 4/5 archivos: grid.css y typography.css en el principal, links.css y niceImages.css como plugins y extraStyles.css con lo que queda del archivo.
Como digo, lo más importante, o lo que más comodidad me aporta es typography y grid.css.

Grid.css me gusta en especial por lo que ya comenté sobre el tema de poder elegir entre diseños fijos, híbridos o elásticos, además de otros estilos genéricos de carácter estructural: alineaciones, flotantes, etc.

Grid.css

Tan sencillo como esto:

40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/* Formatos HTML
 * --------------------------------------------------------- */
/* ### Estructurales */
/* Cajas estructurales genericas (%) */
div.box1_4, .box1_4 {width:23%; margin:0 0.2em;}
div.box1_3, .box1_3 {width:31%; margin:0 0.2em;}
div.box1_2, .box1_2 {width:46%; margin:0 0.2em;}
 
/* Cajas estructurales genericas (em) */
div.box1_4em, .box1_4em {width:23em; margin:0 0.19em;}
div.box1_3em, .box1_3em {width:31em; margin:0 0.19em;}
div.box1_2em, .box1_2em {width:46em; margin:0 0.19em;}
 
/* Cajas estructurales genericas (px) */
div.box1_4px, .box1_4px {width:230px; margin:0 5px;}
div.box1_3px, .box1_3px {width:310px; margin:0 5px;}
div.box1_2px, .box1_2px {width:460px; margin:0 5px;}
 
/* ## En linea */
.block {display:block;}
.inline {display:inline;}
.clear {clear:both;}
.clearLeft {clear:left;}
.clearRight {clear:right;}
/* El conocido clearfix */
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
} 
/* Hides from IE-mac \*/ 
* html .clearfix {height: 1%;} 
/* End hide from IE-mac */
 
/* # Alineaciones */
.center {text-align:center !important;}
.right, .alignright {float:right;}
.left, .alignleft {float:left;}
.aligncenter, div.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
 
/* # Visuales */
.blind {display:none;}
.noborder {border:none !important;}

Tipografías, colores…

Por último, no menos importante y otra hoja que también me gusta y ayuda mucho: Typography.css.

Typography.css
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

/* Listas:
 * El atributo type esta descatalogado por el W3C, así que debemos usar el 
 * CSS para aplicar tipo de listas:
 */
/* Alfabeticas */
.alphaLow li, .alphalowList li {list-style-type:lower-alpha;}
.alphaUpper li, .alphaupperList li {list-style-type:upper-alpha;}
.numList li {list-style-type:decimal;}
.numDecList li {list-style-type:decimal-leading-zero;}
.squareList li, .squareList dt {list-style-type:square;}
.nolist {list-style:none !important;}
.normalist li {
	list-style-image:none !important;
	list-style-type:square !important;
	margin-left:20px;
}
/* Fuentes
 * ------------------------------------------ */
/* # Relativas */
.small {font-size:small;}
.x-small {font-size:x-small;}
.xx-small {font-size:xx-small;}
 
/* Percentuales y relativas */
.fontbig {font-size:1.5em;}
.fontless_medium {font-size:0.5em;}
.fontless_hidden {font-size:-0.0em;}
.fontless2 {font-size:0.8em;}
.fontless3 {font-size:0.6em;}
.fontless4 {font-size:0.4em;}
 
/* Familias */
.serif {font-family:Georgia,'Bitstream Vera Serif','Times New Roman',Times,serif;}
.sans {font-family:'Lucida Grande', 'Lucida Sans', Lucida, 'Trebuchet MS', 'Bitstream Vera Sans', Verdana, Geneva, Arial, Helvetica, sans-serif;}
.sans_small {font-family:'Trebuchet MS',Trebuchet,Helvetica,sans-serif;}
 
/* # Colores */
.black {color:#111 !important;}
.white {color:#F7F7F7 !important;}
.blue {color:#69F !important;}
.red {color:#F30 !important;}
.yellow {color:#FFD700 !important;}
.green {color:#008000 !important;}
.grey {color:#CCC !important;}
.orange {color:#FF8040 !important;}
.gold {color:#D4A017 !important;}
.dark_red {color:#85232C !important;}
.blue_marine {color:#151B54 !important;}
.black_blue {color:#223A46 !important;}
.steel_blue {color:#2B547E !important;}
.medium_green {color:#348017 !important;}
.pink, tr .pink {color:#FF0080 !important;}
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }
 
/* # Estilos */
.bold {font-weight:bold !important;}
.regular {font-weight:normal !important;font-style:normal !important;}
.italic {font-style:italic !important;}
.oblique {font-style:oblique !important;}
.big, p.big, p.big a {
	font-family:Georgia, 'Monotype Corsiva', 'Bookman Old Style', Verdana, Helvetica, sans-serif;
	font-size:1.8em;
	line-height:1.5em;
	font-weight:normal !important;
}
.ak {
	font:bold x-small Trebuchet, 'Trebuchet MS', Verdana, Arial, sans-serif;
	color:#333;
	border:1px solid #69c;
	background:#fafafa;
 
	padding:2px;
}
 
/* # Otros */
.sub {border:0;}
.sup {
	font-size:0.7em;
	border:0;
	vertical-align:super;
	padding:0 0.25em;
}
.sup a {text-decoration:none;}
.button {
	padding:0.3em 0.5em;
	border:1px solid #e7e7e7;
	/* Pasar a noStandar.css
	-moz-border-radius:3px;
	-khtml-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;*/
	cursor:pointer;
	text-decoration:none;
	color:blue;
	background-color:#CEE1EF;
}
.button:hover {color:teal; border-color:teal;}
 
/* Form, interacción mensajes. Thanks to Blueprint CSS Framework */
.error,
.notice, 
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

Tests

Otras buenas prácticas son, por ejemplo, establecer una hoja alternativa a usar por los navegadores que lo permiten, es decir, casi todos menos IE ¬¬, en donde incluyas bordes coloreados para comprobar solapamientos, márgenes, rellenos, identificación de elementos… Ojo, hay que tener cuidado con el añadido de píxeles en los bordes pues pueden confundir sobre el diseño final, en un diseño demasiado ajustado, ese, por ejemplo, píxel demás puede producir solapamientos, desbordes, bloqueos, etc.

TemplateBase - Test Style

TemplateBase - Test Style

TemplateBase - Basic Style

TemplateBase - Basic Style

BasicTest.css
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359

/* ------------------------------------------------------------------------ *
 * Tests
 * ------------------------------------------------------------------------ */
 
/* Layout border color: */
/* Grid */
#wrapper 					{border:1px solid black;}
	#wrapper:before 			{content:"#wrapper";}
#header 					{border:1px solid orange;}
	#header:before 				{content:"#header";}
#mainNav 					{border:1px solid green;}
	#mainNav:before 			{content:"#mainNav";}
#content 					{border:1px solid blue;}
	#content:before 			{content:"#content"}
#premainContent 			{border:1px solid blue;}
	#premainContent:before 		{content:"#premainContent"}
#mainContent 				{border:1px solid red;}
	#mainContent:before 		{content:"#mainContent";}
#secondaryContent 			{border:1px solid red;}
	#secondaryContent:before 	{content:"#secondaryContent";}
#footer 					{border:1px solid orange;} 
	#footer:before 				{content:"#footer";}
 
/* Elementos en bloque */
h1:before 	{content:"- (e)h1 - "}
h2:before 	{content:"- (e)h2 - "}
h3:before 	{content:"- (e)h3 - "}
h4:before 	{content:"- (e)h4 - "}
h5:before 	{content:"- (e)h5 - "}
h6:before 	{content:"- (e)h6 - "}
 
p:before 	{content:"- (e)p - "}
ul:before 	{content:"- (e)ul - "}
ol:before 	{content:"- (e)ol - "}
dl:before 	{content:"- (e)dl - "}
 
/* Divs */
div 	{border:1px solid red;}
	div>p:before 	{content:"- (e)div - (e)p "}

Conclusión

Esto es, a grosso modo ¿eh?, la base que suelo usar.
Aunque por ahora, al igual que el resto de estilos, hay algunas cosas mezcladas o que, si bien a veces cuesta decidir como categorizar ciertas reglas, no están dónde en teoría deberían. Pero lo cierto es que a veces ayudan más dónde están.

En cualquier caso… es lo que a uno le funciona, lo prueba en varios navegadores y no está demasiado mal ¬¬ , porque es imposible que un diseño se vea exactamente igual en todos los navegadores. Además te sientes cómodo a la hora de realizar cambios, de establecer estructuras completamente nuevas (los #id del body son el potencial realmente)…
Luego, simplemente añades un pequeño estilo personalizado (custom.css) y algunas correcciones para navegadores en hojas separadas (para irlas desactivando con el tiempo) y listo.

Si bien, el diseño más complejo y grande que he hecho ha sido la web del Ayto. de La Guardia… sé que puedo, al menos, afrontar cualquier otro porque realizo cambios fácilmente basándome en esta base.
Ah… y lo mejor: me gusta trabajar sobre Estándar Estricto (XHTML 1.0 Strict) jiji :mrgreen:
…y no sirvo xml por el de siempre: Internet Explorer.

Intentaré poner una demo para comprobar en navegadores varios.

Otros recursos

W3C – Sample CSS HTML 4.0
Además, es interesante al menos mencionar el estilo base (HTML 4.0) que propone el W3C para navegadores obsoletos, si bien decidimos omitir por ejemplo el uso simple de una plantilla de impresión, un reset… o la misma plantilla de selectores base.
Blueprint CSS
Y, como no, pese a que pueda o no ser útil para alguien, «Blueprint CSS» siempre te puede proporcionar, a parte de ideas, los recursos que creas oportunos para ti.

Y bien… ¿como lo haces tú? :D

Acerca del autor

Avatar del autor J.A.Cobo, «Geek» apasionado por la tecnología, la historia y la aviación con especial interés en el Desarrollo Web basado en estándares, la aplicación semántica de la web y la accesibilidad en la misma. Hubo un tiempo en el que también escribía relatos, principal inspiración para iniciar un «blog».

2 comentarios para « Tu framework CSS»

  1. Santiago dice:
    Lunes, 1 de Marzo de 2010 en 12:37 CET +0100

    Me parece muy interesante todo el código que pones a disposición nuestra. Desde el año pasado que me dedico a hacer webs “profesionalmente”, aunque solo como freelance. Estoy estudiando par esto. Pero la enseñanza que nos proporcionan en cuanto a estilos, css, etc, es minima casi nula. Entonces cuando empezaras a hacer las primeras páginas, ni hablar de sítios enteros y hasta dinámicos, te das cuenta que css no es algo mas que esta por que si, si no que es todo una tecnología super potente.

    En cuanto a los frameworks, me puse a leer sobre blueprint, me gustaron las primeras impresiones y como siempre, te encontras con opiniones como la tuya que no son las mejores. Ya me paso con CodeIgniter en php. La solución es bajartelo, probarlo y si te sirve en tu caso, bienvenido sea.

    Para investigar, otro framework (o libreria) css que use alguna vez es 960grid. A diferencia de Blueprint, se enfoca en el layout, en la estructura. Se basa en la idea de la flexibilidad de diseños de 960pixeles de ancho. La verdad que esta bueno, aunque hay que trabajar bastante el tema de tipografias y otras cosas.

    Un saludo y felicitaciones por tu gran aporte, seguro lo voy a seguir y adaptar a mi trabajo!

    Responder
  2. J.A.Cobo dice:
    Lunes, 8 de Marzo de 2010 en 3:47 CET +0100

    Hola Santiago, gracias a ti por expresar tu opinión del tema ;)

    He hablado otras veces sobre los frameworks CSS ya que, bueno, mi perspectiva, y de hecho el código que uso, es algo distinta desde que escribí esta entrada. Aunque creo más importante mencionar que mi opinión es totalmente al contrario respecto a frameworks de otros lenguajes -por ejemplo, soy casi fanático de Zend Framework- y lo resumiré en lo siguiente:

    En lenguajes de programación, trabajando en base a estándares y con frameworks establecidos, me atrevería a decir que la productividad aumenta casi un 100%. El problema es que para CSS no es este el caso porque CSS no está pensado para generalizar un resultado sino al contrario. Por ejemplo:
    No hay o no debería haber una forma única de estilizar una imagen o un párrafo, ni tampoco en la forma de hacerlo. En cambio, sí que la debe haber, o debería haber, para renderizar una página, llamar a un método remoto de una API, intercambiar datos de cierto tipo…
    Es decir: un framework es un marco de trabajo para una tecnología y ya está. Su utilidad depende de esa tecnología y no se puede pensar que si se tienen reservas sobre un framework de una tecnología en concreto también se tienen de todos los frameworks… no es lógico ;)

    Por eso, cuando he hablado de usar algo genérico en CSS al final se reduce a reglas y elementos realmente muy genéricos, y más en concreto y útil, a una forma de trabajar, de codificar, de organizar hojas… Pongamos por ejemplo:
    ¿Cuántos tipos de diseños estructurales puedes querer tener?
    3,2,1 columna, más cabecera, pie… flexible y líquido o fijo. Bien, más o menos unos 6 diseños que se pueden generalizar. Pues aún así, cuando hablamos de CSS, estamos siendo estrictos siempre ya que el límite es la imaginación: dos cabeceras, tres, ningún pie, dos, dimensiones de los elementos estructurales…
    Con el tiempo, cuando hablo de frameworks CSS a la cabeza me vienen muy pocas reglas, siempre semánticas eso sí, para estandarizar, y muy pequeñas como por ejemplo .error, .warning, .important etc, para si acaso un párrafo o una frase.
    Solo he dicho que, al menos a mí, me viene bien tener ya montado un sistema base para luego ir ajustándolo y adaptándolo, además de una estructura y organización más o menos estándar en las hojas. ESTO sí creo que se puede estandarizar.

    Framework CSS:
    Desde que las resoluciones de pantalla son tan amplias y variadas como lo son hoy en día la cuestión es que nunca uso diseños fijos. Es más, tal es la situación que hace tiempo que existe una versión no oficial de plantilla Blueprint para diseños líquidos.
    Esto en relación al otro framework que me comentas: 960 no sé qué. Y es que, sinceramente, su mismo nombre expresa el anacronismo de su técnica y, ojo, no es comentario despectivo sino realista: es la situación actual en un mundo de 1260 casi mínimo en escritorio, pasando a los handheld englobando aquí PDA’s, móviles, etc, en el extremo opuesto en cuanto a resoluciones.

    Por otra parte… imagino que cuando sigas diseñando tus sitios irás descubriendo la necesidad de usar uno propio pero de forma muy genérica. Mi progresión en todo caso ha sido un paso de: reglas semánticas; perder el foco usando reglas genéricas por todos lados -esto son los frameworks CSS-; para volver a las reglas semánticas que, en mi opinión, es lo que debe ser el marcado estructural a parte de estructural, claro.

    Frameworks en otros lenguajes (PHP):
    Pero me gustaría hacer hincapié en la cuestión de los frameworks y la forma de entenderlos. Esto es:
    Aunque por concepto puedan serlo, un framework CSS tiene más bien poco que ver con un framework… casi de cualquier otro tipo.
    Es decir, un framework CSS, tal y como está el patio tiene más bien poco sentido porque, precisamente, CSS personaliza, estiliza, hasta los límites que un diseñador tenga o se autoimponga. Es decir: se generaliza, se estandariza una técnica que precisamente está destinada a todo lo contrario: la riqueza de estilo.

    O sea: es de esperar un que diseño CSS esté personalizado incluso caprichosamente, y eso es lo que espera un diseñador que trabaje en grupo por ejemplo. Ojo, no hablo de la forma de escribir una sintaxis o de estructurar hojas de estilo, etc.

    No ocurre lo mismo con un lenguaje de programación en donde los estándares facilitan el trabajo en grupo, la mantenibilidad y la organización. De hecho, es una de las ventajas que muchos mencionan de Java sobre PHP. En Java encuentras servelets, portlets… que poco a poco van llegando también ahora a PHP.

    Responder
Reacciones (track/pingbacks)

Dejar un comentario.no seas tímido

Campos personales


¿Qué opinas?

Licencia y acuerdo

Logo Creative Commons Los datos introducidos en este formulario se tratarán, en matería de seguridad, de acuerdo a la normativa española sobre protección de datos ( LOPD ) pese a no estar sujetos a ella. Los contenidos pasarán a ser liberados para Cultura Digital.org bajo las licencias Creative Commons BY-SA y GFDL1.3 como una obra derivada de la que el autor mantendrá el copyright.
Asegúrate de entender estos términos antes de enviar tu comentario.

Artículo 2: Ámbito de aplicación.
[...]
Punto 2. El régimen de protección de los datos de carácter personal que se establece en la presente Ley Orgánica no será de aplicación:
a) A los ficheros mantenidos por personas físicas en el ejercicio de actividades exclusivamente personales o domésticas.
[...]

El autor del blog, Juan Antonio Cobo, se reserva el derecho a decidir sobre la publicación de los comentarios de acuerdo a la lógica común, las buenas maneras y la relevancia de los mismos con la entrada.

Twitter

JuanAntonioCobo

  • - 1

    • Error de contenido secundario.