Maquetando un theme de WordPress

Maquetando un theme de WordPress

Fecha: 11-Feb-2010 | Autor: Marcelo.
Guardado en: HTML y CSS, Themes

Hoy es nuevamente un Jueves de WordPress y nos toca aprender a maquetar un tema para WordPress. La semana pasada habíamos realizado el diseño del tema y hoy lo maquetaremos.

Preparé para ello un videotutorial, que quizá quedó un poquito largo pero espero que puedan disfrutarlo igual. Además, al final de este post encontrarán para descargar el archivo fuente en PSD (Photoshop, Gimp, etc.), y los archivos del tema maquetado (HTML, CSS e imágenes).

Descargar Archivos:

psdhtml

Si te gustó este post, compártelo:
  • Meneame
  • Twitter
  • Facebook
  • Google Bookmarks
  • Live
  • del.icio.us
  • BarraPunto
  • Technorati
  • Bitacoras.com
Me gusta! A 8 lectores les ha gustado esta entrada.
Loading ... Loading ...

Etiquetado como: , , , , , ,

Gravatar

Marcelo Ferreiro


Desarrollador web: me especializo en Diseño web, Maquetación xHTML & CSS y Programación PHP & MySQL, e intento aprender un poco más cada día.

14 comentarios, participa!

  1. Noah

    11. Feb, 2010

    Muy bueno el video, los tutoriales en video cuando estan bien hechos por mas largos que sean son un orgasmo.

  2. Pedro Pablo

    11. Feb, 2010

    Muy bien explicado y sin duda da solución a uno de los grandes quebraderos de cabeza para los que usamos Wordpress pero sabemos muy poco de programar. Gracias!!

  3. Marcelo

    11. Feb, 2010

    Noah, Pedro Pablo: muchas gracias por sus comentarios :) me alegra mucho que estos videotutoriales que estoy realizando realmente sean de utilidad ;)

  4. Federico

    11. Feb, 2010

    Bueno! Termine de verlo todo, la verdad muy bueno! Se me ocurre que una vez terminada esta serie, podrías si tenes ganas y tiempo, ir ampliando los videotutoriales con por ejemplo, como hacer para que este mismo theme tenga dos sidebars, que soporten widgets, etc etc… Quizás me estoy adelantando, ahora a esperar una semanita mas :D

  5. Mike

    11. Feb, 2010

    Estupendo !!!
    Estoy en mis inicios de programación HTML – PHP y en verdad aunque fué largo el tutorial, me quedó bastante bien explicado todo.
    Excelente la manera de explicarlo paso a paso.

  6. luchosar

    11. Feb, 2010

    Excelente tu trabajo. Pero no me queda duda que hay que conocer bastante de CSS.

  7. Fernando

    11. Feb, 2010

    La verdad estoy sorprendido , no sabia que se podia hacer eso en CSS, digamos de agrupar los class ,id y link.

    Sin palabras, buen material , esperando al otro Jueves ;)

    No estaria mal que explicaras tambien el tema de los comentarios o hacer la maquetacion en xhtml , css y despues integrarla a wordpress.

    Gracias nuevo!

    Salidos !

  8. Fernando

    11. Feb, 2010

    Hola de nuevo :P, despues estaria bueno que cada uno muestre su theme creado, yo estoy diseñando el mio en photoshop, que te parece Marcelo ?

  9. T_mix

    12. Feb, 2010

    muy bueno el video, ahora tendre que aplicarlo…. gracias y espero la proxima entrega!

    bye

    att:Taz

  10. Lukas

    12. Feb, 2010

    Hello… Como todos los Jueves de Wordpress… Acá estoy…

    1. Se te olvidó ponerle el link al “Indice” de la página principal de “Jueves de Wordpress”.

    2. Maquetar es una cruz!!! ¡La vida! Personalmente tuve que hacer todo el diseñó de nuevo – el truco lo descubrí cuando me bajé tu archivo de Photoshop, hacerlo todo por capa – Y entonces estoy atascado en la parte de ponerle el borde superior, cuando lo pego los dos juntos no se corresponen… Y entonces no sé como mover las columnas hacia los lados para que entonces puedan “caer” como van… heheheh… Pero me gusta porque mi HTML+CSS está casi igual al de mi diseño :D

    3. ¿Dónde puede encontrar uno un manual o algo parecido con respecto a CSS, sobre las notaciones, sus usos, etc? Personalmente lo estoy haciendo a base de prueba y error, y así no es tan divertido… :P

  11. Marcelo

    12. Feb, 2010

    Federico, gracias por el comentario y estoy de acuerdo, es buena idea la de ir luego extendiendo los #JuevesDeWordpress el uso de nuestro theme ;)

    Mike, luchosar, de verdad muchas gracias por sus comentarios, dan ganas de seguir invirtiendo esfuerzo en esto, sabiendo que a varios le es útil!

    Fernando, sin duda el próximo jueves se explicará como integrarlo y hacer funcionar los comentarios, etc… y me gustó la idea de que luego todos (los que quieran) lo compartan…

    T_mix, gracias por el comentario!

    Lukas, gracias por el recordatorio del link ;)
    En los próximos días voy a intentar compartir (tengo que encontrarlo) y manual que me ayudó mucho a comenzar con xhtml y css que si mal no recuerdo estaba liberado bajo CreativeCommons, asi que podemos compartirlo sin problemas ;)

    Sobre tu problema con las columnas, no debes mover las columnas en el HTML sino mover la imágen superior para que coincida donde YA ESTAN tus columnas ;)

  12. Leonardo (@leoachear)

    14. Feb, 2010

    Domingo…mate…sillón…notebook….”Jueves de WordPress” (aunque sea domingo)…¿qué mas puedo pedir?

    Muy bueno lo que hacés, se me pasó volando el videotutorial.

    ¿Cuánto falta para el jueves? Uh 4 días…

    ¡Un abrazo!

    PD: Posicionan bien tus blogs en Google. Te encontré buscando “aprender php” y salió primero phpnight.

  13. Gosunkugi

    30. Mar, 2010

    WAAAA *casi morí* 45 minutos de tutorial! me impresiona la velocidad con que lo hace… aspiro llegar a hacerlo asi de rápido :)

    Una cosita… siempre recomiendan usar la medida de las fuente en em… que piensas de eso?

  14. Cristian Forero

    16. Abr, 2010

    Le agradezo mucho el material que has publicado en jueves de wordpress, mi actual trabajo de diseñador tiene mucho que ver con esto y pues durante gran parte de mi experiencia he sido un diseñador editorial, pero quize empezar a forjar camino por el diseño web, pero por mi poca experiencia había enfrentado gran cantidad de tropiezos en cuanto a maquetación refiere, su tutorial me ayudo un resto, gracias.

    Saludos desde Colombia!

Deja tu opinión