Ayuda con CSS y web creada con Photoshop

hola

tengo un pequeño contratiempo en el diseño del sitio web de la empresa que he montado con unos amigos

he diseñado la pagina en photoshop, y me ha quedado bien (desde mi punto de vista), pero la carga en el explorer se hace lenta

comentando con el programador, me dijo que debiamos enlazarlo a traves de hojas de estilos css, para asi mejorar la carga

al desconocer este tema, lo deje en su mano.........pero el resultado no es el deseado (comprobarlo con la imagen adjunta)
<a href="http://img137.imageshack.us/my.php?image=diferencias3kc.png" target="_blank"><img src="http://img137.imageshack.us/img137/1937/diferencias3kc.th.png" border="0" alt="Imagen IPB" /></a>
necesito ayuda, pues nos urge el lanzamiento de la web, y no se como puedo arreglarla

saludos y gracias

 

Igualmente una web si bien queda un poco mas liviana con CSS no es como para notar una lentitud como la que comentas, me inclinaria mas por una mala optimizacion de las imagenes, o por un problema del host. En caso de que tenga programacion tambien puede ser un problema de programacion pero el CSS si bien acelera un poco es casi imperceptible comparado con todo lo demas.

Ahi estoy viendo la imagen, imagino que lo de la izquierda es lo que diseñaron y lo de la derecha lo que se implemento y veo que esta ligeramente diferente y eso es facil de solucionar con el CSS se puede hacer que quede igual a la otra.

Reitero si esa pagina carga lenta ahora que la veo 1) problemas de host, 2) problemas de peso de imagen, ya que es bastante sencilla el CSS no cambiaria de forma perceptible

 

no se ve la imagen :S

 

Kitsch jaja se ve que nos apuramos tanto que ninguno de los dos vimos la imagen pero al minuto se veia y edite mi post eso pasa por ser los mas rapidos del oeste pa contestar jaja

 

la optimización de las imagenes la realize directamente con photoshop

o sea, cree el psd, cree los sectores y "guardar para web"

el peso de ese apartado específico que os he mostrado en la captura es de 65,9 KB, el cual yo pienso que no es excesivo

estas en lo cierto, elquique, la imagen de la izquierda es lo que yo he diseñado y la de la derecha lo que el programador ha creado a partir de CSS

sin ser un experto, la diferencia es bastante clara y negativa

por donde podía solucionar el problema??

gracias por vuestra ayuda

 

Pues aunque la diferencia es clara no es tan grande; lo de las imagenes lo puedes solucionar simplemente exportando en png 24 para las imagenes que requieran calidad alta y gif simple para los separadores y bordes.

Con definiciones mas prescisas sobre las propiedades de cada layer; seguramente ganarias mucho mayores resultados en cuanto a la descarga de tu sitio y en una calidad muy similar a de imagenes bit.

 

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->Con definiciones mas prescisas sobre las propiedades de cada layer<!--QuoteEnd--></div><!--QuoteEEnd-->

no entiendo que quieres decir

 

La verdad no puedo opinar porque la imagen no se ve.

Ahora en cuando a peso debes de jugar con gif o jpg, ya que el png da un peso alto, a los anteriores. (perdona kistch ya son dos que te contradigo jejeje)

Ahora recuerda que el peso dependiendo de la imagen le puedes llegar hasta 20, 32 en el Ps

Despues no todo lo que se hace en Ps se debe de poner, porque si hay partes blancas cuadradas, rectangulares o de otro, que no tenga variacion, se coloca en la web se sustituye sea en css o html por color plano, si es blanco no es necesario, y al ir quitando imagenes, y subplantandolas por color se gana menos peso en la web.

Tambien recuerda que la web cargado de scripts, sean estos en java o cgi, son duros de cargar en ocasiones.

Abrazos

 

A mi me pasa que el PNG trasparente se ve muy mal en IE y en FireFox perfecto hasta me cambia los colores por eso uso GIF aunque no es la misma calidad. Ahora si hablamos de Flash lo mejor es PNG igualmente en este caso en especial sigo sin entender porque quedaba tan lento el despliegue de la web.

Y en el caso puntual del porque no luce identico le pregunto a neotrix, porque a esto lo hizo el "Programador" ?? si es solo un tema de HTML, con todo gusto podemos darte una mano en HTML y CSS si expones especificamente que cosas te gustaria corregir y nos muestras una version del html publicado y no la captura de la imagen, saludos

 

muchisimas gracias por vuestra ayuda

yo soy la persona responsable del diseño gráfico dentro de nuestra pequeña empresa y otra persona externa a nosotros se encarga de la programación, ya que requiere pasarela de pago, control de usuarios y vincular una base de datos con un programa de control remoto bajo demanda

al no tener conocimientos en este tipo de programación nos hemos visto en la obligación de buscar quien nos lo hiciera

mi misión unicamente es diseñar con photoshop, exportar como html e incluirlo en la web...en total son 7 bloques centrales incluyendo el index o principal, ya que del resto se encarga el programador

atendiendo a su demanda, pues consideraba que la web tardaba en cargar, me comento el tema de las hojas de estilos.......yo le hice ver que, aunque conozco lo que son y su función, no he programado ninguna desde cero, como requiere este proyecto

tras observar que el aspecto que generaban los css no es mi diseño, es cuando me surge este problema

la web esta en construcción, pero algunos apartados como: Asistencia, Diseño, Nosotros y Hosting, guardan el diseño original, y que parecen ser de carga muy lenta, estos bloques o subpaginas no estan vinculados a hojas CSS

si se pudiera en base a esas subpaginas, crear las hojas de estilo y que guardaran la relación de aspecto tal cual las podeis ver, seria lo ideal (si es que realmente va a mejorar la carga de la web)

siento extenderme en la parrafada, pero creo haberme explicado de forma correcta o como me solicitais

la web en construcción la podeis ver en <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->http://www.ayudadirecta.es/Beta<!--c2--></div><!--ec2-->

reitero las gracias por vuestra ayuda

 

Ok, veo el tipico problema que surge al tratar de tener la transicion de montaje a travez de WYSIWYG (What you see is what you get, o sea, montaje grafico que genera html's estructurados por tablas - sobre todo si es desde Image Ready) a montaje limpio y eficiente usando CSS para estructurar el despliegue y acomodo de informacion visual.

Aclaro de una vez, CSS no es un script, y no hace "pesado" un web. Todo lo contrario. Hace todo mucho mas eficiente,ayuda el asunto de recopilacion de contenido textual para los buscadores lo cual brinda optimizacion de lo mismo al final. Actualizacion grafica se vuelve mucho mas facil tambien.
CSS es solo una forma de decirle a los browsers como interpretar elementos que componen ya un html, es pura visualizacion nadamas.

El problema surge cuando al no conocer el uso de esta tecnologia el que mete las manotas en el acomodo final es un programador... y todo se fue a la KK. Pues su gusto estetico y amor al detalle final visual es normalmente nulo. Y nosotros como los que originalmente hicimos el diseño y pusimos nuestro amor y sudor en el asunto sufrimos al ver lo que hacen con esos pequeños detalles y como estropean el resultado final. (de plano veo asuntos innecesarios y poco eficientes en el trabajo final, donde hay textos que se manejan como imagenes lo cual NO tiene sentido y es poco eficiente)

Pero eso es evitable, CSS no es programación pesada, de hecho no lo llamaria programación. Lo llamaria uso eficiente y entendido de html, sin dejar que todo se genere automaticamente por programas como Image Ready o peor aun FrontPage u otras novatadas. Generacion automatica SIEMPRE es poco eficiente, esto lo puede respaldar cualquiera que tambien genere automaticamente componentes de flash (el action script se hace estupidamente largo cuando unas cuantas lineas de codigo pueden hacer lo mismo y mejor) o en Director... O usar booleans en Max por ejemplo en vez de simplemente hacer el objeto con box o poly modelling.

CSS nos enseña a ser mas inteligentes y eficientes a la hora de trabajar el web...
Porqué tanto sermon cuando lo que se quiere es una solución?

Senti necesario recalcar esto, para que primero se entienda que montar sitios con CSS es lo que las nuevas generaciones de diseñadores web YA estan aplicando.. y mas bien debemos ponernos al dia. Las tablas van quedando atras, como las carretas tiradas por bueyes vs automobiles modernos.

Neotrix, hace algunos dias pensaba poner un tuto aca de como se monta una pagina con css, talvez para este trabajo específico esa info no te ayude mucho, pero por lo menos para que estes al tanto.

Por ahora puedes ir avanzando terreno visitando paginas como:
www.csszengarden.com/tr/espanol/
www.camaleoncss.com
que son paginas de diseñadores PARA diseñadores, donde puedes hacer tu propio ejercicio de practica y logras entender el porqué de una "piel" css para tu sitio.

Para ir aprendendo algunas paginas adicionales:
<a href="http://www.tizag.com/cssT/" target="_blank">http://www.tizag.com/cssT/</a>
<a href="http://www.tejedoresdelweb.com/307/article-1061.html" target="_blank">http://www.tejedoresdelweb.com/307/article-1061.html</a>

Por ultimo, ejemplos de trabajos de diseño usando css, lo cual demuestra lo lejos que se puede llevar desde el punto de vista grafico/visual, que es lo que nos atañe a los diseñadores:
<a href="http://www.webcreme.com/" target="_blank">http://www.webcreme.com/</a>
<a href="http://www.cssbeauty.com/" target="_blank">http://www.cssbeauty.com/</a>

Suerte con tu trabaja Neotrix, apenas puedo hago el tuto.

 

la verdad es que tu parrafo es bastante instructivo y los links muy interesantes

ahora mismo no puedo emplear tiempo en visitarlos y estudiarlos a coinciencia, pero en cuanto saque un para de horas, lo hare seguro

visto tus conocimientos de CSS y la ayuda ofrecida por todos, sería posible si yo os lanzo los psd, alguno de de los expertos me creara el archivo css??

gracias, me estan sirviendo de mucha ayuda todos

<b>edito:</b> disculpen la petición, pero como indico en el título del post, me resulta urgente...por supuesto que guardaria los títulos de credito al autor en el sitio web, con un enlace en forma de banner si asi lo pidiera, y si es necesario, pues puede ser un trabajo costoso, tanto mis socios como yo no tenemos incoveniente en abonar dicha tarea, ya que el programa de soporte no esta generando un coste que no podemos soportar sin tener la web online

 

Lo que estas pidiendo es la maquetacion de la web en si, ya al pedir que se te incluya texto css, en tu portal, hmmm hay que tener tiempo, esperomos que alguien lo tenga y sea generoso, ya que son cosas que tienen su $$$.

No se malinterprete, pero el tiempo es algo que no tengo ahorita, pero sino con mucho gusto.

Abrazos