Ver Mensaje Individual
  #2 (permalink)  
Antiguo 24/07/2012, 07:46
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: como implementan un UI Kit?

Cita:
Iniciado por yuo2 Ver Mensaje
o mejor es usar liberias para evitar maquetear?
Es bueno usar librerias de cara a la compatibilidad, pero esto no quita que debas escribir código "como en una web" ya que lo que se hace es pasar la UI (psd) a html/css/javascript/imágenes. Siempre es mejor si se puede evitar el uso de imágenes y en su lugar incluir css, pero aquí eres tu quien decide ya que no lograras que css se renderize exactamente igual en navegadores modernos que en navegadores obsoletos. Siempre css te dará variantes que una imagen de por si no posee. En la práctica, consiste en crear clases para cada elemento, en las cuales asignas su correspondiente pedazito de imágen de ser necesario a traves de un sprite.

Ej:
Código CSS:
Ver original
  1. .boton, .switch, .scrollbar{
  2. background: url("spriteDir/spriteImg.extension");
  3. }
  4. .boton{ /*code*/ background-position:/*correspondiente al sprite*/;}
  5. .switch{/*code*/}
  6. .scrollbar{/*code*/}
Código HTML:
Ver original
  1. <input type="button" class="boton" value="Enviar"/>
Tip: mira como lo hacen los que saben, pasate por UI ya hechos como jqueryUI, twitterBootstrap, etc.

Tienes elementos que por compatibilidad si o si necesitarás javascript, por ejemplo el switch (radioboton/on-off), las scrollbar. Aquí nuevamente yo usaría una librería para olvidarme de posibles problemas con navegadores viejos.
Espero te sirva, es solo un punto de vista, ojalá tengamos muchos más.

pd: <sarcasmo>si tu sitio tiene una concurrencia de un millon de visitas por día considera evaluar el peso de la librería</sarcasmo>

Última edición por cristian_cena; 24/07/2012 a las 07:56 Razón: ampliamos con un ejemplo y corregimos la ortografía y la gramática