Posts Tagged diseño web
Posted on July 12, 2009 by Damian
En este tutorial les voy a mostrar como crear un simple contador de comentarios o comments counter como se suele decir en ingles. Con un HTML muy básico y un poco de CSS vas a poder dar un nuevo aire a tu blog.
Estructura:
La estructua HTML es muy simple.
Tenemos un DIV principal que incluye un elemento <span>( con la clase “count”) que es donde se va a mostrar el número de comentarios, y más abajo un texto con la palabra “comments”. El código HTML seria el siguiente:
<div class="bubble">
<span class="count">... contador ...</span>
comments
</div>
Para el globo usamos una imagen que vamos a aplicar como fondo del DIV
El código CSS que aplicamos es el siguiente:
.bubble{
background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;
}
.bubble .count{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;
}
//Añadimos un poco más de código para el texto
h1, p{margin:0; padding:0; border:0;}
p{
font-size:16px;
color:#666666;
font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
margin-bottom:8px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
Y ya esta! con eso tendriamos todo.
Como siempre acá tienen el EJEMPLO ONLINE
Descargar Ejemplo
VN:F [1.7.0_948]
Rating: 0.0/5 (0 votes cast)
Posted on June 8, 2009 by Damian
En mi último artículo comente como optimizar los archivos CSS de forma que queden organizados estructuralmente, facilitando así el mantenimiento y lectura de los mismos.
Hoy lo que voy a exponer es algo que la verdad se debería aprender antes, pero como dicen algunos, más vale tarde que nunca.
Básicamente nombrar los elementos de una web de forma semántica siginifca nombrarlos por su significado como pueden ser main (contenido principal) o sidebar (barra lateral), en cambio hacerlo de una forma estructural sería llamar a cada cosa por su nombre como por ejemplo right-bar (barra derecha) o left-content (contenido de la izquierda)
Imágenes obtenidas de http://woork.blogspot.com
Ahora imaginá por un momento que tenés que cambiar la orientación de la web bien porque no queda bien o porque tu cliente prefiere la barra del otro lado etc. Con el método estructural tendrias que cambiar todos los nombres para que siga teniendo la coherencia que tenía al principio ya que sino quedaría invertido. En cambio con el método semántico todo seguiría en su sitio.
Imágenes obtenidas de http://woork.blogspot.com
En conclución si elegimos los nombres de los elementos de una forma semántica no tendremos que preocuparnos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.
Puntos a tener en cuenta…..
1. Es conveniente usar minúsculas y separar las palabras mediante “-” o mayúsculas. Por ejemplo main-content o mainContent.
2. Optimizar tu código CSS creando solo los elementos principales que necesites y reutilizando las etiquetas HTML para los nodos hijos. Por ejemplo en vez de:
<div class="main">
<div class="main-title">...</div>
<div class="main-paragraph">...</div>
</div>
Usar :
<div class="main">
<h1>...</h1>
<p>...</p>
</div>
Con esto mantemos el código HTML más sencillo sin perder la opción de cambiar los atributos desde CSS.
Algunos ejemplos de como nombrar semánticamente los elementos
Por ejemplo es un diseño de 3 columnas podriamos hacerlo de la siguiente manera:
Otra formas de llamar a los elementos y que vas a encontrar a menudo por ahi son:
1.Container
El container o contenedor se utilizar para encajar nuestra web dentro. En ingles esto se dice “wrap” por lo que es my posible que tambien lo encuentres con ese nombre o el de “wrapper”.
2. Header
Es la parte superior de la web , donde se suele encontrar el logo de la misma. Se suele llamar “top”, “logo” , o simplemente “top-header”.
3. Navbar
Es el menu de navegación que suele encontrarse en la parte superior. Los nombres más comunes son “navbar”, “nav”, “navigation”, “nav-wrapper”.
4. Menu
Es la parte donde se encuentran los links generales o algun menu. Se suele llamar “menu”, “links”, “sub-nav”.
5. Main
Contenido principal de la web. Los nombres más comunes son “main-content”, “content” o “main”.
6. Sidebar
El sidebar es utilizado para contenido secundario como por ejemplo las últimas entradas, espacio publicitario, información del sitio …etc. Por lo que su nombre puede variar como “sidebar”, “sub-nav”, “side-panel”, “secondary-content”, etc.
7. Footer
El pie de página suele ser la parte donde ponemos el copyright de la web, quien la diseño , etc. Por lo general siempre lo vas a encontrar como “footer” o “copyright”.
Hay miles de formas más para llamar a los diferentes elementos de forma semántica. Si se les ocurre alguno , simplemente dejenlo en los comentarios.
Para los que quieran indagar un poco más sobre este tema hay un monton de artículos sobre el (en ingles):
1. More on developing naming conventions, Microformats and HTML5
2. Standardizing CSS class and id names
3. User interfaces and CSS Naming convention
4. Structural naming
5. Smart CSS Ain’t Always Sexy CSS
6. Semantic coding
7. Semantic naming conventions for HTML and CSS
8. What’s in a name (pt1)
9. What’s in a name (pt2)
10. Most popular naming conventions
11. Semantic and Structural aspects of HTML
Un saludo a todos!!
VN:F [1.7.0_948]
Rating: 3.0/5 (1 vote cast)
Posted on June 7, 2009 by Damian
Algunos de los lectores me escribieron acerca de como sería la forma correcta de escribir código CSS limpio , prolijo y ordenado de forma que sea más facil a la hora de hacer modificaciones o simplemente añadir funcionalidades.
De más cabe decir que todo lo que voy a exponer a continuación es simplemente mi punto de vista y la forma que suelo tener para trabajar en mis proyectos. Con esto quiero decir que según el tamaño y complejidad de nuestro sitio nos puede servir más o menos.
Partiendo de la estructura típica de una página web los pasos a seguir suelen ser:
1.- Definir los elementos de la página:
Al principio del archivo CSS suelo definir los diferentes elementos en común de la página como el body , a , h1, etc.
/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...
2.- Diferenciar las secciones de la página:
Algo que me ayuda a mantener el order es diferenciar las diferentes secciones mediante el uso de comentarios.
#container{...}
/*---- Top section ----*/
#header{...}
#navbar{...}
/*---- Contenido Principal ----*/
#menu{...}
#main{...}
/*---- Barra lateral ----*/
#sidebar{...}
/*---- Footer ----*/
#footer{...}
3.- Usar la tabulación
Para que el código quede más legible es bueno usar el tabulador. Por ejemplo si un elemento solo tiene 3 propiedades lo ponemos en la misma lista, en cambio si posee más atributos lo hacemos en diferentes
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:30px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
background:#444444;
text-decoration:none;
height:30px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}
#main{width:auto; display:block;}
4.- Definir clases en comun
Al final de el archivo CSS suelo declarar las clases que hay en comun como por ej:
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.spacer{clear:both; height:15px; display:block;}
Como mencione anteriormente estas más que reglas son apreciaciones personales que fui añadiendo con el tiempo a mi trabajo. Sobre todo viendo la forma de trabajar de otros y leyendo alguna que otra guia por internet.
Cuando el proyecto que tengo es más grande suelo utilizar multiples archivos CSS , por lo general tengo el default.css que lleva las reglas generales, y otros que voy enlazando segun la página que sea.
Espero que les haya servido de ayuda. En el próximo voy a hablar sobre la forma de nombrar a los diferentes elementos de una web de una forma más semántica.
VN:F [1.7.0_948]
Rating: 0.0/5 (0 votes cast)
Posted on May 26, 2009 by Damian
De la mano de Smashing Magazine me llega este impresionante pack con más de 450 íconos. El diseñador Oliver Twardowski , originario de Bonn, Alemania, es el encargado de esta fabulosa colección. Todos los íconos vienen en una resolución de 48×48 y formato png.
Siempre viene bien tener un pack como este , nunca se sabe que vamos a necesitar (sisi tengo como una especie de diógenes digital y guardo todo 
)
Links de descarga:
VN:F [1.7.0_948]
Rating: 0.0/5 (0 votes cast)
Posted on May 1, 2009 by Damian
En el primer post vimos como sería la estructura básica de una web y su correspondiente código HTML. En el segundo tutorial le aplicamos estilo mediante CSS y le añadimos una barra de navegación.
Bien , en esta última parte del tutorial vamos a ver como vamos a ir cargando las diferentes “secciones” de la web en lo que sería la columna izquierda de nuestra web. Para ello necesitamos comprobar el valor de la variable $_GET['page'] y segun sea su valor cargar un contenido u otro. Para ello hacemos lo siguiente:
<?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
Con esto tendriamos la web casi echa, con una columna derecha fija y la parte izquierda dinámica. Podriamos añadir un poquito más de estilo CSS para darle forma, resultando nuestro archivo final asi:
/* ------------------------------
Estructura de la página
------------------------------ */
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;
border:7px solid #CCCCCC;
padding:20px;
}
p{
font:11px Verdana;
text-align:justify;
}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;
border:1px solid #191919;
}
/****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{color:red;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
/***************footer*********************/
#footer{width:auto; display:block; height:24px;
border-top:1px solid;
text-align:center;
}
Y el código HTML de la siguiente forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
<body>
<div id="container">
<div id="topbar"> ...Contenido del topbar donde podemos poner un logo por ej </div>
<div id="navbar"><ul>
<li><a href="index.php?page=home"> Home</a></li>
<li><a href="index.php?page=registrarse"> Registrarse </a></li>
<li><a href="index.php?page=login"> Login</a></li>
<li><a href="index.php?page=contacto"> Contacto</a></li>
</ul>
</div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
<div id="main">
<div id="column_left">
<?php
//Este código lo ponemos dentro del div column_left que es el contenido que vamos a ir cambiando.
//Se comprueba que la variable page esta creada y su valor
if(isset($_GET['page']) && $_GET['page']=='registrarse'){
// include registrarse
include('include/in-registrar.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='login'){
// include login
include('include/in-login.php');
//Si no , se comprueba el valor nuevamente
} elseif(isset($_GET['page']) && $_GET['page']=='contacto'){
// include contacto
include('include/in-contacto.php');
// En cualquier otro caso , mostramos el home
} else {
include('include/in-home.php');
}
?>
</div>
<div id="column_right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<!-- Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
<div id="footer"> Ejemplo realizado para <a href="http://blog.timersys.com">Timersys</a>. </div>
</div>
</body>
</html>
Bueno , espero que esto les haya servido de ayuda. Porfavor comentes si ven algun que otro error o quieren cambiar algo.
Ejemplo online
Descargar ejemplo
VN:F [1.7.0_948]
Rating: 0.0/5 (0 votes cast)
Posted on April 29, 2009 by Damian
En el primer artículo vimos como quedaria la estructura de index.php mediante código html y explique un poco las diferentes secciones que tendrá la página web.
En este tutorial vamos a dar forma a esta estructura mediante una hoja de estilo en cascada o como mayormente conocemos , una hoja CSS.
Lo primero que tenemos que hacer es crear un archivo .css que en este caso le voy a poner default.css. Una vez creado lo guardamos en la carpeta CSS de nuestro sitio web. En default.css vamos a definir la estructura de la siguiente forma:
/* ------------------------------
Estructura de la página
------------------------------ */
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}
Como pueden ver los comentarios en CSS a diferencia de html se encierran entre /* …… y….. */
Una vez guardado nuestro archivo default.css solo nos queda linkearlo a nuestro index.php
Para ello introducimos dentro de las etiquetas <head </head> el siguiente código:
<link href="css/default.css" rel="stylesheet" type="text/css" />
Añadiendo los links a la barra de navegación
Para la barra de navegación vamos a usar una lista , y cada elemento de la lista será un link.
<ul>
<li><a href="index.php?page=home">Home</a></li>
<li><a href="index.php?page=registrarse">Registrarse</a></li>
<li><a href="index.php?page=login">Login</a></li>
<li><a href="index.php?page=contacto">Contácto</a></li>
</ul>
El código CSS para el navbar sería:
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
Por lo que el código completo quedaría de la siguiente forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
//ARCHIVO CSS AÑADIDO
<link href="css/default.css" rel="stylesheet" type="text/css" />
<title>page title</title>
</head>
<body>
<div id="container">
<div id="topbar"> ...Contenido del topbar... </div>
<div id="navbar"><ul>
<li><a href="index.php?page=home"> Home</a></li>
<li><a href="index.php?page=registrarse"> Registrarse </a></li>
<li><a href="index.php?page=login"> Login</a></li>
<li><a href="index.php?page=contacto"> Contácto</a></li>
</ul>
</div>
<!-- Sección principal en la cual cargaremos las páginas usando variables URL y la función de PHP include() -->
<div id="main">
<div id="column_left"> ...Contenido columna izq... </div>
<div id="column_right"> ...Contenido columna der... </div>
<!-- Esta sección soluciona un problema con el diseño CSS, forzando la altura de la sección main a ocupar la misma altura que las dos columnas(#columnt_left and #column_right) -->
<div class="spacer"></div>
<!-- close #main content -->
</div>
<!-- close #container -->
<div id="footer"> Ejemplo realizado para <a href="http://blog.timersys.com">Timersys</a>. </div>
</div>
</body>
</html>
Y el código CSS completo sería el siguiente:
/* ------------------------------
Estructura de la página
------------------------------ */
/*
#container tiene un ancho absoluto de 780 pixeles.
El ancho de los elentos internos estan establecidos a auto,
por lo que todos tendrán el ancho del elemento contenedor.
*/
#container{width:780px; margin:0 auto;}
/***************Header**********************/
#topbar{width:auto; display:block; height:80px;}
/****Barra de navegación*****/
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}
/***************Contenido principal************/
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
/*
div.spacer, soluciona el alto de #main en diseños con 2 columnas
*/
div.spacer{clear:both; height:10px; display:block;}
/***************footer*********************/
#footer{width:auto; display:block; height:24px;}
En el próximo tutorial les explico como cargar las páginas con la función include() de PHP. Saludos!!
VN:F [1.7.0_948]
Rating: 0.0/5 (0 votes cast)
« Older Entries
Con tu lector preferido.
Via Email.
Por Twitter.