Comunidad de diseño web y desarrollo en internet online

PSD a XHTML y CSS, 4

Por raymicha el 30 de Septiembre de 2009 con 46,932 visitas
HTML, CSS y Javascript Otros tutoriales por raymicha.

Después de una larga espera aquí esta la continuación del tercer capitulo de "Asi las armamos en español". Serie de videotutoriales en los que mostrare como maquetar un diseño en XHTML con CSS desde un archivo fuente PSD de Photoshop.

Este capitulo esta dividido en dos partes. La primera parte les hablare del Concepto de Modelo de Bloque (The Box Model Concept), concepto muy importante de entender antes de que podamos empezar a darle formar a nuestro Layout. En la segunda parte esta ya de lleno a la armada de nuestra web con el CSS.

Te recuerdo ver las primeras partes de esta serie: Convertir PSD en XHTML/CSS parte 1, Convertir PSD en XHTML/CSS, parte 2 y Convertir PSD en XHTML/CSS parte 3.

Así las armamos en español: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS.

No olviden dejar sus comentarios y sugerencias por aquí en Cristalab o siguiéndome a través de twitter @raymicha. En el siguiente capitulo vamos a realizar el javascript que nos permitirá hacer cambios en algunas fuentes y para hacer funcionar nuestro slide. No se lo pierdan!

Envia un comentario (56)

css html photoshop xhtml

Por elchininet el 30 de Septiembre de 2009

Como siempre @micha, buen tutorial.
Por mals1990 el 30 de Septiembre de 2009

raymi, encantado con los tutos q haces, me gustaria si puedes hacer un tuto sobre todo lo q es css. por que yo desarrollo paginas web, pero ahora me doy cuenta q me falta bastante. pero gustaria q hicieras un tuto sobre css.
gracias. y exitos para ti.
Por Memomiliano el 30 de Septiembre de 2009

SOlo decir que "Lo estaba esperando", gracias y exito
Por Daniel BAtista el 30 de Septiembre de 2009

woow porfin la continuacion.. la esperaba con ansias..

muchas gracias..

eh aprendido bastante..

y si no es mucho pedir quisiera que continuaras con un tuto acerca de como adaptar todo esto que nos has enseñado a una plantilla de wordpress..

a quien le gustaria?
Por raymicha el 30 de Septiembre de 2009

bueno estaba pensando en maketar dos disenios mas de manera estatica y luego hacer la implementacion para wordpress me parece importante que se vea no solo una manera de estruturar webs sino que tuvieran mas opciones de todas maneras van a haber muchisimos temas sobre todo de wordpress en mis proximos videos
Por AndrÃ©s el 30 de Septiembre de 2009

Excelentes videos, me sacaste un montón de dudas, y van a ser videos de consulta frecuente!
Muchas Gracias!!
Por Daniel BAtista el 30 de Septiembre de 2009

gracias micha y los esperaremos con ansias..

un saludo
Por M@U el 01 de Octubre de 2009

Geniales los vídeos, enhorabuena, seguid así.
Por kios el 01 de Octubre de 2009

Excelente como todos los demas videos,una consulta algun soft tipo coda para windows,intente con el notepad++ pero el autocompletado no me gusta y el Aptana Studio 1.5 me falla de ves en cuando,alguna recomendacion?
Por @villaju el 01 de Octubre de 2009

Sii!!

Wordpresss!!

vamos micha!! sigue asi!
Por kenshinsoto el 01 de Octubre de 2009

genial, gracias, lo esperaba con ansias, tienes mas videotutoriales?
Por Dybite el 01 de Octubre de 2009

Una cosa Micha, nos vas a enseñar como colar cositas en los menús del tipo mootools o jquery???. Muchas gracias por todo.
Por Ligarto el 02 de Octubre de 2009

Buenas Raymi. Acabo de ver su videos, están geniales y me ayudan mucho...

Sería posible algún video sobre photoshop (fondos, efectos, fusion de imagenes, etc) y otro sobre css avanzado y jQuery?

Gracias de antemano.
Por Chekelin el 02 de Octubre de 2009

Argh tengo que escribir el comentario de nuevo, ya que no se publicó, de todos modos son 2 cositas.

Me hubiera gustado que explicaras un poquitin más mientras escribías (si, es cierto que no te gusta pero no todos sabemos mucho de esto pues ).

Esta es sólo una observación ¿es 'hexagesimal' o 'hexadecimal'? tengo entendido que la primera es base 60 y la segunda base 16.

Creo que es todo, buen par de videos, espero con ansias los demás
Por pixeliko el 06 de Octubre de 2009

Muy completos sí. Una cosa es saber y otra bien distinta saber enseñar. A mí me parece muy complicado ponerse a grabarse sin tener que cortar y pegar el video 10.000 veces porque me he confundido o no queda claro. El tuyo parece muy natural.

Felicidades.
Por Xpress78 el 08 de Octubre de 2009

Excelente los tutoriales y con gran gusto esperaremos PSD a Wordpress ... Seria interesante y de mucha ayuda ver este tutorial @raymicha.

Gracias.
Por Kumy el 10 de Octubre de 2009

wooh genial el tutorial! ^O^ me los vi todos! ! buen trabajo quedo excelente , bien explicado ! .
solo que mm... me entro una duda.. como le hago para poner la plantilla a Blogger.com?
.. o alguien sabe de algun tutorial ?
y esu ._. .
Por rubik el 27 de Octubre de 2009

Sería bueno si pudieses subir al menos el archivo CSS.
Gracias, muy buenos videos!
Por Carmen el 27 de Octubre de 2009

Por favor podrían dejar el css, tengo problemas y no puedo continuar.
Muchas gracias.

Por raymicha el 27 de Octubre de 2009

Carmen-blog :

Por favor podrían dejar el css, tengo problemas y no puedo continuar.
Muchas gracias.

ahi te va el css me imagino que luego lo zipeare y lo pondre para que se lo puedan bajar

lo pongo tan pronto y tan rapido vi el mensaje

Código :

/* RESET */

*{ margin: 0; padding: 0; border: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */

ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

h1{ font-size: 26px; }

h2 { font-size: 20px; } 

h3 { font-size: 16px; }

h4 { font-size: 14px; }

h5 { font-size: 12px; }

h6 { font-size: 10px; }

li{ list-style: none; }

a{ text-decoration: none; }

a:hover{ text-decoration: underline; }

/* ESTILOS GENERALES */

div#encabezado{
background-image:url("../imagenes/encabezado_rayas.jpg");
background-repeat:repeat-x;
height:100px;
}

div#galerias{
background-image:url("../imagenes/slogan_bg.jpg");
background-repeat:repeat-x;
height:290px;
}

div#navegacion{
background-image:url("../imagenes/navegacion_rayas.jpg");
background-repeat:repeat-x;
height:50px;
}

div#contenido{
background-image:url("../imagenes/contenido_degrade.jpg");
background-repeat:repeat-x;
background-color: #fff;
}

div#footer{
background-image:url("../imagenes/sombra_footer.jpg");
background-repeat:repeat-x;
background-color: #637050;
}

/* CLASES GENERALES */

div.interior{
width:960px;
margin:0 auto;
}

div.clearfix{
width:1px;
height:1px;
display:block;
clear:both;
content:'.';
}

div.separador{
background-image: url("../imagenes/separador.jpg");
width: 260px;
height: 2px;
}

div.seccion{
   padding: 30px 0 0 18px;
}

/*ENCABEZADO*/

div#nombres{
position:relative;
height:100px;
}

div#nombres h1{
line-height:100px;
color:#fff;
letter-spacing: -2px;
}

div#nombres h1 span{font-weight:lighter}

div#nombres small{ 
position:absolute;
right:0px;
top:44px;
letter-spacing:1px;
color:#fff;
}

/* GALERIA */

div#descripcion{
width:477px;
float:left;
margin-top:45px;
}

div#descripcion div#links{
margin:30px 0;
}

div#descripcion div#links a#icono_uno{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:0 0;
padding:15px 0 15px 45px;
margin-right:34px;
}

div#descripcion div#links a#icono_dos{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:-266px -8px;
background-repeat:no-repeat;
padding:10px 0 15px 45px;
}

div#descripcion div#links a#icono_uno, a#icono_dos{
text-decoration:underline;
color:#8d8071;
}

div#descripcion h1{
color:#433d33;
font-size:36px;
padding-bottom:15px;
}

div#descripcion span{
   font-weight: normal;
   color: #433d36;
}

div#descripcion span{
font-weight:lighter;
}

div#descripcion{
color:#887e70;
font-size:14px;
line-height:31px;
}

div#slides{
float:right;
background-color:#fff;
margin-top:20px;
border:1px solid #e6dfd6;
}

/*div#slides ul li.thumb{
display:none;
}

div#slides ul li.slide_default{
display:block;
}*/

div#slides img{
padding:10px;
}

/*MENU */

ul#menu_principal{
height:50px;
}

ul#menu_principal li{
line-height:50px;
float:left;
padding-right:50px;
}

ul#menu_principal li a{
padding:18px 0;
color:gray;
font-family:Myriad Pro, sans serif;
}

ul#menu_principal li a:hover{
color:#f4f4f4;
text-decoration:none;
}

ul#menu_principal li a.active{
color:#f4f4f4;
background-image:url("../imagenes/menu_active.png");
background-repeat:no-repeat;
background-position:bottom;
}


/*CONTENIDO PRIMARIO */

div#primario{
width:619px;
float:left;
}

div#primario div#medio{
background-color:#f1f1f1;
border:1px solid #e7e6e6;
}

div#primario div#medio ul{
padding-bottom:19px;
padding-left:13px;
}

div#primario div#medio ul li{
background-image:url(../imagenes/mas_bullet.png);
background-repeat:no-repeat;
margin-top:15px;
padding-left:24px;
list-style-position:inside;
font-family:Arial, san-serif;
font-size:12px;
color:#6f655a;
}

div#primario h3{
font-size:20px;
padding-top:24px;
padding-bottom:30px;
color:#3c3c3c;
}

div#primario p, div#primario p a{
font-family: Arial, sans-serif;
font-size:12px;
line-height:25px;
color:#6f655a;
}

div#primario a{ text-decoration: underline; }

/* BLOG */

div.post{ padding: 0 0 35px 0; }

div.post-arriba, div.post-abajo{ overflow: hidden; }

div.post-arriba{ padding: 0 0 5px 0; }

div.titulo{ float: left;}

div.post-arriba span.comentarios{ 
   float: right;
   background-image:url("../imagenes/comentario_bg.png");
   background-repeat: no-repeat;
   width: 90px;
   height: 26px;
   font-size: 13px;
   letter-spacing: .5px;
   text-align: center;
   color: #fff;
   padding: 3px 0 0 0;
   margin:0 230px 0 0;
}

div.post-abajo div.post-contenido{ width: 379px; float: left; }

div#primario div.post-abajo div.post-contenido a{ color:#342e28; }

div.post-abajo div.post-contenido p.metadata{ padding: 0 0 5px 0 }

div#primario div.post-abajo div.post-contenido p.metadata a{text-decoration: none;}

div.post-abajo div.thumb-post{ float: right; padding: 5px 5px 2px 5px; background-color: #fff; border: 1px solid #aaacac;}

div.post-abajo div.thumb-post img{ border: 1px solid #aaacac; }

/* CONTENIDO SECUNDARIO */

div#secundario{
width: 300px;
float: right;
background-color:#e8e8e8;
margin: 2px 0 0 0;
}

div#secundario div#proyectos{
padding:0 7px;
}

div#secundario div#proyectos img{
padding:9px 0;
}

div#secundario div#contacto{
width:260px;
background-image:url("../imagenes/twitter_bg.png");
background-repeat:no-repeat;
padding-top:20px;
padding-bottom:24px;
margin-left:17px;
}

div#secundario h3{
padding-top:25px;
padding-left:20px;
padding-bottom:14px;
color:#777777;
}

div#secundario div#contacto h5{
font-size:18px;
padding-bottom:20px;
color:#676767;
}

div#secundario div#contacto p{
font-size:10px;
font-family:Arial;
line-height:15px;
color:#837e79;
}

div#secundario div#contacto a{
color:#3fabe2;
text-decoration:underline;
}

/* SECUNDARIO BLOG */

div#secundario li{ padding: 10px 0 0 0; }

div#secundario a{ color:#342e28; }

div#secundario div#recent-posts{ padding: 40px 0 20px 18px; }


/* FOOTER */

div#footer ul{
float:left;
margin-top:21px;
}

div#footer ul li{
float:left; 
padding-right:23px;
}

div#footer ul li a{
color:#aa9c8b;
text-decoration:underline;
font-family:Arial, sans serif;
font-size:11px;
}

div#footer ul li#home a{
text-decoration:none;
}

div#footer div#footer_info{
background-image:url("../imagenes/copyright_bg.png");
background-repeat:no-repeat;
width:300px;
height:75px;
float:right;
}


div#footer div#footer_info h5, div#footer div#footer_info p{
margin-top:21px;
margin-left:23px;
color:#fff;
font-size:14px;
}

div#footer div#footer_info p{
margin-top:!3px; color:#aa9c8b; font-size:10px;
}

div#footer div#footer_info p a{
color:#aa9c8b;
text-decoration:underline;
}

Por raymicha el 27 de Octubre de 2009

Carmen-blog :

Por favor podrían dejar el css, tengo problemas y no puedo continuar.
Muchas gracias.

ahi te va el css me imagino que luego lo zipeare y lo pondre para que se lo puedan bajar

Código :

/* RESET */

*{ margin: 0; padding: 0; border: 0; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */

ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

h1{ font-size: 26px; }

h2 { font-size: 20px; } 

h3 { font-size: 16px; }

h4 { font-size: 14px; }

h5 { font-size: 12px; }

h6 { font-size: 10px; }

li{ list-style: none; }

a{ text-decoration: none; }

a:hover{ text-decoration: underline; }

/* ESTILOS GENERALES */

div#encabezado{
background-image:url("../imagenes/encabezado_rayas.jpg");
background-repeat:repeat-x;
height:100px;
}

div#galerias{
background-image:url("../imagenes/slogan_bg.jpg");
background-repeat:repeat-x;
height:290px;
}

div#navegacion{
background-image:url("../imagenes/navegacion_rayas.jpg");
background-repeat:repeat-x;
height:50px;
}

div#contenido{
background-image:url("../imagenes/contenido_degrade.jpg");
background-repeat:repeat-x;
background-color: #fff;
}

div#footer{
background-image:url("../imagenes/sombra_footer.jpg");
background-repeat:repeat-x;
background-color: #637050;
}

/* CLASES GENERALES */

div.interior{
width:960px;
margin:0 auto;
}

div.clearfix{
width:1px;
height:1px;
display:block;
clear:both;
content:'.';
}

div.separador{
background-image: url("../imagenes/separador.jpg");
width: 260px;
height: 2px;
}

div.seccion{
   padding: 30px 0 0 18px;
}

/*ENCABEZADO*/

div#nombres{
position:relative;
height:100px;
}

div#nombres h1{
line-height:100px;
color:#fff;
letter-spacing: -2px;
}

div#nombres h1 span{font-weight:lighter}

div#nombres small{ 
position:absolute;
right:0px;
top:44px;
letter-spacing:1px;
color:#fff;
}

/* GALERIA */

div#descripcion{
width:477px;
float:left;
margin-top:45px;
}

div#descripcion div#links{
margin:30px 0;
}

div#descripcion div#links a#icono_uno{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:0 0;
padding:15px 0 15px 45px;
margin-right:34px;
}

div#descripcion div#links a#icono_dos{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:-266px -8px;
background-repeat:no-repeat;
padding:10px 0 15px 45px;
}

div#descripcion div#links a#icono_uno, a#icono_dos{
text-decoration:underline;
color:#8d8071;
}

div#descripcion h1{
color:#433d33;
font-size:36px;
padding-bottom:15px;
}

div#descripcion span{
   font-weight: normal;
   color: #433d36;
}

div#descripcion span{
font-weight:lighter;
}

div#descripcion{
color:#887e70;
font-size:14px;
line-height:31px;
}

div#slides{
float:right;
background-color:#fff;
margin-top:20px;
border:1px solid #e6dfd6;
}

/*div#slides ul li.thumb{
display:none;
}

div#slides ul li.slide_default{
display:block;
}*/

div#slides img{
padding:10px;
}

/*MENU */

ul#menu_principal{
height:50px;
}

ul#menu_principal li{
line-height:50px;
float:left;
padding-right:50px;
}

ul#menu_principal li a{
padding:18px 0;
color:gray;
font-family:Myriad Pro, sans serif;
}

ul#menu_principal li a:hover{
color:#f4f4f4;
text-decoration:none;
}

ul#menu_principal li a.active{
color:#f4f4f4;
background-image:url("../imagenes/menu_active.png");
background-repeat:no-repeat;
background-position:bottom;
}


/*CONTENIDO PRIMARIO */

div#primario{
width:619px;
float:left;
}

div#primario div#medio{
background-color:#f1f1f1;
border:1px solid #e7e6e6;
}

div#primario div#medio ul{
padding-bottom:19px;
padding-left:13px;
}

div#primario div#medio ul li{
background-image:url(../imagenes/mas_bullet.png);
background-repeat:no-repeat;
margin-top:15px;
padding-left:24px;
list-style-position:inside;
font-family:Arial, san-serif;
font-size:12px;
color:#6f655a;
}

div#primario h3{
font-size:20px;
padding-top:24px;
padding-bottom:30px;
color:#3c3c3c;
}

div#primario p, div#primario p a{
font-family: Arial, sans-serif;
font-size:12px;
line-height:25px;
color:#6f655a;
}

div#primario a{ text-decoration: underline; }

/* BLOG */

div.post{ padding: 0 0 35px 0; }

div.post-arriba, div.post-abajo{ overflow: hidden; }

div.post-arriba{ padding: 0 0 5px 0; }

div.titulo{ float: left;}

div.post-arriba span.comentarios{ 
   float: right;
   background-image:url("../imagenes/comentario_bg.png");
   background-repeat: no-repeat;
   width: 90px;
   height: 26px;
   font-size: 13px;
   letter-spacing: .5px;
   text-align: center;
   color: #fff;
   padding: 3px 0 0 0;
   margin:0 230px 0 0;
}

div.post-abajo div.post-contenido{ width: 379px; float: left; }

div#primario div.post-abajo div.post-contenido a{ color:#342e28; }

div.post-abajo div.post-contenido p.metadata{ padding: 0 0 5px 0 }

div#primario div.post-abajo div.post-contenido p.metadata a{text-decoration: none;}

div.post-abajo div.thumb-post{ float: right; padding: 5px 5px 2px 5px; background-color: #fff; border: 1px solid #aaacac;}

div.post-abajo div.thumb-post img{ border: 1px solid #aaacac; }

/* CONTENIDO SECUNDARIO */

div#secundario{
width: 300px;
float: right;
background-color:#e8e8e8;
margin: 2px 0 0 0;
}

div#secundario div#proyectos{
padding:0 7px;
}

div#secundario div#proyectos img{
padding:9px 0;
}

div#secundario div#contacto{
width:260px;
background-image:url("../imagenes/twitter_bg.png");
background-repeat:no-repeat;
padding-top:20px;
padding-bottom:24px;
margin-left:17px;
}

div#secundario h3{
padding-top:25px;
padding-left:20px;
padding-bottom:14px;
color:#777777;
}

div#secundario div#contacto h5{
font-size:18px;
padding-bottom:20px;
color:#676767;
}

div#secundario div#contacto p{
font-size:10px;
font-family:Arial;
line-height:15px;
color:#837e79;
}

div#secundario div#contacto a{
color:#3fabe2;
text-decoration:underline;
}

/* SECUNDARIO BLOG */

div#secundario li{ padding: 10px 0 0 0; }

div#secundario a{ color:#342e28; }

div#secundario div#recent-posts{ padding: 40px 0 20px 18px; }


/* FOOTER */

div#footer ul{
float:left;
margin-top:21px;
}

div#footer ul li{
float:left; 
padding-right:23px;
}

div#footer ul li a{
color:#aa9c8b;
text-decoration:underline;
font-family:Arial, sans serif;
font-size:11px;
}

div#footer ul li#home a{
text-decoration:none;
}

div#footer div#footer_info{
background-image:url("../imagenes/copyright_bg.png");
background-repeat:no-repeat;
width:300px;
height:75px;
float:right;
}


div#footer div#footer_info h5, div#footer div#footer_info p{
margin-top:21px;
margin-left:23px;
color:#fff;
font-size:14px;
}

div#footer div#footer_info p{
margin-top:!3px; color:#aa9c8b; font-size:10px;
}

div#footer div#footer_info p a{
color:#aa9c8b;
text-decoration:underline;
}

ahi esta no se me ocurrio otra manera de dejar el codigo

Por Carmen el 28 de Octubre de 2009

Muchas gracias por tu dedicación, tus videos son excelentes.

Un saludo.

Carmen
Por raymicha el 28 de Octubre de 2009

Carmen-blog :
Muchas gracias por tu dedicación, tus videos son excelentes.

Un saludo.

Carmen

dale no hay problema
Por gleyton el 04 de Noviembre de 2009

Micha: eres un amor... podrías explicar en forma simple lo de sustituir imágenes con el script java que mencionas en uno de tus videos? ¿Hay alguna otra forma de hacerlo?
¿Hay un tutorial en castellano y PDF de lo que enseñas?

Tenme paciencia...
Por stvs el 06 de Noviembre de 2009

Hola micha. Un favor, podrías explicar por favor como maquetar bordes redondos y bordes con sombra?. Sería de gran utilidad, gracias.
Por Alan el 17 de Noviembre de 2009

primero gracias por esta serie es excelente para aquellos que se inician en css (como yo),el float que mencionas es como el z-index de dreamweaver?
Por raymicha el 17 de Noviembre de 2009

Alan-blog :
primero gracias por esta serie es excelente para aquellos que se inician en css (como yo),el float que mencionas es como el z-index de dreamweaver?

primero que el float y el z-index son propiedades del CSS no de dreamweaver, el DW es una herramienta para editar el CSS entre otro lenguajes.

Por otro lado cada una de estas propiedades son totalmente diferentes en funcionabilidad, el float es para flotar elementos, y el z-index es para jugar con las capas de dos o mas elementos
Por ipadilla el 09 de Diciembre de 2009

Raymi, tus videotutoriales son realmente buenos, tu explicación y tu voz son inmejorables. El único problema es que el texto que vas escribiendo a penas se ve, es muy pequeño (con la máxima ampliación) y me está dañando la vista. Supongo que no tienes la posibilidad de aumentar el tamaño para facilitarnos la lectura de lo que escribes.
Seria mucho pedirte que pongas también el código html.
Muchas gracias por compartir es gran trabajos.
ipadilla
Por Andki el 06 de Enero de 2010

Super chevere!!!! oye es muy chevere... das clases de css asi sea via email?
Por raymicha el 07 de Enero de 2010

@Andki-blog si si estoy pensando en dar clases los fines de semana en mi perfil estan mis emails si kieres me agregas y conversamos
Por bruno el 25 de Abril de 2010

Hola raymi tus tutoriales son muy buenos, me estan ayudando muchisimo, pero no veo en de hoja de estilo css la linea para la class "active"aplicada a home.Me interesa.

Un saludo
Por jpcmm_73 el 28 de Abril de 2010

excelente tutorial!!

Gracias
Por alan el 06 de Mayo de 2010

felicitaciones!! y muchas gracias me sirvio un monton!..cuando viene el proximo capitulo?? o donde lo consigo?? saludos!!
Por Micki el 24 de Mayo de 2010

Gracias micha estaba necesitando una ayuda como esta para maketar una web personal, muchas gracias.

Creo que con el tuto completo de css la rompes

bye
Por adrian Buenos Aires el 14 de Junio de 2010

la verdad, SOS UNA GENIA... tu modo de explicar es mas que optimo, tenes mucha facilidad para enseñar!!! muchas gracias por ayudar a tanta gente a comprender, lenguajes tan complejos de una manera tan simple...

Segui asi, sos una gran maestra para todos nosotros!!!
Por Ismael veras el 26 de Julio de 2010

Buen video eres una tipa que tiene buenas voz para esto, gracias por compartir tus conocmientos. soy nuevo en esto del diseño web, tendras conocimiemto sobre joomla
Por Silvina el 04 de Noviembre de 2010

Espero que sigas con los videos tutoriales porque son excelentes!
Gracias!
Por Silvina el 06 de Noviembre de 2010

A mi me gustaría que hagas videos sobre propiedades y estaría bueno sobre otro template para seguir aprendiendo.
Por reyvolsam el 20 de Noviembre de 2010

Hola micha, es gustaso conocerte, creeme, pues te cuento yo programo en PHP, pero el diseño web tambien es algo que me llama mucho la atencion, y la maquetacion es algo que ya sabia, todo lo que he aprendido lo he hecho a travez de tutoriales de internet, y creeme este tutorial esta buenisimo es uno de los mejores que visto en español, ya que la mayoria estan en ingles, no es por presumir :p , pero afortunadamente se ingles, pero de todas maneras, espero que todos sepan aprovechar este tutorial.

Saludos desde Mexico!!
Por sedue el 28 de Noviembre de 2010

Muy buenos todos tus vídeos, felicitaciones por el contenido, pero sobre todo por la forma en que abordas los temas y la buena disposición que tienes para compartir tus conocimientos, ah y tu buen humor.
Por lis el 13 de Enero de 2011

Gran tiempo invertido...excelente videotutorial, felicitaciones!!! Muchas gracias.

Saludos desde Venezuela.
Por Cecilia el 01 de Marzo de 2011

Raimicha, estoy siguiendo tus videostutoriales y la verdad que me han ayudado mucho, ademas tengo que felicitarte porque son bastantes dinamicos...gracias por tus aportes que son de gran ayuda para personas como yo que se estan comenzando a meter en este mundo del diseño de paginas web que es muy apasionante!!. Saludos y gracias!
Por Emanuel el 06 de Mayo de 2011

Raymi, muchas gracias por el tutorial!
me sirvio mucho
hice mi web gracias a vos!
me costo pero algo me salio...
si tenes un tiempito me gustaria que la vieras
MI PRIMER WEB

besos!
Por calebzion el 20 de Mayo de 2011

como hiciste para centrar los divs??? please... answer me... se que este video es viejo.. pero me gusto muchisimo
Por aacm el 13 de Septiembre de 2011

me gusto este video de hecho despejo muchas dudas que tenia pero siento que te saltase una pasrte importante, como pasar del psd al css,
Por calebzion el 13 de Septiembre de 2011

centrar un div, facil
margin: 0 auto;
Por Fernando el 05 de Noviembre de 2011

Genia!!! Excelente! Saludos desde Buenos Aires! )

Por Antonio el 07 de Noviembre de 2011

me he atascado y no se porque narices no me sale los colores en donde deberian ir..
he seguido todo al pie de la letra pero los colores dicen que no quieren salir

ahorro el codigo de los margenes y pongo el de los colores por si acaso me puedes sacar de dudas ya que hago todo exactamente como lo explicas..

Código :

/*ESTILOS GRNERALES*/
div#encabezado{
   background-imege: url("../imagenes/encabezado.jpg");
   background-repeat: repeat-x;
   heigth:250px;
   
}

div#fondo_logos{
   background-imege: url("../imagenes/logos.jpeg");
   background-repeat:repeat-x;
   heigth:200px
}

div#contenido{
   background-imege: url("../imagenes/bienvenida.jpeg");
   background-repeat:repeat-x;
   heigth:400px

}

div#piepagina{
   background-imege: url("../imagenes/piepagina.jpeg");
   background-repeat:repeat-x;
   heigth:100px

Por calebzion el 07 de Noviembre de 2011

Antonio-blog :

me he atascado y no se porque narices no me sale los colores en donde deberian ir..
he seguido todo al pie de la letra pero los colores dicen que no quieren salir

ahorro el codigo de los margenes y pongo el de los colores por si acaso me puedes sacar de dudas ya que hago todo exactamente como lo explicas..

Código :

/*ESTILOS GRNERALES*/
div#encabezado{
   background-imege: url("../imagenes/encabezado.jpg");
   background-repeat: repeat-x;
   heigth:250px;
   
}

div#fondo_logos{
   background-imege: url("../imagenes/logos.jpeg");
   background-repeat:repeat-x;
   heigth:200px
}

div#contenido{
   background-imege: url("../imagenes/bienvenida.jpeg");
   background-repeat:repeat-x;
   heigth:400px

}

div#piepagina{
   background-imege: url("../imagenes/piepagina.jpeg");
   background-repeat:repeat-x;
   heigth:100px

escribiste background-imege: tendrias que poner background-image:

cambia la e por la A

Por Antonio el 08 de Noviembre de 2011

el fayo que menos me esperaba es el que era..
he mirado si la direción estaba mal escrita, si no escribía bien el formato de la imagen.. un sin fin de cosas y juro que hasta se me ha levantado un dolor de cabeza increible..

muchisimas gracias calebción!!
aunque parezca mentira me has sacado de un gran apuro...

mientras estoy aprendiendo se acabó el copiar y pegar..

gracias bro!!!
Por calebzion el 08 de Noviembre de 2011

recuerda que cuando se escribe mal un codigo en css, ya que no existe depuracion, no muestra absolutamente nada, te recomiendo que navegues con google chrome y a cada actualizacion que vayas escribiendo le pongas click derecho "inspeccionar elemento". te va a ser de gran ayuda
Por Antonio el 08 de Noviembre de 2011

asi lo haré calebzion tus palabras no caeran en el olvido ya que me gusta mucho aprender y sobre todo no volverme loco buscando el fayo que mira tu luego lo que era..
ahi me descargo el chrome que no me gusta mucho pero para el css lo pienso utilizar tal y como me dices..
si necesitas un alumno me dices que yo me ofrezco encantado ehhh jajajajaja
thank my friend
Por calebzion el 08 de Noviembre de 2011

Anonymous :
asi lo haré calebzion tus palabras no caeran en el olvido ya que me gusta mucho aprender y sobre todo no volverme loco buscando el fayo que mira tu luego lo que era..
ahi me descargo el chrome que no me gusta mucho pero para el css lo pienso utilizar tal y como me dices..
si necesitas un alumno me dices que yo me ofrezco encantado ehhh jajajajaja
thank my friend
Por ISAAC VIDAL el 16 de Abril de 2012

Hola excelentes tutoriales sobre todo para los que somos principiantes, tengo una duda que quizá sea un poco tonta...¿por que no maquetar en dreamweaver? dreamweaver se supone es una herramienta para diseñadores no programadores, si esto es vdd como se maqueta desde un psd directamente en dreamweaver, claro que pienso que para el css no hay forma de evitar la programación, jaja, bueno esta es mi duda no se si esto es verdad o no, como lo eh dicho soy principiante y ojala algún usuario o ud misma raymicha pudiera aclararme esto. muchas gracias.
Por Ramab el 20 de Julio de 2012

Hace 4 años que me dedico a diseñar PSD de webs, y nunca pude concretar perfectamente el diseño que hice, podia ser por no saber java, css html, fui aprendiendo de a poco con mi tiempo libre y nunca pude hacer lo que me propuse el día que hacia el PSD pero con este tutorial... El mejor que pude ver en 4 años. Gracias a esta persona si sigue estando en la comunidad, espero que sepa cuantas cosas me facilito

PD: tengo la misma duda que Isaac, normalmente en boca de algunos diseñadores que conosco suelen decir que el Dreamweaver no sirve para maquetar, quisiera saber si es un capricho de algunos o si tiene una base logica..

Gracias denuevo Saludos
Por mario cotom el 20 de Marzo de 2013

buenisimo estuvo tu tuorial

PSD a XHTML y CSS, 4

Así las armamos en español: Concepto del Modelo de Bloque y Armado completo de Estructura con el CSS.

Publica tu comentario

o puedes...