Autor Tema: "Simple HTML 1".  (Leído 1478 veces)

Desconectado Habbolippo

  • PHPer@ Fijo
  • ***
  • Mensajes: 158
  • Karma: 3
  • Sexo: Masculino
  • Locutor de radio, programador y desarrollador web.
    • Ver Perfil
    • Matías YA. (Yáñez Alarcón)
"Simple HTML 1".
« 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:
Citar
-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í:
Citar
-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:

Código: [Seleccionar]
<!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>&nbsp;</p>
    <p style="color: #999">&nbsp;&nbsp;TITULO <span style="color: #666">WEB</span> <span style="color: #C00; font-weight: bold;">AQUI</span></p>
    <p>&nbsp;</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>&nbsp;</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">&nbsp;</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;">&nbsp;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">&nbsp;</td>
              </tr>
            </table></td>
          </tr>
        </table>
          <table width="308" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
          <table width="310" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td bgcolor="#000000" style="color: #999; font-size: 14px;">&nbsp;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&gt;
                <tr>
                  <td style="font-size: 12px">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
          </table>
          <p>&nbsp;</p>
          <p>&nbsp;</p></td>
        <td width="12">&nbsp;</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>
« Última modificación: 20 de Enero de 2012, 21:10:38 pm por Habbolippo »
Hago publicidades para radios, webs, etc...
Puedes ver mis demos en http://matiasya.com.nu/

Comunidad PHPeros

"Simple HTML 1".
« en: 20 de Enero de 2012, 21:07:53 pm »

Desconectado AlejoSketch

  • PHPero Avanzado
  • ****
  • Mensajes: 339
  • Karma: 12
  • Sexo: Masculino
  • Aprendiendo algo nuevo cada día!
    • Ver Perfil
Re:"Simple HTML 1".
« Respuesta #1 en: 20 de Enero de 2012, 21:31:25 pm »
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!  :)
« Última modificación: 20 de Enero de 2012, 21:33:00 pm por AlejoSketch »


Desconectado Habbolippo

  • PHPer@ Fijo
  • ***
  • Mensajes: 158
  • Karma: 3
  • Sexo: Masculino
  • Locutor de radio, programador y desarrollador web.
    • Ver Perfil
    • Matías YA. (Yáñez Alarcón)
Re:"Simple HTML 1".
« Respuesta #2 en: 20 de Enero de 2012, 21:40:51 pm »
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...
Hago publicidades para radios, webs, etc...
Puedes ver mis demos en http://matiasya.com.nu/

Desconectado Warlox

  • Moderadores PHP
  • PHPero Master
  • ****
  • Mensajes: 1.278
  • Karma: 77
  • Sexo: Masculino
  • A veces hay que aprender a correr antes de caminar
    • Ver Perfil
    • Página personal
Re:"Simple HTML 1".
« Respuesta #3 en: 01 de Octubre de 2012, 21:18:45 pm »
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 ^^
- Moderador de PHP


Desconectado Habbolippo

  • PHPer@ Fijo
  • ***
  • Mensajes: 158
  • Karma: 3
  • Sexo: Masculino
  • Locutor de radio, programador y desarrollador web.
    • Ver Perfil
    • Matías YA. (Yáñez Alarcón)
Re:"Simple HTML 1".
« Respuesta #4 en: 03 de Octubre de 2012, 18:21:44 pm »
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 :)
Hago publicidades para radios, webs, etc...
Puedes ver mis demos en http://matiasya.com.nu/

Desconectado CarlosRdrz

  • Moderador Global
  • PHPero Master
  • *****
  • Mensajes: 2.505
  • Karma: 131
  • Sexo: Masculino
  • A.k.a. TLX
    • Ver Perfil
Re:"Simple HTML 1".
« Respuesta #5 en: 03 de Octubre de 2012, 23:16:29 pm »
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!
La dedicación de mi respuesta sera directamente proporcional a la dedicación de tu pregunta.
Hacer códigos que entiendan las máquinas es fácil, lo difícil y realmente útil es hacer códigos que entiendan las personas.
http://twitter.com/CarlosRdrz
http://www.carlosrdrz.es

Desconectado OmaarV

  • PHPero Avanzado
  • ****
  • Mensajes: 304
  • Karma: 20
  • Sexo: Masculino
  • OmarVega
    • Ver Perfil
Re:"Simple HTML 1".
« Respuesta #6 en: 25 de Octubre de 2012, 19:08:56 pm »
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
No utilizes Dreamweaver es del diablo. Estoy completamente de acuerdo con Warlox Sublime Text 2 es la mejor opción.