CSS

css2.jpg

 

Para continuar con un tema que teníamos pendiente, es que voy a retomar la senda del css, luego de las consideraciones y los aspectos básicos haremos un recorrido por algunos de los principales temas para poder entender un poco más de diseño y desarrollo web, todo esto a un nivel un poco más general, enfocandonos en la maquetación general y la forma en que debemos “pensar” un proyecto antes de desarrollarlo.

Semántica:
Al abordar la solución a un proyecto grafico, sea cual sea, en general lo que primero que se nos viene a la cabeza es el layout o esquema general de contenidos, es decir, hacemos un bosquejo de cómo diagramarlo. En el caso de los sitios web, podríamos resolver hacer dos o tres columnas, o si hacerlo centrado o a un costado, etc. Estos aspectos generales tienen que ver con como lo vamos a ver, pero paralelo a esto, también debemos considerar como lo vamos a escribir. Sabemos que lo que nos permite CSS es separar diseño de contenido, es decir podríamos prescindir del diseño o estilo y de todas formas veríamos el contenido. La semántica, es la forma en que el contenido se despliega sin el estilo.
Entonces cuando se escribe el código también se debe considerar que la forma en la que se haga influye en como se va a entender el sitio sin el estilo adjunto.

Un esquema simple de sitio podría ser así:

Sitio
- Cabecera
– Nombre del sitio
– Menú
- Cuerpo
– Contenido general
– Información complementaria
- Pie
– Información de contacto
– Firma de la página

Es en esta simple visualización de esquema del sitio podemos ver como este orden es más o menos lógico, pues primero tendremos el nombre del sitio o Logo, luego veremos una barra de navegación general, sigue el contenido del sitio, y después la información complementaria como notas, información de contacto y firma del sitio.
Esto le dará al usuario una visualización lógica del sitio sin necesidad de escribir una sola línea del estilo.
Esta forma de estructura de la información optimizará también la forma en que los navegadores encontrarán en el sitio la información descriptiva dentro de los contenidos de la página.

Uso de Etiquetas
Una parte importante de la semántica es el uso de las etiquetas en forma adecuada, es decir cada etiqueta sea una pequeña descripción de la información que contenga.
Si voy a poner un menú, lo mas lógico es que este sea una lista [ul], si necesito ordenar una lista de cosas entonces debo ocupar [ol]. En el caso de los div es un poco mas complejo ser descriptivo, pero de todas formas podemos entender que un [id] es algo que solo una ves en esa página, y si escribo un [class] entonces podría entender que ese tipo de contenido se podría repetir varias veces.
En el caso del uso de los [h] es mucho más simple de usar pues tiene un orden jerárquico donde el [h1] solo lo debemos ocupar en el nombre del sitio pues será este el que describa cual es el contenido del sitio, un error recurrente de los diseñadores es no otorgarle mayor importancia a la forma en que se agrega el logo al sitio, lo que generalmente se hace es poner el logo o marca como una imagen, lo que provoca que el sitio no tenga la identificación primordial para los navegadores.
El resto de los [h] pueden utilizarse en forma descendente en importancia es decir el nombre de la pagina seria [h1] luego los títulos más relevantes [h2] y los nombres para cada sección de la pagina [h3] y así progresivamente hasta el [h6] que son las etiquetas que entienden de la misma forma todos los navegadores.

Estructura General y Maquetación
Con la estructura que ya he descrito antes podríamos empezar a diagramar un sitio para que se viera de la siguiente forma:

Estructura del HTML

[body> [!--Inicio Body --]

[div id="contenedor" class="clearfix"]
[div id="Cabecera" class="clearfix]

[div id="logo"]
[h1] Nombre del sitio [/h1]
[/div]

[div id="menu"] Menú [/div]

[/div]

[div id="cuerpo" class="clearfix"]

[div id="contenido"] Contenido general [/div]
[div id="lateral"] Información complementaria [/div]

[/div]

[div id="pie" class="clearfix"]

[ div id ="contacto"] Información de contacto [/ div ]
[ div id ="firma"] Firma de la página [/ div]

[ /div ]

[ /div ]

[ / body ] [! -- Fin Body --]

Estructura del CSS

. clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
.clearfix {display:block;}

# contenedor{
width:900px;
margin:0 auto;
background:#68aef5;
}
# cabecera{
background:#cccccc;
margin:20px;
padding:10px;

}

# logo h1{
width:300px;
float:left;
padding:30px;
background:#e7e7e7;
}

# menu{
width:410px;
float:right;
background:#e7e7e7;
padding:30px;
margin:30px;
}

# cuerpo{
background:#cccccc;
margin:20px;
padding:10px;

}

# contenido{
width:550px;
float:left;
padding:50px 15px;
background:#e7e7e7;
}

# lateral{
width:200px;
float:right;
background:#e7e7e7;
padding:50px 15px;
}

# pie{
background:#cccccc;
margin:20px;
padding:10px;

}

# contacto{
width:400px;
float:left;
background:#e7e7e7;
padding:50px 15px;
}

# firma{
width:350px;
float:right;
background:#e7e7e7;
padding:50px 15px;
}

Clearfix:
Al momento de flotar contenidos dentro de un contenedor el fondo del contenedor tiende a desaparecer o a subir, esto por que al flotar los elementos estos “no llenan el contenedor”, para este común error en todos los navegadores es que se ha creado una etiqueta que limpia este error, esta se llama “clearfix” o “limpia” lo que hace es poner un contenido invisible “.” después de los contenidos flotantes de modo de marcar hasta donde llega realmente el contenedor.

Nombres y Comentarios
Dos buenos consejos al momento de maquetar un sitio son primero, dar nombre descriptivos a los contenedores de modo que entendamos que es lo que contiene y así hacer mas fácil su ubicación y no darle nombre de características graficas como color o posición, esto pues en algún minuto esos mismos aspectos visuales podrían cambiar.
Además es una buena costumbre marcar los contenedores con un comentario, sobre todo en la etiqueta que cierra el contenedor de modo de saber hasta donde llega cada contenedor, esto ayudara mucho en la medida en que el contenido de la página vaya aumentando.

Para cerrar esta parte, debo aclarar que hay algunas etiquetas y especificaciones que incluí en el código que quizás no las entiendan, pueden buscar más información al respecto o esperar al próximo capitulo donde profundizaré en el uso de etiquetas para html y css.

Les dejo los archivos de este ejemplo para que puedan revisarlos.

|

Comentarios

dia jueves antes de las 12 del dia ultimo plazo para post finales con nota maxima un 45

Responder
It's the best time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you some interesting things or suggestions. Maybe you could write next articles referring to this article. I want to read more things about it!
Responder
Ridiculous quest there. What happened after? Thanks!
Responder
First off I want to say terrific blog! I had a quick question in which I'd like to ask if you don't mind. I was curious to find out how you center yourself and clear your mind prior to writing. I have had a tough time clearing my mind in getting my thoughts out there. I do enjoy writing but it just seems like the first 10 to 15 minutes are generally wasted simply just trying to figure out how to begin. Any ideas or tips? Many thanks!
Responder
Hi i am kavin, its my first time to commenting anyplace, when i read this piece of writing i thought i could also make comment due to this good article.
Responder
Helpful info. Lucky me I discovered your web site by chance, and I'm surprised why this twist of fate didn't took place earlier! I bookmarked it.
Responder
Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed browsing your blog posts. After all I'll be subscribing to your feed and I hope you write again very soon!
Responder
I every time spent my half an hour to read this web site's articles every day along with a cup of coffee.
Responder
Thanks very nice blog!
Responder
These are truly wonderful ideas in about blogging. You have touched some fastidious factors here. Any way keep up wrinting.
Responder
Because the admin of this web page is working, no doubt very quickly it will be well-known, due to its quality contents.
Responder
Magnificent goods from you, man. I've understand your stuff previous to and you're just too fantastic. I really like what you have acquired here, really like what you are stating and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I can not wait to read much more from you. This is actually a great site.
Responder
Hello There. I found your blog using msn. This is a very well written article. I will make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I'll certainly return.
Responder
It's amazing to pay a quick visit this site and reading the views of all mates about this post, while I am also eager of getting familiarity.
Responder
Superb site you have here but I was wanting to know if you knew of any user discussion forums that cover the same topics discussed here? I'd really love to be a part of community where I can get responses from other experienced people that share the same interest. If you have any recommendations, please let me know. Bless you!
Responder
I'm not sure why but this blog is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I'll check back later and see if the problem still exists.
Responder
Wow, this piece of writing is fastidious, my sister is analyzing such things, thus I am going to tell her.
Responder
Whats up very cool website!! Man .. Beautiful .. Wonderful .. I will bookmark your web site and take the feeds also? I'm glad to search out numerous helpful info here within the publish, we need develop more techniques on this regard, thank you for sharing. . . . . .
Responder
Glad to be one of the visitants on this awing site :D.
Responder
Wow! In the end I got a weblog from where I be able to in fact obtain valuable information regarding my study and knowledge.
Responder
I am very happy to read this. This is the kind of manual that needs to be given and not the random misinformation that's at the other blogs. Appreciate your sharing this greatest doc.
Responder
I leave a response when I appreciate a post on a site or I have something to contribute to the conversation. Usually it is triggered by the passion communicated in the post I read. And after this post probandoprobando. I was actually excited enough to drop a thought ;) I actually do have a couple of questions for you if it's okay. Is it just me or do a few of these remarks come across as if they are coming from brain dead visitors? :-P And, if you are writing on other sites, I would like to follow everything new you have to post. Would you make a list every one of all your community pages like your linkedin profile, Facebook page or twitter feed?
Responder
I'm truly enjoying the design and layout of your site. It's a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme? Great work!
Responder
It's going to be finish of mine day, except before end I am reading this impressive post to improve my experience.
Responder
An impressive share! I have just forwarded this onto a coworker who was doing a little research on this. And he in fact ordered me breakfast due to the fact that I discovered it for him... lol. So let me reword this.... Thanks for the meal!! But yeah, thanks for spending time to talk about this issue here on your web site.
Responder
Its like you read my mind! You seem to understand so much approximately this, such as you wrote the e-book in it or something. I feel that you just could do with a few % to pressure the message house a little bit, however instead of that, this is wonderful blog. An excellent read. I will certainly be back.
Responder
What's up Dear, are you truly visiting this web page on a regular basis, if so afterward you will definitely get nice know-how.
Responder
Inspiring story there. What occurred after? Take care!
Responder
Incredible quest there. What occurred after? Take care!
Responder
First of all I want to say terrific blog! I had a quick question which I'd like to ask if you do not mind. I was interested to know how you center yourself and clear your mind before writing. I have had trouble clearing my thoughts in getting my thoughts out. I truly do take pleasure in writing however it just seems like the first 10 to 15 minutes are lost just trying to figure out how to begin. Any ideas or tips? Appreciate it!
Responder
Sweet blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I've been trying for a while but I never seem to get there! Many thanks
Responder
There is certainly a great deal to know about this issue. I like all the points you've made.
Responder
bookmarked!!, I like your blog!
Responder
You ought to take part in a contest for one of the most useful blogs on the internet. I'm going to highly recommend this blog!
Responder
Hello there, You've done a fantastic job. I will certainly digg it and personally recommend to my friends. I am sure they will be benefited from this web site.
Responder
I visited various web sites but the audio feature for audio songs present at this website is really marvelous.
Responder
I think this is one of the most important information for me. And i'm glad reading your article. But should remark on few general things, The web site style is wonderful, the articles is really great : D. Good job, cheers
Responder
Hi, i believe that i noticed you visited my blog so i got here to go back the prefer?.I'm attempting to find issues to enhance my site!I suppose its adequate to make use of a few of your ideas!!
Responder
Heya! I'm at work browsing your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the fantastic work!
Responder
Excellent site you've got here.. It's hard to find good quality writing like yours these days. I seriously appreciate individuals like you! Take care!!
Responder
Hi, Neat post. There is an issue together with your website in web explorer, could test this? IE still is the marketplace chief and a large section of people will omit your wonderful writing because of this problem.
Responder
Thanks for finally talking about >CSS
Responder
Hey just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Internet explorer. I'm not sure if this is a formatting issue or something to do with internet browser compatibility but I thought I'd post to let you know. The style and design look great though! Hope you get the problem fixed soon. Thanks
Responder

Escribe un comentario

¿Quieres usar tu foto? - Inicia tu sesión o Regístrate gratis »
Comentarios de este artículo en RSS

Comentarios recientes

Cerrar