Aprende Markdown en sencillos pasos

Lo acabo de leer en el blog de Victorhck y no he podido resistirme a compartirlo por aquí: un tutorial de Markdown (podéis hacerlo pulsando el link) similar al que hace poco os presenté por aquí de GitHub.

Markdown

Markdown es un lenguaje de marcado ligero, muy sencillo de leer y utilizar, que convierte el texto marcado a documentos XHTML. Se distribuye bajo licencia BSD y está presente en muchos CMS. Fue creado por John Gruber, contando con la aportación del programa html2text de Aaron Swartz.

Os dejo también, además de la fuente de dónde saqué el tutorial, otro enlace a una entrada de Victorhck sobre cómo usar Markdown en WordPress.

Os recomiendo echarle un ojo, ya que se trata de una herramienta muy útil que, por otra parte, es fácil de aprender.

Anuncios

HTML5: Lograr que un campo number acepte decimales

Una de las características de HTML5 era que permitía definir campos de tipos variados que ampliaban las opciones respecto al tradicional tipo text del HTML clásico.  Estos campos, además tienen la capacidad de autovalidarse.

Estos nuevos campos, por otra parte, requieren conocer todas sus opciones para exprimirlos a tope. Por ejemplo, si declaras un campo como el siguiente:

<input type="number" name="numero" />

En este caso te encontrarás con que si pones un número decimal la validación del navegador te dirá que está incorrecto. Pero tú sabes que no lo está ¿por qué pasa esto? Bueno, puedes arreglarlo de una forma muy simple: con el atributo step.

La mayoría de los navegadores mostrarán dos flechas en los campos de tipo number, para aumentar y decrecentar su valor. En step podemos definir cuánto queremos que este valor suba o baje en cada click. Por ejemplo:

<input type="number" step="5" name="numero" />

De esa form el valor irá cambiando de 5 en 5.

Pero esto de momento no nos soluciona el problema ¿cómo logramos que trague un decimal? Pues definiendo en step que el valor sea decimal.Si ponemos el valor de step como “0.01” nos permitirá meter decimales con dos cifras. Entonces si ponemos nuestro campo:

<input type="number" step="0.01" name="numero" />

Así tenemos un campo que admite dos cifras decimales, que suele ser lo más habitual. Si queremos más precisión entonces metemos más decimales en el step. Otra opción es añadir directamente el valor any a step. De esta forma permitirá meter tantos decimales como queramos.

<input type="number" step="any" name="numero" />

Hacer un triángulo con CSS3

¿Cómo puedo insertar la imagen de un triángulo en mi web sin usar imágenes? ¿Es posible hacerlo sólo con CSS3? En el pasado vimos como hacer un exágono o un octógono, y el triángulo es todavía más fácil:

Vamos a crear cuatro divs, cada uno de ellos para un triángulo en una dirección. Este sería el marcado HTML:

<div id="triangulo"></div>
<br/>
<div id="trianguloinvertido"></div>
<br/>
<div id="trianguloizquierda"></div>
<br />
<div id="trianguloderecha"></div>

Y ahora veamos el CSS:

#trianguloizquierda{
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-right:50px solid black;
	}

#trianguloderecha {
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-left: 50px solid black;
	}

#triangulo {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 50px solid black;
	}

#trianguloinvertido {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 50px solid black;
	}

En este jsfiddle le puedes echar un ojo al resultado.

Con este simple truco de CSS podrás crear botones en forma de flecha o triángulo que darán una mejor imagen a tu proyecto,pudiendo jugar con los tamaños y los colores para adaptarlos mejor a tu maquetación.

La propiedad css background-size y como hacerla funcionar en IE8

Si usas una imagen de fondo en alguna ocasión te habrás visto en la necesidad de usar una que se adapte al tamaño del elemento contenedor. La propiedad CSS3 background-size permite definir el tamaño de esta imagen, ya sea en píxeles o con un porcentaje relativo al tamaño del contenedor. Se definen dos parámetros para el tamaño: el primero es el alto y el segundo el ancho.

/*Este daría un alto de 250px y un ancho de 50*/
background-size:250px 50px; 
/*Este cubriría todo el contenedor*/
background-size:100% 100%;

Como os podéis imaginar, si andáis modificando tamaños la imagen se deformará al romperse la proporción de las medidas.

Existen además de estas medidas dos propiedades que podéis aplicar: cover y contain.

  • Contain: Esta propiedad escala la imagen de forma que mantenga las proporciones y ocupa o el alto o el ancho (dependiendo de la proporción)
  • Cover:Esta propiedad escala la imagen al mínimo tamaño, manteniendo también las proporciones, para que ocupe todo el contenedor. Es posible que esto provoque que parte de la imagen no se vea.
background-size:contain; 
background-size:cover;

Y ahora vamos con el problema (con el que me vi esta tarde): hemos acabado de maquetar, probamos en todos los navegadores y funciona. Entonces en Explorer empezamos con los modos de compatibilidad, y sin problemas en Explorer 10 y 9 pero, al llegar al 8, todo a tomar por culo… tras maldecir a Bill Gates, a Windows, al Explorer y compartir mis cuitas con los compañeros de curro toca buscar una solución… y aparece en StackOverflow, como no.

Con lo que basándome en eso, dejo el css como está, con su background-size que está furrulando en todos los navegadores (menos en Explorer 8 y previos) y en el marcado html modifico el div con el siguiente código, para que así la imagen ocupe todo el contenido:

<div style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";'></div>

En fin, hasta que no queden eliminados todos los IE8 habrá que recurrir a este truquito para hacer funcionar esto. Conste que no soy partidario de usar imágenes de fondo, la verdad.

Pie de página siempre al final de la web

Seguro que alguna vez os ha pasado que os trabajáis una maquetación que se ve de puta madre en vuestra pantalla de 15 pulgadas, pero al verla en una 22… ale, el pie al medio de la página. No hay contenido suficiente para llenar toda esa pantalla. Una opción es usar un posicionamiento absoluto, pero claro, si es una web con varias páginas igual en otra sí tienes suficiente contenido y entonces te queda un pie fijo en la parte de abajo del monitor aunque tengas que scrollear para ver toda la info.

Pero hay una solución, básicametne consiste en envolver todo el contenido superior al footer en un div contenedor, darle un alto mínimo del 100% de la pantalla, meterle debajo un margen negativo y allí insertar el pie. Ok, dicho así suena muy árido. Vamos con un ejemplo progresivo. Imaginemos que el que sigue es nuestro código:

<div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
<div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>

<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, pues lo primero es el marcado (luego ya nos ponemos con el CSS). La idea es, como he dicho, encerrar todo el contenido en un div que será un contenedor general, y por si acaso al final de este metemos un div vacío con la misión de evitar problemas si hay elementos flotados encima.

<div id="container"> <!--El container-->
  <div id="header">Aquí la cabecera</div>
    <div id="nav">
       <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Primera</a></li>
          <li><a href="#">Segunda</a></li>
       </ul>
     </div>
  <div id="content">Contenido interesante y original que te hará ganar posicionamiento en google.</div>
  <div class="clear"></div><!--El citado div para evitar problemas con "flotaciones"-->
</div><!--cerramos el container-->
<div id="footer">Y aquí ese pie que no se nos queda abajo.</div>

Bueno, eso está listo. Ahora toca ceeseesear (CSS) todo. Como ya he dicho, la idea es dar a todo el contenedor un tamaño mínimo del 100% de la altura, meterle un margen negativo por abajo y allí insertar el pie. Vamos a meter un pie de 50px de alto en el ejemplo.

/*Lo primero, todo el cuerpo que ocupe el 100%*/
html, body {    
   height: 100%; 
}

/*Lo segundo, el container, con algura mínima del 100% y un margen inferior negativo igual al alto que queramos darle al pie*/
#container {
   min-height: 100%;
   margin-bottom: -50px;
   position: relative;
}

/*Lo tercero, el pie con la altura deseada (igual al margen negativo de antes)*/
#footer {
   height: 50px;
   position: relative;
}

/*Y terminamos con el clear, que ha de ser tan alto como el pie y "limpiar" todos los floats*/
.clear{
   height: 50px;
   clear: both;
}

Y con esto ya está, en todos los navegadores superiores a IE6 (y como IE6 está descontinuado por Microsoft ni me voy a molestar en buscar solución, aunque creo que basta con cambiar el min-height del container por height).

Artículo dedicado con cariño a Gaius Baltar, que se lo había prometido en el feisbuck… jojojo

Editores WYSIWYG para tu web

¿Necesitas un editor WYSIWYG para integrar en tu página web? ¿Quieres mandar e-mails con texto enriquecido? ¿Quieres que tus usuarios puedan generar código con texto formateado? Ok, pues estas son algunas de las mejores opciones libres a las que puedes recurrir:

  • TinyMCE: Usado por WordPress, Facebook, Oracle Beehive, IBM Web CMS, Joomla, Episerver… en fin, son nombres que deberían dar confianza al usuario. TinyMCE incluye una enorme variedad de opciones que tú puedes configurar y decidir cuales usar. Es fácil de integrar y tiene una amplia documentación.
  • NicEditDos motivos para plantearse el uso de NicEdit son su ligereza y su fácil integración (sólo requiere dos líneas de código y lo tendrás funcionando). No tiene tantas opciones como el anterior pero son suficientes para el uso habitual del usuario, lo que además hará que para este sea más fácil e intuitivo usarlo.
  • openWYSIWYG: Reconozco que no lo he probado, pero me han hablado de él. Por lo que me han comentado el proyecto está un poco abandonado, así que es posible tener problemas de compatibilidad con las últimas versiones de algunos navegadores.
  • CKEditor: A nivel de funcionalidades implementadas está en la misma liga que TinyMCE, y es el editor utilizado por Drupal. Muy potente y con gran cantidad de opciones. Cuando lo veas parecerá que estás ante el procesador de texto de una suite ofimática.
    CKEditor
    CKEditor

     

En fin, con estos cuatro más o menos ya vemos todo lo que hay en el mercado. ¿Y cómo los implementas? Pues mira la documentación de cada uno. ¿Y cómo recoges los datos? Tranquilo, al procesar el formulario te vendrá como el resultado de un textarea normal, al menos en PHP (las versiones para Java o ASP ya vendrán en su documentación explicadas, digo yo).

Menú desplegable con jQuery

Write less, es la idea de jQuery. Usando este framework para Javascript puedes lograr resultados vistosos y mejorar la usabilidad de tu web. En este caso vamos a hacer un menú desplegable usando jQuery, que se abra cuando lo “sobrevolemos” con el ratón. Mi primera experiencia con menús desplegables fue en una empresa (no diré cual, no queda bien hablar mal de los jefes) que querían un menú desplegable en la página (era un menú de sólo dos opciones, por lo que no le veía mucho sentido a hacerlo así, pero eran paranoias del jefe).

Lo primero es descargar jQuery desde su página oficial e incluirlo en la cabecera de la página. Luego insertar el marcado html del menú tal que así:

        <ul class="dropdown">  
            <li class="active">Listado: <span>Ejemplos</span></li>  
            <li class="first"><a href="#">Ej 1</a></li>  
            <li><a href="#">Ej 2</a></li>  
            <li><a href="#">Ej 3</a></li>  
            <li class="last"><a href="#">Ej...</a></li>  
        </ul>  

En fin, lo siguiente son los estilos del menú, el css. En el marcado ya dimos a la lista la clase dropdown, lo que nos simplificará mucho ahora el aplicar estilos en el css.

  
ul.dropdown{  
    width: 250px;  
    border: 1px double #000;  
    border-radius: 5px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    background: #1a1a1a;  
    margin-top: 2em;  
}  
ul.dropdown li{  
    display: none;  
    font-size: 12px;  
}  
ul.dropdown li.active{  
    display: block;  
    color: #8c8c8c;  
    font-size: 14px;  
    padding: 12px;  
    color: #555;  
    border-top: 1px solid #313131;  
    border-radius: 4px;  
    -moz-border-radius: 4px;  
    -webkit-border-radius: 4px;  
}  
ul.dropdown li.active span{  
    padding-right: 24px;  
    color: #8c8c8c;  
}  
ul.dropdown li a{  
    display: block;  
    text-decoration: none;  
    padding: 8px 8px 8px 10px;  
    background: #1e1e1e;  
    border-bottom: 1px solid #171717;  
}  
ul.dropdown li.last a{  
    border:0;  
}  
ul.dropdown li.first a{  
    border-top: 3px solid #131313;  
}  
ul.dropdown li a:hover{  
    background: #232323;  
    color: #fff;  
    padding-left: 11px;  
}  

Marcado listo, estilos listos. Falta sólo la funcionalidad, el código javascript que haga furrular todo esto. De momento toda la lista está oculta menos el elemento de la clase active, por lo que tenemos que hacer que se muestre el resto cuando pasemos el ratón por encima, desaparezca cuando lo saquemos y además sea un código reutilizable. Aquí tenemos el procedimiento:


//variable global para almacenar el menú 
var menu = $("ul.dropdown");  
  
//captura de eventos  
$(this.document).ready(function(){  
    menu.mouseover(function(){  
        mostrar($(this).find("li"));  
    });  
    menu.mouseout(function(){  
        ocultar($(this));  
    });  
})  
  
//función que muestra los elementos del menú  
function mostrar(e){  
    e.show();  
}  
//función que los oculta
function ocultar(e){  
    e.find("li").hide();  
    e.find("li.active").show();  
}  

Y con esto ya tienes un menú desplegable chulo chulo que poner en tu web.