Comunidad PHPeros
Lenguajes => (X)HTML => Mensaje iniciado por: Habbolippo en 20 de Enero de 2012, 21:07:53 pm
-
Hola chicos, bueno miren, hace unos días, estaba hablando con un amigo que tenia muchas ganas de meterse en el mundo de las paginas webs, y me dice:
-Matías, sabes... yo se que estoy aprendiendo poco a poco HTML, pero ese no es mi problema...
-Cual es tu problema?
-Es el diseño, las imágenes, no me llevo bien con nada relacionado con el diseño...
Yo claramente le respondí:
-Mira, yo también, no se usar Photoshop, lo que hago lo hago con Photofiltre, pero el diseño no es todo, y te demostraré que se puede hacer una pagina web simple y sin ningún tipo de imagenes...
Bueno, ayer me puse a hacerlo, obviamente lo primero en lo que pensé era en lo que el quería, y era una web relacionada con la música y poner una radio online, también pensé en que no podía usar ninguna imagen...
Bueno, procedí y como estoy empezando a aprender a usar los divs y no quería liar mas la cosa, lo hice con tablas.
Sin nada mas que decir, para hacer el diseño que les mostraré a continuación lo único que use fue Adobe Dreamweaber, HTML y un poco de CSS...
Codigo HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
body {
background-color: #999;
font-family: Tahoma, Geneva, sans-serif;
}
a:link {
color: #000;
text-decoration: underline;
}
a:visited {
text-decoration: underline;
color: #000;
}
a:hover {
text-decoration: none;
color: #F03;
}
a:active {
text-decoration: underline;
color: #000;
}
-->
</style></head>
<body>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#08080A"><p> </p>
<p style="color: #999"> TITULO <span style="color: #666">WEB</span> <span style="color: #C00; font-weight: bold;">AQUI</span></p>
<p> </p></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" height="45" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#666"><table width="676" height="46" border="0" cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">INICIO</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">PROGRAMACION</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">LOCUTORES</a></td>
<td bgcolor="#333333" style="text-align: center; font-size: 24px;"><a href="#">TOP CHART</a></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="1014" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC" bordercolordark="#CCCCCC" bgcolor="#222222"><table width="1014" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9"> </td>
<td width="679"><table width="674" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #CCC"> TITULO</td>
</tr>
</table>
<table width="674" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="186" bgcolor="#FFFFFF">Aquí puedes poner un iframe a tu cutenews</td>
</tr>
</table></td>
<td width="314"><table width="310" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #999; font-size: 14px;"> TITULO</td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><table width="308" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 12px">Este box es expandible, puedes poner lo que quieras aquí ;)</td>
</tr>
tr>
<td style="font-size: 12px"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="308" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<table width="310" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000" style="color: #999; font-size: 14px;"> TITULO</td>
</tr>
<tr>
<td bgcolor="#CCCCCC"><table width="308" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 12px">Aqui tambien puedes poner lo que se te apetezca</td>
</tr>
tr>
<tr>
<td style="font-size: 12px"> </td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<p> </p></td>
<td width="12"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="1014" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Diseñado por <a href="http://elmatii.es/">Matias Yañez</a> ~ <span style="font-weight: bold">Simple HTML 1</span></td>
</tr>
</table>
</body>
</html>
-
Mira... la cuestión no esta en no usar imágenes estrictamente, pues las imágenes web no siempre significan elementos colmados de unos agraciados efectos y demás... pueden ser simples y conclusivos a la hora de crear un ambiente fluido y funcional.
Entiendo entonces que no tiene conocimientos en software útil para esto como es PhotoShop, pero para diseñar en él no necesitas saber todas y cada una de sus funciones, basta con ir aprendido lo más fácil, seguro que por internet no te liaras mucho para encontrar esas instrucciones.
También puedes probar descargando iconos e imágenes gratuitas (fíjate bien que sean para uso libre y que no requieran atribución para evitar problemas de derechos de autor) e incorporarlos a tu diseño.
En cuanto al html, las tablas son fáciles de manejar pero optimizar al maximo es algo importante en que pensar, por ejemplo en el contenedor donde has escrito "Aquí puedes poner un iframe..." debiste agregar una alineación vertical superior para evitar que el texto quede "flotando" en medio porque no es nada estético y será más dramático cuando dicha <td> alcance una altura superior.
Prueba también añadiendo atributos propios de la tabla o con css. por ejemplo el padding, así no quedará todo pegado de los limites o bordes propios de las celdas.
Fueron algunas recomendaciones nada más que espero tomes a bien, por otro lado me parece genial que simplemente te decidas a hacer una web "con solo html" para demostrarle a tu amigo un punto, es simplemente una personalidad curiosa. en fin es todo, adiós! :)
-
Muchas gracias, mira yo las recomendaciones la verdad ¡me las tomo muy bien! y es verdad, lo que pasa es que cuando uno hace un código a mano, sin utilizar ningún programa que te ayude, uno hace el código la forma mas simple y resumida posible, pero esta vez como he usado Dreamweaber, gran parte del código lo ha puesto el programa...
-
Mal, muy mal (sin ofender).
Las tablas son para tabular datos, no para diseñar, para eso mejor utiliza divs, o las nuevas etiquetas semánticas de HTML5 (header, nav, aside, article, section, footer, etc).
Además, Dreamweaver aparte de ser pesado, poco flexible y estéticamente feo, genera mucho código basura. Te recomiendo utilizar Sublime Text 2, es un potente editor de código, súper liviano, open source y los addons son escritos en Python, por lo que aparte de encontrar muchos en la red, puedes crearlos tú mismo.
Espero haber ayudado.
Saludos ^^
-
Mal, muy mal (sin ofender).
Las tablas son para tabular datos, no para diseñar, para eso mejor utiliza divs, o las nuevas etiquetas semánticas de HTML5 (header, nav, aside, article, section, footer, etc).
Además, Dreamweaver aparte de ser pesado, poco flexible y estéticamente feo, genera mucho código basura. Te recomiendo utilizar Sublime Text 2, es un potente editor de código, súper liviano, open source y los addons son escritos en Python, por lo que aparte de encontrar muchos en la red, puedes crearlos tú mismo.
Espero haber ayudado.
Saludos ^^
Hola Warlox, me atrevo a decir que cuando escribí este post a penas había salido HTML5 o quizás ni si siquiera estaban en esa versión.
Y si, lo sé. No debería abusar tanto de mis queridas tablas, de hecho ya hace unos meses ya me he pasado a los divs. También quiero añadir de que esto no es un ejemplo de código simplificado y ordenado, esto es solo para demostrar de que no hace falta el abuso de imágenes en una web. Internet y la programación avanza muy rápido y las imágenes se van quedando atrás, podemos hacer una imagen usando CSS3, y simplificar el código como bien has dicho tú usando los nuevos tags HTML5.
Un saludo :)
-
Lo único necesario para un diseño es texto.
Hay muchos ejemplos de sitios y blogs en internet hechos solo con texto y con un diseño IMPECABLE, de la más alta calidad, y mucho mejor que sitios con muchas imágenes.
Las imágenes son un elemento más y ya está. Con ellas se puede mejorar un diseño o se puede empeorar, pero no son para nada necesarias.
De hecho, a quien le interese el diseño web, antes que cualquier otra cosa le diría que estudiase la Tipografía.
De ese tema hay MUCHÍSIMO que leer, y para mí es lo mas básico y a la vez lo más importante.
Saludos!
-
You are so wrong in so many ways.
Pero creo que ya te lo dijeron, y no es por criticarte si no para ayudarte.
Te recomiendo este tutorial que yo escribe ya hace un tiempo Maquetando con xHTML/CSS (http://www.phperos.net/foro/index.php?topic=6537.0)
No utilizes Dreamweaver es del diablo. Estoy completamente de acuerdo con Warlox Sublime Text 2 es la mejor opción.