Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Roboto en 6 Febrero 2013, 13:44 pm



Título: esto existe para el css ?
Publicado por: Roboto en 6 Febrero 2013, 13:44 pm
Veran,en mi empresa somos 5 programadores de css y el 50% programamos css en vertical,tal y como lo muestra el firebug.

ejemplo:

#menuDesplegar {
    background-image: url("../images/resources/desplegar.jpg");
    cursor: pointer;
    float: left;
    height: 18px;
    margin-left: 10px;
    margin-top: 27px;
    width: 19px;
}

el otro 50% lo hace en linea
ejemplo:

#menuDesplegar {background-image: url("../images/resources/desplegar.jpg");cursor: pointer;float: left;height: 18px;margin-left: 10px;margin-top: 27px;width: 19px;}



mi duda es: existe algun programa k te cambie el css de modo vertical a horizontal y viceversa? ¿?¿?¿?

se k es una chorrada,pero si no existe,iwal estaria bien crearse 1


Título: Re: esto existe para el css ?
Publicado por: engel lex en 6 Febrero 2013, 15:13 pm
XD son 5 programadores divididos en 50-50... entonces me imagino que uno por raticos programa en vertical y por raticos en horizontal XD

ya fuera de juego...
podrias copiar de las propiedades del navegador... por lo menos chrome al presionar f12 abre la pantalla de edicion, en pestaña de elements, al lado derecho tienes las propiedades organizadas por reglas css que coincidan y por los elementos de estilo, es solo copiar y listo...

por otro lado dudo que tarden mas de 30 min haciendo un script digamos que en php, que chequee un documento en especifico revisando si está en horizontal y lo pase a vertical...


Título: Re: esto existe para el css ?
Publicado por: Roboto en 6 Febrero 2013, 15:47 pm
uno es el diseñador y nos echa un cable de vez en cuando...
somos 4 desarrolladores de css,2 programamos en vertical y 2 en horizontal.

no lo decia por nada,solo por curiosidad.
esk yo al programar en vertical,me cuesta mas leerlo en horizontal.
te hablos desde un archivos .css no desde el editor de chrome o firebug.


Título: Re: esto existe para el css ?
Publicado por: #!drvy en 6 Febrero 2013, 16:33 pm
http://www.codebeautifier.com/

El tipo de compresión seria: Estandart (para como tu codeas) y High (para como lo hacen ellos.).

Yo lo que hago para no recurrir a herramientas de terceros (distraerme del editor) es usar el Replace de Sublime Text que admite expresiones regulares... me facilita bastante la tarea =)

PD: Ten en cuenta que como lo hacemos nosotros (y tus compañeros) es mejor para reducir el tamaño del CSS (cosa que cuenta cuando intentas conseguir velocidad máxima de respuesta entre servidor y usuario).

Saludos


Título: Re: esto existe para el css ?
Publicado por: engel lex en 6 Febrero 2013, 17:59 pm
http://www.codebeautifier.com/

El tipo de compresión seria: Estandart (para como tu codeas) y High (para como lo hacen ellos.).

Yo lo que hago para no recurrir a herramientas de terceros (distraerme del editor) es usar el Replace de Sublime Text que admite expresiones regulares... me facilita bastante la tarea =)

PD: Ten en cuenta que como lo hacemos nosotros (y tus compañeros) es mejor para reducir el tamaño del CSS (cosa que cuenta cuando intentas conseguir velocidad máxima de respuesta entre servidor y usuario).

Saludos

realmente en css al hacerlo en horizontal la disminución es de un porcentaje MUY bajo, más cuando lo comparas contra el resto de la carga de la pagina, que incluso en una pagina muy simple como este foro, la reducción del css no llega al 0,5% y mas que todo hace es dificultar la legibilidad del codigo


Título: Re: esto existe para el css ?
Publicado por: EFEX en 6 Febrero 2013, 18:41 pm
Ja nunca le presté atención, pero siempre que empiezo con el diseño en css, no presto atención a que si hacerlo de forma horizontal o vertical, es según como empieze, en una tarde te armo un css bastante largo pero no me resulta dificil de leer, me pierdo mas con php  :)

Cuando termino el css, siempre lo divido en partes correspondientes donde corresponde y despues uso lo de la compresión como dice drvy | BSM.


Título: Re: esto existe para el css ?
Publicado por: alister en 6 Febrero 2013, 18:51 pm

estoy de acuerdo en que comprimir el css en los saltos de linea aporta poquito.
yo prefiero tirar mas de softwares complejos que detectan posibles redundancias e inoehrencias, contracciones que se podrian haber usado y no se usaron, etc.
se puede ganar un 20%

hay herramientas online muy buenas para eso


Título: Re: esto existe para el css ?
Publicado por: #!drvy en 6 Febrero 2013, 19:32 pm
Perdonad que os diga pero os equivocáis...

No se si habréis trabajado con CSS's largos y pesados (mas de 30kb's) pero optimizar uno así se agradece.

Un ejemplo muy claro lo tenéis aquí:
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css

Este .css llega a 1180 lineas +/-. Pesa 32kb. Optimizado (solo quitando comentarios/lineas blancas y haciendo lo horizontal) pasa a pesar 25kb.... se ha reducido un 21%...

Esos kb's crean o no, IMPORTAN y mucho. Incluye unos cuantos .css de estos no optimizados y añade una conexión de 1 mega (128 kilobytes / segundo) por parte del usuario... disfruta de lo lento que carga tu sitio.

Saludos


Título: Re: esto existe para el css ?
Publicado por: alister en 6 Febrero 2013, 20:18 pm
Perdonad que os diga pero os equivocáis...

No se si habréis trabajado con CSS's largos y pesados (mas de 30kb's) pero optimizar uno así se agradece.

Un ejemplo muy claro lo tenéis aquí:
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css

Este .css llega a 1180 lineas +/-. Pesa 32kb. Optimizado (solo quitando comentarios/lineas blancas y haciendo lo horizontal) pasa a pesar 25kb.... se ha reducido un 21%...

Esos kb's crean o no, IMPORTAN y mucho. Incluye unos cuantos .css de estos no optimizados y añade una conexión de 1 mega (128 kilobytes / segundo) por parte del usuario... disfruta de lo lento que carga tu sitio.

Saludos

imagino que los comentarios si que influyen mucho, dependerá de tu estilo de coding, pero en cuanto a los saltos de linea debe ser algo no tan influyente, ¿no?

de todos modos tengo que decir que si tienes que depurarlos y tal, como luego el firebug y el webdeveloper te los presentan en pantalla de una forma bastante amigable, siempre puedes ir a modificar tu copia original interna del css, volverla a optimizar, y volverla a subir. no es tan cansado.


Título: Re: esto existe para el css ?
Publicado por: spiritdead en 6 Febrero 2013, 20:34 pm
entra al skype negro >.<


Título: Re: esto existe para el css ?
Publicado por: engel lex en 7 Febrero 2013, 06:24 am
Perdonad que os diga pero os equivocáis...

No se si habréis trabajado con CSS's largos y pesados (mas de 30kb's) pero optimizar uno así se agradece.

Un ejemplo muy claro lo tenéis aquí:
http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css

Este .css llega a 1180 lineas +/-. Pesa 32kb. Optimizado (solo quitando comentarios/lineas blancas y haciendo lo horizontal) pasa a pesar 25kb.... se ha reducido un 21%...

Esos kb's crean o no, IMPORTAN y mucho. Incluye unos cuantos .css de estos no optimizados y añade una conexión de 1 mega (128 kilobytes / segundo) por parte del usuario... disfruta de lo lento que carga tu sitio.

Saludos

bueno si... mi estadística era muy alta y basada en css cortos... pero la tuya es incorrecta... estás asumiendo los comentarios de ese css como "saltos de linea y espacios"

el archivo pesa unos 32kB... sin los comentarios lo dejas a unos 26kB de ahí a los 25kB del archivos totalmente optimizado solo hay un 3% de diferencia... así que aunque fui muy optimista mi diferencia no es tan drástica... incluso en una conexión a 128kBps es de solo 1/128 segundos de diferencia (digamos que 1/64 segundos tomando el paquete tcp de respuesta)

incluso probando el css de este sitio la diferencia es de mas o menos 3% (casi 100bytes y en porcentaje lo mismo que el anterior)

en resumen... es perder legibilidad del código por un 3% de eficiencia... cosa que no me parece útil...

por otro lado es un error usar un solo css de 32kb... seria casi una locura hacer un solo css tan largo... y si me dices que TODO se aplica en TODAS las paginas, seguro la conexión no es tu peor factor en contra... el rendimiento de la pagina sobre el pc seguro lo es... simplemente creas un css dinámico... u optimizas las reglas... pero meter un css de 32kb es un gran error según me parece

no se que piensen los demás al respecto de mi análisis -.- pero me parece que un 3% extra no es grave, ni si quiera notorio si ese 3% representa 1kb incluso en un archivo tan largo como el de jquery-ui...


Título: Re: esto existe para el css ?
Publicado por: JonaLamper en 7 Febrero 2013, 09:17 am
Yo creo que todo depende de para lo que lo vayas a utilizar. Si tu haces un código que tienen que usar tus compañeros, creo que es mejor que se entienda a que vaya un 20% más rápido. Sin embargo, si ese código lo vas a usar directamente, entonces opta por hacerlo más optimo.

En cuanto a lo de pasarlo a vertical, se me ocurren poquitas soluciones. Sé que hay un programa en GNU llamado Gawk que le puedes decir: Cuando te encuentres un ";" hazme un salto de línea (que más o menos es lo que quieres conseguir).


Título: Re: esto existe para el css ?
Publicado por: alister en 7 Febrero 2013, 13:38 pm
Yo creo que todo depende de para lo que lo vayas a utilizar. Si tu haces un código que tienen que usar tus compañeros, creo que es mejor que se entienda a que vaya un 20% más rápido. Sin embargo, si ese código lo vas a usar directamente, entonces opta por hacerlo más optimo.

En cuanto a lo de pasarlo a vertical, se me ocurren poquitas soluciones. Sé que hay un programa en GNU llamado Gawk que le puedes decir: Cuando te encuentres un ";" hazme un salto de línea (que más o menos es lo que quieres conseguir).

en gnu tenemos mil soluciones para eso, awk, gawk, sed, etc. por herramientas, incluso online, no hay problema.

es mas bien una cuestion de decidir qué estrategia tiene mas importancia, como tu comentas.

realmente en joomla no comprimo los css porque son complejillos , y cuand ouso el bootstrap de twitter para hacer una web mas simple, ya me viene gran parte de problema resuelto, asi que no toco mucho este area.