Foros del Web » Creando para Internet » CSS »

No entiendo las ventajas de CSS

Estas en el tema de No entiendo las ventajas de CSS en el foro de CSS en Foros del Web. Vamos a ver. Lo primero, lo que decís de que el Flash hace que no se pueda validar una página no es cierto. Mismamente yo ...

  #31 (permalink)  
Antiguo 12/06/2007, 13:33
 
Fecha de Ingreso: octubre-2006
Ubicación: Quart de Poblet, Valencia
Mensajes: 767
Antigüedad: 17 años, 6 meses
Puntos: 8
Re: No entiendo las ventajas de CSS

Vamos a ver.

Lo primero, lo que decís de que el Flash hace que no se pueda validar una página no es cierto.
Mismamente yo en mi web uso una cabecera en flash, usando este código:
Código HTML:
<object type="application/x-shockwave-flash" data="header.swf" width="738" height="129">
<param name="movie" value="header.swf" />
<img src="fondo.jpg" alt="La cabezera flash no se ha cargado." />
</object> 
Incluso ahora que miro el código, se le podría aplicar el CSS para quitar el width y el height que le aplico.
Como puedes ver, se valida perfectamente teniendo el header en flash.

Estoy de acuerdo con lo que dice la mayoría a favor del CSS. Y mírate los 12 beneficios de usar CSS en páginas web (aún pondría yo unos cuantos más).

Saludos y la decisión de cambiar es tuya
  #32 (permalink)  
Antiguo 13/06/2007, 20:05
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años, 2 meses
Puntos: 2114
Re: No entiendo las ventajas de CSS

Cita:
Iniciado por K3NNY Ver Mensaje
¿Con una columna de precios al lado? ¿Y otra más con los precios pero en dólares?
Síiiiiiii! y precisamente
direction: rtl;
(aunque W3C no lo valide!)
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #33 (permalink)  
Antiguo 13/06/2007, 21:47
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: No entiendo las ventajas de CSS

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
Síiiiiiii! y precisamente
direction: rtl;
(aunque W3C no lo valide!)
Hola, podrían explicarme este mensaje de Daniel en relación a la cita de K3NNY?

Gracias y saludos
  #34 (permalink)  
Antiguo 14/06/2007, 06:52
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años, 2 meses
Puntos: 2114
Re: No entiendo las ventajas de CSS

Hola Al Zuwaga:
Perdón, fue un mal chiste (no existe peor chiste que aquél que tiene que ser explicado )
Hace referencia a leer un menú de comidas de derecha a izquierda donde, "según lo que salga es lo que como". Es sólo un juego de palabras que no aporta nada al tópico.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #35 (permalink)  
Antiguo 14/06/2007, 09:13
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 3 meses
Puntos: 9
Re: No entiendo las ventajas de CSS

Hola a todos los participantes del post.
La verdad es que actualmente no lo necesito, pero mil veces me he encontrado, y ya es de las pocas cosas que me hacen mantener los TD en vez de los DIV. Por lo demás, les diré que siempre que se pueda, intento utilizar CSS, menos en el caso que les comentaré.
Cuando uno quiere colocar algo dentro de un DIV, pero ese algo vendrá desde el servidor, y será un texto que no se sabe su longiutud.
Y lo que se deberá conseguir es centrar ese texto verticalmente dentro del DIV. Es que me toca los "$%&()=?" que cada vez que intentas buscar info al respecto, te den ideas del tipo:
- Dale el line-height de lo que mida el texto (QUE NO SE CUANTO MIDE NI CUANTAS LINEAS OCUPA!!)
- Dale un font-size de nosecuantos, para que así no se qué...
Personalmente, a estas cosas no le encuentro otro nombre que CHAPUZA. Y más concretamente, CHAPUZA que no soluciona el problema.
Entonces, siempre acabo montando un TABLE con su TD y el style="vertical-align: middle;"
ESTO SI QUE CHUTA.
Sería un gran qué, que alguien me respondiera esto con una SOLUCION, y no una CHAPUZA.
(sin que nadie se me enfade, por favor)
Un saludo a todos.
__________________
..:: moNTeZIon ::..
  #36 (permalink)  
Antiguo 14/06/2007, 09:27
hq1
 
Fecha de Ingreso: abril-2007
Ubicación: Madrid, España
Mensajes: 107
Antigüedad: 17 años
Puntos: 0
Re: No entiendo las ventajas de CSS

Como veo que el tema tiene audiencia yo voy a dar mi opinión.

Llevo poco tiempo en el mundo web y mi página sólo está hecha con HTML y CSS (poco a poco voy introduciéndome en el océano del PHP, pero esa es otra historia).

El caso es que para hacer una buena página no es imprescindible utilizar nada excepto HTML. Sin embargo, pasa una cosa. Imagina que tu página es sencilla y decides hacerla sólo con HTML. Creas tu web, vas manteniéndola y al cabo de un tiempo 8un par de meses), tienes en total más de 50 archivos HTML entre el "index", las opciones de menú, los diferentes contenidos. Entonces, decides cambiar algo como por ejemplo, el color del fondo. Bueno como no lo hiciste con CSS no te va a quedar más remedio que ir cambiando todas y cada una de las páginas (reza para que no se te olvide ninguna).

Esta es la principal ventaja del CSS, que permite separar el contenido (información) de la presentación (lo bonito que queda al final). Permite ahorrar un montón de código duplicado (o triplicado, o cuadruplicado, o ....) y facilita el mantenimiento. Además, tiene unas características muy interesantes que hacen que puedas montar tu web mucho más bonita que con simple HTML, por ejemplo, que le puedes poner un background a cualquier elemento (por citar una cosita).

En cuanto al problema de moNTeZIon, no lo he entendido del todo, ¿porqué tienes que especificar la altura para centrar un texto? ¿puedes explicarlo mejor, porfa?
__________________
Proyecto de revista digital:

www.elcampamentobase.es
  #37 (permalink)  
Antiguo 14/06/2007, 10:18
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 3 meses
Puntos: 9
Re: No entiendo las ventajas de CSS

Gracias por tu atención hq1.
Te lo resumo.
La cosa sería centrar verticamente dentro de un DIV, un texto de longitud y lineas indeterminadas.
El resultado haciéndolo con tablas sería algo así:
Código:
<table style="width: 300px;"><tr><td style="vertical-align: middle;">
Aqui todo el texto
</td></tr></table>
IMPORTANTE: "Aqui todo el texto" es un texto de tamaño indeterminado.
Puedes conseguir esto sustituyendo el TABLE por un DIV?
A ver a ver...
Un saludo!
__________________
..:: moNTeZIon ::..
  #38 (permalink)  
Antiguo 14/06/2007, 13:01
Avatar de wakala  
Fecha de Ingreso: octubre-2006
Mensajes: 50
Antigüedad: 17 años, 6 meses
Puntos: 3
Re: No entiendo las ventajas de CSS

WOW que tema no pensé que alguien pensara que las CSS no traen ningún beneficio cuando son infinitas y si no lo son ahora lo serán en unos años.
Los que maquetaron el contenido desde hoy en unos años su web no sera obsoleta.

Por ejemplo estoy trabajando en el rediseño y maquetacion de un periodico que esta basado en tablas tienen un acceso para moviles http:/www.sitio.com/pda cuando no deberia de ser asi el sitio deberia de mostrarse de igual manera al accesar por http:/www.sitio.com/ y con un simple media="handheld" lo solucionamos todo también como es un sistema de noticias cada noticia tiene un sistema de "Imprime esta noticia" los enlaces ya saben noticia?id=100 imprimir_noticia.php?id=100 Pobre servidor cuantas peticiones cuando puedo solucionarlo con media="print"

En cuestión de accesibilidad para personas con discapacidades visuales en alzado.org habia una garbacion de como se escucha un sitio maquetado con tablas y otro maquetado con capas la verdad es que la diferencia se nota deinmediato

Ahora aqui en México aun no es muy comun accesar por TV a internet pero en unos años seguro que habra que crear un sitio.com/webtv y un link que diga Accede a Web Tv en la pagina principal cuando podria solucionarse con media="tv"

estaba leyendo como crear un mapa con flash y segui leyendo hasta que termine con ejemplo (que no tengo a la mano el link) de como el mapa estaba diseñado con SVG y los colores del mapa podian modificarse mediante CSS aparte tambien como se pueden mostrar y ocultar capas podias mostrar la capa que contenia el Nombre del estado, Los rios, el relieve Todo con DOM+SVG y CSS.

En diseño por ejemplo, recordaba conmigo mismo como antes para crear un diseño de una capa con esquinas redondeadas tenias que hacer algo como esto
Código HTML:
<table border="0" cellpadding="0" cellspacing="0" width="522">
  <tr>
   <td width="48" background="caja_r1_c2.gif"><img name="caja_r1_c1" src="caja_r1_c1.gif" width="48" height="61" border="0" id="caja_r1_c1" alt="" /></td>
   <td width="420" background="caja_r1_c2.gif">&nbsp;</td>
   <td width="54"><img name="caja_r1_c3" src="caja_r1_c3.gif" width="54" height="61" border="0" id="caja_r1_c3" alt="" /></td>
  </tr>
  <tr>
   <td background="caja_r2_c3.gif">&nbsp;</td>
   <td background="caja_r2_c2.gif">&nbsp;</td>
   <td background="caja_r2_c3.gif">&nbsp;</td>
  </tr>
  <tr>
   <td background="caja_r1_c2.gif"><img name="caja_r3_c1" src="caja_r3_c1.gif" width="48" height="60" border="0" id="caja_r3_c1" alt="" /></td>
   <td background="caja_r3_c2.gif">&nbsp;</td>
   <td><img name="caja_r3_c3" src="caja_r3_c3.gif" width="54" height="60" border="0" id="caja_r3_c3" alt="" /></td>
  </tr>
</table> 
Ahora hacemos esto con Hacks o con Javascript CSS
con un buen de de tags div b o javascript no tantas lineas de codigo pero si menos
ahora con CSS3
Código HTML:
<div>CAPA<div>
div{radius:10px}
o con border-image{url"1.gif"}

en cuestiones de peso por ejemplo yo uso muchas reglas demasidas y hasta exageramente aunque hay tecnicas de abreviaturas

por ejemplo:

trato de eliminar los espacion en blanco, reutilizo las reglas, utilizo colores abreviados #096 en lugar de #009966 para las letras

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

a

font: 1em/1.5em bold italic serif

todos estos trucos me ayudan bastante ademas de crear un arhivo normal y legible y otro comprimido con CSS Compresor

master.css 4.01kb
comp_master.css 2.88kb

lo mismo hago con los Javascripts, se que no es mucho pero creo que ayuda bastante ademas de las imágenes de que intento tratarlas en lo mas pequeño posible

haber si me escribo un articulo de compresión de archivos CSS

eso de utulizar PHP para dar diseño a la plantilla no esta mal pero tambien hay que aprender a ocupar el minimo de recursos del servidor cuando hay tecnologias que lo hacen mejor o no tiene tantas contras.
  #39 (permalink)  
Antiguo 14/06/2007, 14:35
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 23 años, 2 meses
Puntos: 535
Re: No entiendo las ventajas de CSS

Cita:
Iniciado por Daniel Ulczyk Ver Mensaje
Hola Al Zuwaga:
Perdón, fue un mal chiste (no existe peor chiste que aquél que tiene que ser explicado )
Hace referencia a leer un menú de comidas de derecha a izquierda donde, "según lo que salga es lo que como". Es sólo un juego de palabras que no aporta nada al tópico.
Daniel, no fue un mal chiste. En absoluto . Es sólo que soy lento para entenderlos (aunque, apenas terminé de enviar ese mensaje, vislumbré la posibilidad que se tratase de un chiste y con ese significado )

moNTeZIon, en realidad si se puede centrar verticalmente. El problema está en que IE no interpreta el display: table-cell (al menos el 6, no sé el 7). Mirá:


Código:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.centrado_vertical {
	height: 500px;
	width: 500px;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #333333;
	margin-right: auto;
	margin-left: auto;
}
p {
	margin: 0px;
	padding: 0px;
}
-->
</style>
</head>

<body>
<div class="centrado_vertical">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc a lectus. Suspendisse et tortor ut lacus imperdiet interdum. Proin purus neque, vestibulum sit amet, molestie vitae, blandit congue, felis. Mauris sagittis. Nullam dapibus. Curabitur a lorem at urna blandit auctor. Suspendisse a risus nec lorem sagittis pretium. Donec at elit. In risus libero, tincidunt at, lacinia sodales, rutrum at, quam. Aenean et eros. Etiam accumsan, tortor quis facilisis dignissim, felis orci adipiscing lacus, cursus blandit massa turpis a velit. Sed ullamcorper diam at pede. Sed mattis. In tincidunt enim vitae diam.</p>
</div>
</body>
</html>
  #40 (permalink)  
Antiguo 14/06/2007, 14:43
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 19 años, 2 meses
Puntos: 9
Re: No entiendo las ventajas de CSS

Cita:
Iniciado por wakala
En cuestión de accesibilidad para personas con discapacidades visuales en alzado.org habia una garbacion de como se escucha un sitio maquetado con tablas y otro maquetado con capas la verdad es que la diferencia se nota deinmediato
Extraña pagina, tiene definido el lenguaje ingles, uno no se puede creer todo lo que le diga una revista, eso es sectarismo.

Cita:
Los rios, el relieve Todo con DOM+SVG y CSS
Eso es una tecnica de diseño basado en imagenes, creo que tiene futuro.

Saludos

Última edición por programeitor; 14/06/2007 a las 14:54
  #41 (permalink)  
Antiguo 15/06/2007, 02:55
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 19 años, 3 meses
Puntos: 9
Re: No entiendo las ventajas de CSS

Cita:
Iniciado por Al Zuwaga Ver Mensaje
moNTeZIon, en realidad si se puede centrar verticalmente. El problema está en que IE no interpreta el display: table-cell (al menos el 6, no sé el 7). Mirá:
Gracias Al Zuwaga!
Pero me confirmaste... Se que aquí se mezclan varias cosas.
Pero hoy por hoy, algo que no funcione en Explorer, bajo mi punto de vista, debo desecharlo. Ya me gustaría no tenerlo que hacer, pero no nos engañemos.
Otra cosa es que exista una especie de "hack" para explorer, pero en este caso, creo que ni eso.
Básicamente es por lo que recurro a una tabla para realizar un centrado vertical.
P.D: Ya te confirmo que Explorer 7 tampoco se traga eso...
__________________
..:: moNTeZIon ::..
  #42 (permalink)  
Antiguo 15/06/2007, 15:37
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.263
Antigüedad: 19 años, 2 meses
Puntos: 2114
Re: No entiendo las ventajas de CSS

Quiero permitirme, ahora, algunas consideraciones:
La utilización de CSS permite separar el contenido de la presentación, esto último se consigue, en el mejor de los casos, con la carga de sólo un archivo para manejarla.
Desde el punto de vista del tráfico esto redunda en menores costos, menor ancho de banda. Ya que el server sólo se encarga de enviar al usuario los documentos (a su vez, al ser más pequeños, resultan en información más rápida para cargar) y la presentación se maneja con los archivos desde la caché del usuario; a su vez, menor tiempo de espera del mismo ante los siguientes documentos del sitio.
Con respecto a los contenidos, cualquier actualización posterior es mucho más eficiente (tiempo y costos, nuevamente).
Nada más tedioso que re-editar contenidos en medio de <td> e imágenes
transparentes, espaciadores, etc.
En un documento donde la presentación está separada, la accesibilidad a otros dispositivos es más viable.
Por supuesto ¿quién entre nosotros se iba a imaginar años atrás, llevar a cabo un web surfing con un dispositivo móvil? Si los únicos Screen Readers que conocíamos eran los que utilizaba la tripulación del Voyager...
Ni que hablar, además, sobre las barreras de accesibilidad que tienen los sitios que basan su diseño en tablas. Las tablas son precisamente para mostrar datos tabulados. Ello ya también se dijo, sí; y van...
Hay que mostrar datos tabulados? Pues a las tablas entonces. Eso sí. Utilizar un lenguaje de marcado correcto: table summary, caption, thead, tfoot, tbody, tr y td. Y necesariamente en ese orden; porque de otra manera no se está llevando a cabo el buen uso del marcado.
Finalmente con un buen marcado y atento a los estándares, la indexación del contenido por parte de los motores de búsqueda es mucho más sencilla y eficiente. Sea el contenido tablas, body, sangre, huesos y anabólicos; en el orden en que más les guste ahora.

No es la primera vez que FDW recoge entre sus foros, tópicos como el presente (lo cual es bastante saludable). Ahora, como en alguna otra ocasión se publicó, pero sí hago mío el siguiente enlace:
Por qué utilizar tablas para el diseño es estúpido
Reflexión final: varios comentarios en este thread puedo no compartirlos, a mí también me gusta el título de este foro, pero la mejor de todas:

Cita:
(no te dejes liar, que hay mucho fanático w3c por aquí )
Saludos a todos y buen fin de semana!
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:01.