Seguramente te ha pasado que al estar maquetando, debes elegir a que darle prioridad: si hacer que el diseño quede perfecto, pero el código html MUY cargado, o hacer un código html limpio pero que no respete al 100% el diseño original.
Pues cualquiera de las 2 opciones que elijas, estará mal.
En este artículo te enseño como hacer para compatibilizar ambas cosas, sin necesidad de relegar ni diseño ni codigo.
Se ha hablado mucho sobre la maquetacion web, pero en muy pocos casos se explica detalladamente que se necesita para pasar de Psd a Html de forma que se respete el diseño, pero que a su vez, el codigo html quede perfecto.
Es decir, cuales son las herramientas que debes conocer para convertir un Psd en Html de forma profesional, y 100% compatible y optimizada para todos los navegadores.
Las herramientas o elementos que intervienen son:
– El lenguaje HTML o XHTML (etiquetas html)
– Las hojas estilo cascada, o más conocidas como CSS.
Pero…..que se usa para cada tarea de maquetación web?
Aquí es donde se comete uno de los ERRORES mas graves a la hora de la maquetación web, y que la mayoría de las personas no comprende.
Yo te lo voy a explicar y cuando lo entiendas y lo apliques, verás que fácil es.
Presta mucha atención, es muy simple.
Siempre recuerda esto:
«Los contenidos de la pagina (textos, imágenes, etc) se manejan con las etiquetas HTML, y la apariencia de esos contenidos (forma, color, tamaños, posición) se maneja con CSS»
Es decir, para maquetar correctamente debes aprender a SEPARAR el contenido, del diseño.
Este concepto es IMPORTANTISIMO porque te dará independencia total en los sitios web que crees. Y además, tus proyectos web serán escalables y de muy fácil actualización, ya que si tienes que modificar algo en el diseño, no tienes que tocar nada del contenido.
Solo modificas los CSS, y listo !
** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.
Haz Click AQUI para Descargarlo AHORA.
Con las etiquetas HTML ingresarás los contenidos a tu pagina y le darás estructura, y con los estilos CSS les darás forma, tamaños, color, posición, etc etc.
Nunca debes olvidar esto: el contenidos por un lado, y la apariencia por el otro.
NUNCA van juntos.
Mi intención aquí no es sumergirme en explicaciones que te mareen, pero si quiero darte el conocimiento básico para que puedas pasar un Psd a Html sin problemas.
Por eso en el próximo articulo, mostraré en un video para veas como manejar por separado el contenido, del diseño.
Verás que fácil es una vez que te acostumbras !
Saludos!
Cristian
—————————————————
Me gustaría que me dejaras un comentario sobre este artículo que acabas de leer y también que me contaras un poco cual es tu principal complicación, a la hora de tratar de pasar un psd a html.
YO personalmente estaré contestando tus preguntas y comentarios.
Muy bn sitio hace tiempo que buscaba algun sitio o blog q m orientara un poco acerca de la maquetacion web, los que encontraba eran con informacion muy vaga grasias por tus aportes….
Gracias Carlos
Me alegra saber que te he ayudado.
Saludos!
Cristian