Por donde sigo? + Edicion imagenes

kelevrabonloup · #1 (**permalink**) 04/10/2012, 00:14

Uso webbuilder (es lo unico que me enseñaron a usar) (Edit: El de blueelementals, no el de WYSIWYG)
La programacion HTML 5 la manejo, El CSS3 entiendo los conceptos, hay muchas cosas que no vi, pero no representa problemas en mi actual proyecto.
Sin embargo, tengo unas dudas:

1: Que editor de imagenes me recomendarian? y que tamaño o propiedades de las imagenes para que no relenticen la pagina? o algun hilo sobre esto?

2: Tenia entendido que con algun recurso, podia hacer que unicamente se recargara en una una div, y asi cada vez que tocas algo no se recarga toda la pagina de nuevo. (acelerando entonces la velocidad de navegacion por el sitio)

Si tengo esto:

<body>
<div id="cont">
<div id="top"></div>
<div id="menu"></div>
<div id="call"></div>
<div id="rigthcont"></div>
<div id="upperfoot"></div>
<div id="foot"></div>
<div id="clean"></div>
</div>
</body>

Que uso para que todo lo que toque, solo aparezca en la div id="call"??

angel1993 · #2 (**permalink**) 04/10/2012, 01:22

El tema de las imagenes y la velocidad está sobrevalorado, simplemente con tener cuidado...
por ejemplo, envez de crear una imagen de fondo de 400px la creas de 20px y haces que se repita ¡OJO! si la cras de 1px la imagen se repetirá 1.2000 veces y consume más...
Luego depende de el ancho de banda de tu hosting o servidor, clarito está, si tienes buen ancho de banda no hay que preocuparse mucho por el tamaño de las imagenes (Como webs que veo casi sin imagenes para que carguen rápido), las imagenes molan y usándolas bien hace que la pag quede muy guapa, la gente normal tiene 6Mb de conexión, pueden descargar unas cuantas imagenes por segundo...

Lo de que sólo se recargue un DIV es mediante Ajax, si eres nuevo en esto puedes usar un iframe..

Y para diseñar, yo photoshop 4Ever ;D le doy a "Exportar para web" y la guardo en el formato que mejor equilibrio tenga en calidad/tamaño

#3 (**permalink**) 04/10/2012, 03:32

Hola, para empezar te presento el mejor editor de código que puedas conocer en tu vida!

Sublimetext - http://www.sublimetext.com/
(con el tiempo veras por qué)

El editor de imágenes... muchos usan photoshop (incluyéndome), en lo personal este trabajo se lo dejo a los diseñadores, que ellos optimicen la parte gráfica y demás, yo sólo maqueto y listo; pero cuando me toca hacer todo, fireworks viene bien cuando photoshop ya no puede darte mas en cuanto recursos web.

Con lo del div que carga contenido, esto es muy sencillo y te recomiendo investigar un poco de jQuery (que no precisamente es Ajax). Te dejo un ejemplo rápido.

index.html

Código HTML:

Ver original<body>
    <div id="contenido"></div>
</body>

archivo.html

Código HTML:

Ver original<body>
   <h1>hola!</h1>
   <p>yo no existo, sólo figuro</p>
</body>

script.js

Código Javascript:

Ver original$(function(){
    $('#contenido').load('archivo.html');
});

Eso hace que en tu div#contenido se cargue el contenido de archivo.html (incluyendo archivos anexos a éste).

Por otra parte, todo es cuestión de practica, existen mejores formas que estas para hacer una web profesional ;)

kelevrabonloup · #4 (**permalink**) 04/10/2012, 14:31

Osea que esto:

Código HTML:

Ver original<body id="master">
  <div id=menu>
    <ul>
      <li> <a id="service" href="#"> Servicios </a>
      <li> <a Id="contact" href="#"> Contactos </a>
    </ul>
  </div>
  <div id="center">
  </div>
</body>

Junto con esto:

Código Javascript:

Ver original$(document).ready(function() {
  $("#service").click(function() {
    $("#centro").load("servicios.html")
  });[/INDENT]  $("#contact").click(function() {
    $("#center").load("contactos.html")
  });
});

Me daban lo que yo quería!!

(Lo habia visto, pero no sabia para que funcionaba, es que hace 1 año que no tocaba nada luego de ese curso que solo me dieron apuntes sacados de internet ¬¬)

Es bueno saber, que no es taaan asi lo de las imagenes, puesto que es una pagina para mostrar a futuros clientes.

Muchas gracias!

kelevrabonloup · #5 (**permalink**) 04/10/2012, 14:44

Como es eso de que una imagen de px repetida es mejor que una de 400 px??
Donde puedo leer de eso?
Es que en mi cabeza cuadrada-cubica-matematica no le entra xD
(400 / 20 = 20 imagenes de 20 px.. siendo asi el que sean 20 en vez de 1, deberian de tardar mas en completar, segun mi cabeza, por eso no hacia asi, y me estoy quedando sin ideas para los fondos, puesto que el color raso no es mi favorito)

#6 (**permalink**) 04/10/2012, 16:34

Bueno, hay mucho que estudiar.

Sobre las imágenes pues simple, si una imagen pesa 1k aunque mida 3mil pixeles pues será rápido al cargar, y si una imagen pesa 3m aunque mida 50px pues va a tardar en cargar.

Obviamente entre más pequeña sea la imagen pues menor será el peso y más rápida la carga.

La técnica de usar una imagen pequeña y repetirla cientos de veces pues se llama sprite y es una muy buena técnica de maquetación y además es mentira que si es una imagen de 1px y se repite mil veces pues ésta se hace lenta, pues al contrario, se carga la misma imagen pequeña no miles de imágenes pequeñas. ;)