27
Dic

CSS Reset

author: Gahad       category: CSS, HTML

CSS Reset es una técnica para inicializar todos los estilos que vienen por defecto con los navegadores (margenes, alineaciones, alto de las lineas, tamaños de letra, etc.). La técnica consiste en eliminar completamente los estilos predefinidos por el navegador para luego empezar a trabajar con una hoja de estilos en blanco.

Una vez inicializados o reseteados los estilos, podemos empezar a construir los estilos con la garantía que serán mucho mas consistentes. Hay muchas técnicas para realizar esta eliminación de estilos, desde los muy sencillos hasta los muy completos.

Reset Básico
Consiste en utilizar el selector universal para el padding y margin de todos los elementos html. Es la técnica mas usada por la mayoría de los desarrolladores.

   * {
      padding: 0;
      margin: 0;
   }

Reset Universal Básico
Esta técnica consiste ademas de eliminar el padding y el margin, eliminar los estilos de las fuentes, los bordes y las alineaciones.

   * {
       vertical-align: baseline;
       font-weight: inherit;
       font-family: inherit;
       font-style: inherit;
       font-size: 100%;
       border: 0 none;
       outline: 0;
       padding: 0;
       margin: 0;
   }

Eric Meyer’s CSS Reset
Esa un tecnica desarrollada por Eric Meyer en Reset Reloaded y basado en YUI Reset CSS con algunas modificaciones. Esta técnicas es una de las mejor logradas y que resuelven la mayoría de problemas de estilos.

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
 
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
 }
 
 /* remember to define focus styles! */
 
 :focus {
     outline: 0;
 }
 
 body {
     line-height: 1;
     color: black;
     background: white;
 }
 
 ol, ul {
     list-style: none;
 }
 
 /* tables still need 'cellspacing="0"' in the markup */
 
 table {
     border-collapse: separate;
     border-spacing: 0;
 }
 
 caption, th, td {
     text-align: left;
     font-weight: normal;
 }
 
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: "";
 }
 
 blockquote, q {
     quotes: "" "";
 }

Hay que notar que no se utiliza el selector universal y el su lugar se listan todos los elementos a los que deseamos se aplique el reset, además de ello se eliminan los estilos de las listas, entre otros. Lo recomendable es guardar estas reglas en una hoja de estilos llamada reset.css e incluirlos en nuestro web antes de incluir los estilos propios del web.

0
,
27
Dic

SIFR: Utiliza cualquier tipo fuente en tus paginas

author: Gahad       category: CSS, HTML

Sucede mucha veces que cuando estamos diseñando nuestros sitios queremos darle a los títulos un estilo de fuente que no es del sistema y que en consecuencia el usuario que visita el sitio si no tiene esa fuente instalada va a ver ese título (o el elemento que fuera) con una fuente ‘normal’ lo cual hace que el sitio pierda el diseño original, a continuación te damos un tip para que puedas utilizar cualquier tipo de fuente en tus diseños webs sin utilizar imágenes, ni saliéndose de los estándares webs.

La solución se llama SIFR (Scalable Inman Flash Replacement) ¿Qué es SIRF y como funciona? SIFR es una mezcla de tecnologías (CSS, Flash y Javascript) que reemplaza el texto de la etiqueta indicada (<h1>, <p>, etc) por un archivo .SWF (Flash) que contiene embebida la fuente que queremos utilizar.

Click aquí para ver el ejemplo.

¿Cómo creamos el archivo SWF con la fuente embebida?

Antes que nada tienes que descargar el SIFR

Cuando descomprimamos el ZIP vamos a ver un archivo fuente del Flash “sifr.fla”, buscamos dentro de la librería el item font y le indicamos la fuente que queremos utilizar, luego debemos exportar nuestro movie flash en formato Flash 6.

Bien hasta aquí, ya tenemos el SWF con la fuente que queremos utilizar.

NOTA: El paquete SIFR trae unos SWF ya creados sí nos gustan esas fuentes podemos utilizar esos archivos.

¿Cómo funciona?

Lo primero que tenemos que hacer es dentro de la etiqueta HEAD insertar dos hojas de estilo…

1
2
3

 
<link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" />

Estos CSS los utiliza el Javascript que vamos a agregar a continuación para hacer la transformación. Ahora insertemos el Javascript que hace la “magia” …

1
2

 
<script src="sifr.js" type="text/javascript"/>

Aclaremos que así como lo escribimos, los archivos deben estar en el mismo directorio que la página HTML. Bien, ahora creemos la etiqueta con el texto que tendrá la fuente que creamos anteriormente, para esto sólo basta agregar dentro del body de nuestra página la etiqueta HTML sín nada raro, como hacemos siempre…

1
2

 
<h1>Hola este es un ejemplo de SIFR</h1>

Y ahora, para hacer que ese texto salga con la fuente que queremos, tenemos que agregar al final de la página, antes de cerrar el body (</BODY>) el siguiente código…

1
2
3
4
5
6
7

<script type="text/javascript">
<![CDATA[
  if(typeof sIFR == "function"){
  sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000",   sWmode:"transparent"}));  
 };
 //]]>
</script>

Veamos lo que hace la función replaceElement, en el primer parámetro (sSelector) indicamos que elemento va a reemplazar, en este caso el <h1> tengamos en cuenta que va a reemplazar todos los <h1> que encuentre en la página, sí queremos seleccionar un objeto específico podemos utilizar estas variantes…

1
2
3
4
5

<ul>
  <li>sSelector:"h5#titulo" - Sólo modificará el h5 con id igual a "titulo".</li>
  <li>sSelector:"h5.titulo"  - Sólo modificará los h5 con la clase "titulo".</li>
  <li>sSelector:"h2" - Sólo modificará los h2.</li>
</ul>

El segundo parámetro (“sFlashSrc”) indica el nombre del SWF donde está nuestra fuente embebida, el segundo parámetro indica el color de la fuente y el último sí el fondo es transparente.

Sí deseamos aplicar varios estilos, podemos hacerlo haciendo llamadas múltiples a la función replaceElement…

1
2
3
4

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"vandenkeere.swf", sColor:"#000000", sWmode:"transparent"})); };
sIFR.replaceElement(named({sSelector:"h2#titulo", sFlashSrc:"tradegothic.swf", sColor:"#666666", sWmode:"transparent"})); };
 
<strong>Observaciones generales </strong>

Este sistema es compatible con Mac, PC y Linux, en los navegadores de última generación (IE+5, Safari, Firefox, Opera +7). El peso del archivo SWF la mayoría de veces es menor a 10k lo cual no indica gran carga para nuestra página y en cuanto a la accesibilidad está totalmente garantizada ya que nuestro código HTML no se modifica para nada, teniendo en cuenta esto último tampoco perdemos palabras claves en los buscadores ya que el código esta totalmente visible.

0
, , ,
26
Dic

Evita SPAM invirtiendo tu email con CSS

author: Gahad       category: CSS, HTML

Via Sentido Web, descubrió un artículo muy interesante que nos muestra como el ingenio puede ayudarnos a solucionar problemas. En este caso, mediante el uso de la propiedad direction del CSS invertimos nuestro email para mostrarlo correctamente por pantalla.

1
2
3
4

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }  
</style>
<p><span class="test">moc.liamg@5k2oteina</span></p>

Interesante técnica para evitar el SPAM. Quizás como recomendación recomendaría email con algún punto en el nombre para hacer más dificil la lectura del mismo (xxx.yyy@zzzz.aaa). Incluso deberíamos tener en cuenta a los visitantes que no tengan activas las CSS e informar que ese correo está al revés aunque despues ocultemos el texto mediante CSS para los que si lo tengan activado.

0
21
Dic

11 sitios útiles para aprender y mejorar conocimientos de HTML

author: Gahad       category: HTML

Si eres diseñador gráfico, también debes aprender algunas cosas sencillas sobre escribir código o si simplemente eres nuevo en esto del diseño web, la siguiente lista te va ser muy útil, se trata de 11 sitios donde puedes aprender HTML o mejorar tus conocimientos, esta lista fue hache por el blog 1st Web Designer.

  1. HTML Dog
  2. W3Schools
  3. HTML Code Tutorials
  4. HTML Goodies
  5. Tizag Tutorials
  6. HTML Playground
  7. Your HTML Source
  8. EchoEcho
  9. Davesite
  10. BraveNet
  11. AListApart
0
RSS
© 2010 Minicápsulas
 WP Glamour