Bootstrap 4 Cheat Sheet

Aunque ya tenemos la versión 5 disponible (se pueden ver las diferencias entre la version 5 y la 4 aquí).

Un buen sitio donde ver un resumen de todas las clases de Bootstrap 4 de forma amigable es el siguiente: https://hackerthemes.com/bootstrap-cheatsheet/

Por otro lado, también tenemos la siguiente imagen:

 

Fuente

Herramientas para testeo de Microsoft Edge

Microsoft nos facilita una serie de herramientas gratuitas para mejorar el diseño y la accesibilidad de nuestros sitios web en las distintas plataformas.

Virtual machines
Te permite probar tu aplicación web desde cualquier versión de internet explorer mediante máquinas virtuales gratuitas que se pueden descargar. Disponibles para cualquier tipo de sistema operativo.
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/windows/

RemoteIE
Mediante esta herramienta puedes probar de forma remota gratis con Azure RemoteApp en Windows, Mac, iOS o Android.
https://developer.microsoft.com/en-us/microsoft-edge/tools/remote/

Generate screenshots
Herramienta que te muestra como se ve tu sitio web a través de 9 navegadores y dispositivos más comunes.
https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/

F12 Dev Tools
Uso de las propias herramientas de desarrollo de Microsoft Edge.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/

Site Scan
Herramienta que permite analizar tu sitio web. Detecta problemas de diseño y accesibilidad.
Analiza el código HTML, CSS y JavaScript de un sitio o aplicación web. Se advierte acerca de las prácticas tales como la especificación incompleta de las propiedades CSS, doctypes no válidos o incorrectos, y las versiones obsoletas de JavaScript populares de libraries.
https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/

Otras Herramientas que pueden resultar útiles:
BrowserStack: Prueba todos los navegadores y dispositivos de forma interactiva desde su dispositivo preferido
Borland Silk Test: Asegura la calidad de la aplicación web a través de navegadores de escritorio y móviles.
Kraken.io: Permite optimizar sus imágenes, ahorrar ancho de banda y mejorar los tiempos de carga.

Web Components

Web Components son un conjunto de normas que actualmente se producen por el W3C que permiten la creación de widgets o componentes reutilizables en los documentos web y aplicaciones web. La intención detrás de ellos es llevar a la ingeniería del software basada en componentes para la World Wide Web. El modelo de componentes permite la encapsulación y la interoperabilidad de los elementos HTML individuales.

El apoyo a la Web Components está presente en algunos navegadores basados en WebKit como Google Chrome y Opera y se encuentra en la versión de Mozilla Firefox Nightly (requiere un cambio de configuración manual). Internet Explorer de Microsoft no ha implementado ninguna especificación de componentes web todavía. [1] la compatibilidad hacia atrás con los navegadores más antiguos se implementa utilizando polyfills basadas en JavaScript.

Web Components consta de 4 elementos principales que se pueden usar por separado o todos juntos:
– Custom Elements: Se trata de utilizar elementos personalizados.

– Shadow DOM: es un DOM encapsulado que coexiste dentro del DOM padre y permite definir elementos complejos como componentes de video, entre otros, y poder tanto reutilizar estos componentes como personalizar los existentes.

– HTML Imports: Importar ficheros html.
Ejemplo de uso:

< head>
  //referenciamos el fichero html warnings.html 
  //dentro de ese fichero hay una estructura DOM
  < link rel="import" href="warnings.html">
< /head>
< body>
  ...
  < script>
    //importamos a la variable content el fichero html
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    //recuperamos a la variable domAux el DOM del fichero warning.html 
    //deseado.
    //en este caso es el DOM de un div cuyo class es warning
    var domAux = content.querySelector('.warning');

    //añadimos al body el DOM recuperado
    document.body.appendChild(domAux.cloneNode(true));
  < /script>
< /body>

– HTML Templates: Son platillas en HTML que se completan o utilizan con un modelo o colección de datos externa.

Wikipedia

Generador de partes de trabajo

Aplicación web que te genera los partes de horas mensuales en formato *.xls

DEMO: http://genparte.disastercode.com.es

GitHub: https://github.com/roberto-pf/GenParte

Tecnologías empleadas:
– Plugin Fullcalendar de Jquery para implementar el calendario.http://arshaw.com/fullcalendar/

– Nusoap, como servidor web para los días festivos.http://sourceforge.net/projects/nusoap/

– PHPExcel, como librería para generar la hoja de excel.http://phpexcel.codeplex.com/

– Diseño formularios:
Formly -> http://thrivingkings.com/read/Formly-The-form-glamorizer-for-jQuery
NiceForms -> http://www.emblematiq.com/lab/niceforms/

Portales para búsqueda de empleo TIC

• 
  InfoJobs
  InfoJobs es la bolsa de empleo online líder en el mercado español, tanto por el número de visitantes de su web, como por el volumen de ofertas de empleo … Destacar que ahora también disponden de una zona para freelance.
  
• TecnoEmpleo
  Se trata de un portal de Empleo Especializado en Informática Telecomunicaciones y Tecnologías.
  
• TicJob
  Se trata de un innovador portal de empleo y de gestión de carrera, dedicado exclusivamente a los perfiles TIC.
  
• Opcion Empleo
  Se trata de un buscador de buscadores. Busca empleos en España en mas de 10.000 páginas web distintas.
  
• Trabajo Freelance
  Publicación de proyectos y presupuestos en general. Búsqueda de trabajadores independientes (freelance) y empresas proveedoras de servicios en… Es uno de los mejores sitios para conseguir proyectos.
  
• Nubelo
  Plataforma de servicios freelance líder en países de habla hispana.
  

Destacar este blog donde llevan un listado con todas las mejores webs para conseguir trabajos como freelance. Está bastante actualizada:
http://blogdesarrollo.com/sitios-web-para-conseguir-trabajos-freelance/

Librerías javascript para crear presentaciones

Ahora, además de Microsoft Powerpoint, Keynote u otras aplicaciones conocidas también podemos crear presentaciones con html. Para ello podemos encontrar numerosas librerías javascript pensadas para crear presentaciones por medio de HTML y Javascript.

Te permiten realizar transiciones, pantalla completa o accesos con el teclado entre muchas otras cosas. La principal ventaja que tiene es que al estar realizadas vía web simplemente tendremos que acceder a la URL donde subamos la presentación y no tenemos que asegurarnos de que el ordenador en cuestión tenga instalado el software necesario.
También son ideales para presentar y explicar un servicio a nuevos visitantes de una forma original.

Algunos de ellos son:

– Deck.js: se trata de una bonita biblioteca JavaScript para crear presentaciones HTML.
Mientras que los usuarios avanzados pueden crear presentaciones totalmente personalizadas, hay plantillas y temas para los usuarios novatos que permiten crear una presentación de diapositivas estándar sin ningún esfuerzo.

– Fathom.js: Este es un plugin de jQuery que nos permite crear las diapositivas en HTML, con estilos CSS y controlar la lógica de presentación con JavaScript. La navegación se puede manejar con el teclado, el ratón o el desplazamiento. Permite la definición de un video para sincronizar con la presentación de diapositivas.

– Html5slides: está desarrollada por Google. Cuenta con 2 temas incorporados y soporta 3 diseños diferentes (normal, faux-widescreen, pantalla ancha).

– Dzslides: consiste en un solo archivo HTML5 CSS3 que hace de plantilla para construir las presentaciones. Además, dispone de 2 funcionalidades: incrustar el resultado en otras páginas y mostrar diapositivas con un panel de control.

– Slippy: es una librería de presentaciones HTML realizada con jQuery. Además de navegar por las diapositivas con las siguientes teclas prev-que permite a los usuarios ir directamente a la diapositiva que desee con las teclas numéricas.

– S5: Un popular motor de presentación basada en estándares que tiene todas las características que podemos pedir, incluyendo: auto-escalado de texto, representación incremental, URL única para cada diapositiva, indicador de progreso y mucho más…

Usar fuentes tipográficas para iconos con css (Icon-Fonts)

Ahora en lugar de utilizar los iconos basados en imágenes de toda la vida, se pueden usar los llamados icon-fonts. Estos iconos se sacan de fuentes tipográficas (esto quiere decir que los iconos no son imagenes, si no letras).

Si bien, puedes crearte tu propia fuente de iconos personalizada utilizando para ello algun programa tipo p.e. IcoMoon, existen ya numerosas fuentes ya creadas en la red. El uso de estas fuentes es muy sencillo, para poder utilizarlas basta con incluir las fuentes y los ficheros css.

Sitios web donde puedes descargarte icon-fonts:

Cikonss: Contiene alrededor de 40 icon-fonts.
Font Awesome: En su versión 3,2 ya contiene 361 icon-fonts.
Recopilatorio de otras webs con icon-fonts

CSS Media Types

CSS Media Types nos permite establecer propiedades CSS personalizadas según el medio donde se esté mostrando nuestra página web.

Como ejemplo, en Twitter Bootstrap lo utilizan de la siguiente manera:

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Lista con todos los Media Types:
all – Se utiliza para todos los dispositivos
aural – Se utiliza para la voz y los sintetizadores de sonido
braille – Se utiliza para los dispositivos táctiles braille
embossed – Se utiliza para impresoras braille paginados
handheld – Se utiliza para los dispositivos pequeños o de mano
print – Se utiliza para imprimir en impresoras
projection – Se utiliza para las presentaciones proyectadas, como diapositivas
screen – Se utiliza para las pantallas de ordenador
tty – Se utiliza para los medios de comunicación mediante una cuadrícula de caracteres de ancho fijo, como teletipos y terminales
tv – Se utiliza para los dispositivos de tipo televisión

Ejemplo de uso:

@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  p.test {font-weight:bold;}
  }

Aparte, tenemos el atributo media en el tag link que nos permite establecer hojas de estilos dinámicas según el dispositivo. Ver Aquí.

7 pasos para convertir una Fotografía en un Dibujo. Utilizando Photoshop

Paso 1. Duplicar capa.

Paso 2. Seleccionar esta nueva capa y ejecutar Control + I (también valdría hacer click en: imagen > ajustes > invertir).

Paso 3. Sobreexponer color a la capa.

Paso 4. Desenfocarla utilizando un filtro: filtro > desenfocar > desenfoque gaussiano (basta con poner un radio de 4 pixeles).

Paso 5. Click sobre el icono de «crear nueva capa de relleno y ajuste» y seleccionar Blanco/Negro.

Paso 6. Click sobre el icono de «crear nueva capa de relleno y ajuste» y seleccionar Tonos/Saturación (Bajar la saturación al mínimo).

Paso 7. Por último, click sobre el icono de «crear nueva capa de relleno y ajuste» y seleccionar Niveles (dejarla al gusto).

Carácteres Unicode