La diferencia entre un buen diseñador de webs y un gran diseñador es la capacidad de saber tomar atajos y ahorrar tiempo sin comprometer la calidad del trabajo. Jason Arber de Pixelsurgeon ha puesto juntos 20 puntos y trucos superiores que debes utilizar para dar a tu trabajo ese toque profesional todo importante
1. Planeamiento
Cuando estás tecleando para empezar, es fácil pasar por alto el paso más obvio: planeamiento. Si está dibujando wireframes y diagramas del sitio en OmniGraffle o Visio, o aún en un papel, ahorrarás tiempo teniendo una descripción de tu diseño en el nivel del sitio y de la página antes de que comiences a construir. Los errores claros pueden ser detectados y ser solucionados antes de que sea demasiado tarde y hace que puedas explicar tus ideas a los clientes y a los colegas mucho más facil que agitando tus manos en el aire.
2. Hacerlo a mano
Aunque hay algunas herramientas excelentes para generar portales, tales como adobe golive y el adobe (antes Macromedia) Dreamweaver, los "monos" del código profesional prefiere cifrar a mano. ¿Son masoquistas locos? tal vez ;-).
Hay solamente una dirección, aprender el HTML, y eso es pelarse los codos con un cierto código real. Pero no tengas miedo : El HTML tiene una de las curvas de aprendizaje más fáciles que existe. Parecerá qie siempre puedes crear un Web básica con solamente un par de líneas. Escribir el código a mano asegura que tengas el código mas limpio y ajustado posible, que es la obsesión de todos los geeks del HTML.
No tires la copia de Golive o Dreamweaver todavía. Ambos tienen ambientes excelentes de la escritura del código, y tienen características útiles, tales como bloques plegables del código y de visiónes partidas así que de ti puede cifrar y ver los resultados al mismo tiempo. Si deseas intentar el codigo a mano , cualquier editor de texgto te servirá.
3. Hojas de estilo, enlazar o importar:
Hay dos maneras de unir un CSS externo a tu pagina HTML, y no todos los navegadores entienden ambos métodos. por ello se puede usar los dos metos para que tanto navegadores antiguos como modernos puedan ver el CSS.
El secreto es crear un stylesheet simple que trabaje en Netscape 4, con un CSS más complejo relegado a un stylesheet adicional se una que usando el @import, de que Netscape 4.x no hará caso:
<link rel="stylesheet" href="simple. css" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(simple.css);
</style>
4. Fondos más elegantes que los gradientes
El CSS te da mucho control ye flexibilidad sobre el ajuste de las imágenes de fondo. Y la gran cosa es que las imágenes de fondo no están limitadas al fondo del cuerpo y se puede también aplicar a cualquier DIV, nivel del bloque o elemento en línea.
Las imágenes que se incrustan convencionalmente o apenas a lo largo del eje X o de Y pueden ser fijadas con la página o seguir siendo fijas mientras que el resto de las imagenes de la página se deslizan sobre él. Los fondos pueden también ser compensados. Esto significa que es fácil crear un fondo verticalmente graduado, con gráficos que son solo ocupan algunos kilobytes de tamaño.
Usando el código siguiente, el archivo de background.png necesita solamente ser tan alto como el gradiente y un pixel de par en par. Este ejemplo asume que el gradiente se descolora en blanco, pero la cualidad del backgroundcolor podría ser cualquier valor.
cuerpo {fondo-color: blanco; fondo-imagen: URL (background.png); fondo-repetir: repetir-x; }
5. Comentarios
Cuando te vuelves a un sitio que diseñaste hace meses, no hay nada peor que intentar calcular lo que hiciste y procurar desenredar el espagueti del código. Hacerte un favor(y a cualquier persona que desee comprobar tu código) poniendo comentarios en tu HTML. Los comentarios pudieron agregar algun kilobyte, pero los ahorros del tiempo son inestimables.
El comentar también te anima a que mantengas tu código ordenado rompiéndolo en pedazos lógicos. El uso de algunos codificadores incluso comenta para crear un contenido para la página, que es solamente visible en la opinión del código.
Estar enterado que el HTML y el CSS utilizan dos diversas clases de comentar, así que puedes aprender la diferencia.
<! -- El HTML se comenta como esto y es incluido dentro de los soportes de ángulo y de dos guiones. La etiqueta de la abertura incluye una marca del exclamation. -->
/* los comentarios de CSS son incluidos por una raya vertical delantera y un asterisco. */
6. Utilizar PHP simple para construir sitios
No hay necesidad de ser un experto de PHP para comenzar a usarla en tu sitio. Si tu servidor soporta PHP, puedes rápidamente utilizar fácilmente ese lado del servidor para construir una biblioteca de elementos de uso general, insertándolos en tu pagina Web con un acoplamiento simple. Esto es bueno para los elementos como los menús, que pueden existir como solo caso, y significa que si agregas un nuevo artículo de menú o cambias el diseño, tú necesitaras cambiar solo el archivo incluido, que entonces pondrá al día el sitio entero.
Includes son simplemente snippets del código del HTML tales como una tabla o una lista desordenada. La página que llama a los includes debe terminar en .php e include se inserta usando el código simple siguiente:
<?php include("filename.html"); ?>
7. Dimensiona las fuentes usando el ems
A los diseñadores les encantan el especificar el tipo tamaños en pixeles porque corresponde fácilmente con lo que hace en Photoshop. Pero la especificación del tamaño para la web, los pixeles tienen una desventaja importante: no pueden ser redimensionados correctamente en Internet Explorer. Cuando la resolución de un monitor aumenta, la fuente no va acorde con el tamaño de tu diseñoasí que ¿cuál es la solución?
La respuesta es especificar la tipografia en em. Si no conoces la unidad, un em es respecto a la anchura una em minúsculo en una fuente, y con el CSS interno por defecto de un navegador, un em es equivalente a 16 pixeles. Fijar el tamaño de fuente en la etiqueta del cuerpo a 62.5 por ciento como esto:
body { font-size: 62.5% }
Esto hace un em de diez pixeles (16 x 62.5% = 10). Ahora puedes comparar tamaños del pixel con el em. Por ejemplo, para que se fije en 12 pixeles se podría expresar como 1.2em; 9 pixeles se convierten en 0.9em y así sucesivamente. Es más, el diseñador y el usuario son felices.
8. Hack en IE el modelo de caja
En IE nos encontraremos con bugs con el tamaño de capa cuando se usa width y margin, padding o border. Se conoce la solución para que el corte del modelo de la caja, que utiliza otro bug en el IE para forzarlo para utilizar las etiquetas que otros browsers ignoran. Si tienes un div especificado válido como este:
div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }
Terminarás con una caja de 120 px de altura en la mayoria de navegadores, pero solo 100 px en IE. La solución facil es el metodo "caja sin caja" colocando un div dentro de otro:
div {_ width: 100px;_ }
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }
Esto se aplica asi:
<div>
<div class="hack">
Tu contenido aqui:
</div>
</div>
9. Ahorrar el espacio
Nadie quiere crear formularios en HTML, especialmente en navegadores que insiten en la adición del padding (acolchado) alrededor de ellos sin ninguna razón. Para evitar eso agregamos este codigo a la hoja de estilo:
<form style="margin-top: 0; margin-bottom: 0;">
10. Prueba, prueba y prueba otra vez
Mientras que el Internet Explorer todavía domina el mercado del browser por un porcentaje enorme, su fuerza está siendo erosionada gradualmente por otros browsers tales como Firefox y ópera. Hay también un montón de gente que todavía usa los browsers arcaicos como versiones del pre-Mozilla de Netscape.
Es virtualmente imposible diseñar en grande para todos las versiones de navegadores, asi que es mejor decidir con que navegadores queremos que esté soportado. Los navegadores basados en Mozilla, Los navegadores basados en WebKit (como el Safari de Apple), KHTML (como Konqieror), Opera y las versiones de Internet Explorer son generalmente considerados para tener un patron de diseño seguro. Sin embargo, debes todavía ser un buen diseñador limpio asegurándote de que tu código no desagrade, de modo que incluso los navegadores sin apoyo puedan experimentar tu sitio - incluso en una forma limitada (véase el punto 14).
11. Ajustar a formato los fundamentales
En los viejos tiempos era simple. Si la imagen contenia colores planos como una insignia, utilizar un GIF. Si era fotográfica, utilizar un JPEG. Hay también un tercer formato pasado por alto, el png que viene en dos sabores: una versión de 8-bit que contiene 256 colores, como GIFs, y versiones 24-bits con la ayuda del canal de la alfa teniendo en cuenta transparencia variable.
Las malas noticias son que el Internet Explorer no soporta los canales de la alfa del png sin el recurir a un complejo codigo. Sin embargo, los PNGs de 8-bits comprime generalmente mucho más pequeña que la versión equivalente del GIF. A menos que necesites la animación, que PNGs no puede hacer(existe el mng pero aun no tiene mucho soporte), PNGs puede substituir GIFs en la mayoría de las situaciones, dando por resultado un ahorro total del tamaño del archivo.
JPEGs crea generalmente archivos más pequeños que los PNGs 24-bit, así que a menos que te estés aprovechando de la transparencia del canal de la alfa del png (www.alistapart.com/stories/pngopacity/), entonces JPEGs sigue siendo el mejor formato para las imágenes del tono continuo.
12.Los atrivutos "title" y "alt"
Asegurate de que todas tus imágenes hagan uso el alt y las etiquetas del título de modo que los lectores de la web puedan analizar correctamente tu página:
<img src="logo.gif" alt="logo" title="logo/" />
13. El formato correcto para las pseudo clases
Para los efectos del rollover del texto, es importante que las pseudo clases estén en la orden derecha, o no trabajarán correctamente en todos los browsers. La orden correcta es:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }
(para recordarlo se utiliza love & hate)
14. Utilizar la semántica
La semantica es separar el contenido de tu Web site de su aspecto. Idealmente, si quitaras las hojas de estilo, tu Web podria ser vista por navegadores más antiguos.
La colocación, el estilo y cierta cantidad de interactividad se pueden entonces agregar con las hojas de estilo y en los CSS.
15. Favicons
Favicons son los pequeños iconos del pixel 16x16 que aparecen en tus listas de los favoritos y las barras del título de Web site. Son rápidos y fáciles agregar: excepto un gráfico en formato de .ico (los usuarios del Mac pueden desear considerar el usar del convertidor gráfico pues Photoshop no apoya este formato) y ponerlo en la carpeta de la raíz de tu sitio. Es tan simple como éso.
16. Cambiar la capitalización (mayusculas) usando el CSS
Si necesitas algo escrito en capitales, tales como un título, más que reescribir una copia, dejar que el CSS hacer el trabajo de burro. El código siguiente transformará todo el texto con una cualidad h1 en todos los capitales, sin importar el formato.
h1 { text-transform: uppercase; }
17. Escribir el texto alrededor de las imágenes
Una manera rápida de envolver el texto alrededor de imágenes, es utilizar la imagen alineada a la izquierda o derecha. Mejor que el salto debajo de la imagen, así el texto fluirá a lo largo del borde.
<img src="image.jpg" align="left">
18. Juegos de caracteres universales
Los juegos de caracteres son una parte importante de la definición de una pagina Web, pero son probablemente el componente menos entendido. Los juegos de caracteres, que se definen en la sección principal invisible de un Web page, dicen al navegador qué método se está utilizando para codificar los caracteres. Un latín 1 de la ISO del charset (también conocido como ISO 8859-1) rendirá el código que encuentra con un alfabeto occidental básico, pero un charset JIS procurará leer cualquier carácter que encuentre en japonés.
Con tantos juegos de caracteres competentes, los problemas pueden ocurrir, especialmente al usar el juego de caracteres de MS Windows (que contiene ciertos caracteres que se puedan substituir por un espacio en blanco en otros sistemas operativos) o cuando varios idiomas necesitan aparecer en una sola página.
La respuesta es utilizar un solo juego de caracteres universal que pueda cubrir la mayoría de las eventualidades. Existe uno afortunadamente: UTF-8, que se basa en Unicode. Unicode es un estándar de la industria que se diseña para permitir el texto y símbolos de todas las idiomas que se representarán y manipuladas constantemente por las computadoras. UTF- 8 se está convirtiendo en rápidamente en la opción, y se debe incluir en la cabeza de tu Web page como esto:
<meta http-equiv="content-type" content="text/ html;charset=utf-8" />
19. Estilos de la impresión
Cuando la gente imprime paginas web, a menudo no está interesada en tus gráficos llamativos: apenas desean una versión simplificada de la página. Usando el CSS es posible crear un estilo separado que afecte solamente versiones impresas de tu sitio, más bien que teniendo que crear un nuevo HTML page o adaptar el existente. Agregas un estilo de la impresión exactamente de la misma manera que agregarías un stylesheet regular a tu página:
<link rel="stylesheet" type"text/css" href="print.css" media="print">
o
<style type="text/css" media="print"> @import url(print.css); </style>
Esto se asegura de que el CSS se aplique solamente a la salida impresa y no afecte cómo la página se ve en la pantalla. Con tu nuevo stylesheet impreso puedes asegurarte tienes texto negro sólido en un fondo blanco y quitar características extrañas para maximizar legibilidad.
20. Aprender de otros
Finalmente, una punto rápido y simple: aprender de los grandes sitios construidos por otros. El HTML de cualquier sitio es fácilmente accesible viendo el código de fuente de una página. Ver cómo otros han hecho cosas y aplicar tus métodos a tu propio trabajo.
Traducción de : Mtraker
Enlace original: Netmag
No hay comentarios:
Publicar un comentario