Probar código HTML CSS y JS en línea

Muchas veces he necesitado probar código antes de ubicarlo en directamente en la web, tal vez como mala práctica, cuando me piden cambios rápidos en un sitio siempre lo hago de esta forma, encontré este sitio que me permite probar mi código.

http://codepen.io/

See the Pen Hguzc by Lili López Gutiérrez (@creandoweb) on CodePen.

Diseño cuenta de cobro persona natural en word para Colombia

Descargar el archivo !

Desde hace algún tiempo he buscado un diseño aceptable y profesional para enviar las cuentas de cobro a mis clientes, así que hoy me di a la tarea de crear un diseño, y me agrado tanto el resultado que deseo compartirlo con ustedes.

Solamente estoy ofreciendo un formato, no hay programación.

Dominios gratuitos en español

Los dominios gratuitos .tk, son la solución si no se cuenta con dinero para comprar un dominio, permiten una completa configuración. Clic sobre la siguiente imagén y comienza a buscar tu dominio

Codigo Youtube Ajustable (Responsive)

Si desean incluir un vídeo dentro de una plantilla de diseño adaptable (responsive), es posible que se encuentren con el inconveniente que el vídeo conserva la medida en ancho y alto que es generada en el código de YouTube. Para resolver esto solo debemos aplicar lo siguiente:

1. Adicionamos un div contenedor de video con la clase video-contenedor

            
        
   
        Código de iframe generado en youtube
        
   

2. Aplicamos las siguientes reglas css

   .video-contenedor {
       position: relative;
       padding-bottom: 56.25%;
       padding-top: 30px; height: 0; overflow: hidden;
   }
   
   .video-contenedor iframe,
   .video-contenedor object,
   .video-contenedor embed {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
              

Y listo con este código tenemos un vídeo que se ajusta a nuestro diseño!!

Generar font face en linea

Muchas veces cuando me solicitan un tipo especial de letra en un desarrollo web, lo incluyo directamente desde las fuentes de Google. (http://www.google.com/fonts/) Si la fuente está dentro de las opciones de Google, doy clic en uso rápido y el me da todas las opciones de insertar la fuente dentro de la web.

En la siguiente pantalla simplemente seleccionamos como deseamos insertar, estandar dentro del header de nuestra web, importando dentro de nuestro archivo css o incrustando con javascript.   Copiamos el código según vamos a usar.   Y luego aplicamos la fuente dentro de nuestro css en donde deseemos incluir esta fuente.

Si la fuente no se encuentra dentro de Google Font pero tenemos el archivo de la fuente, podemos generar un kit en el siguiente sitio web:  http://www.fontsquirrel.com/tools/webfont-generator

Pasos para usar el Kit de fuente:

1. Descomprima los archivos dentro de su carpeta css. 
2. Localizamos el archivo stylesheet que incluye el @font-face lo copiamos y pegamos dentro de nuestro archivos css. 
3. Usamos esta fuente donde corresponde. 

Generadores de CSS, ayuda con css

Cuando diseño sitios web siempre me apoyo en estos sitios que generan código CSS perfecto y fácil de usar.

Tamaños para Media Queries en diferentes dispositivos

A continuación presento algunas medidas estándar para los más comunes dispositivos a los que nos podemos enfrentar a la hora de diseñar sitios web adaptables.

Que es "CSS3 Media Queries"

Nos permite escribir CSS (hojas de estilo), que reconocen el tipo de medio por el cual se está visualizando nuestro sitio web. Con CSS se pregunta sobre el tipo de medio, detectando ciertas condiciones y permitiendo crear estilos especiales para cada salida que reconoce.

Funciones personalizada en hoja de calculo de Google Doc

Una función personalizada es una función que se llama directamente desde una celda en una hoja de cálculo de google doc utilizando la sintaxis = miFuncion ().

Una función personalizada generalmente sigue este formato:

function NombreFuncionPersonalizada(arg1, arg2, ..., argN) {
  // aquí va el código de la función
  ...
  // El valor retornado se mostrará en la celda que llama la función
  
  return ValorResultante;
}

Desarrollando para Google Docs: Mi primer Script

Vamos a crear un script que acceda a google drive. 

Existen dos manera de crear el script

• Desde Google Drive > Crear > Más > Secuencia  de comandos 

• Directamente desde este link:  https://script.google.com