Buscando artículos sobre " Maquetación"
8-noviembre-2020
admin

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

7-junio-2016
admin

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.

30-noviembre-2014
admin

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

6-diciembre-2013
admin

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/

Pantalla Principal

Hoja de excel generada

2-noviembre-2013
admin

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/

13-agosto-2013
admin

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…

11-agosto-2013
admin

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

11-agosto-2013
admin

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í.

25-mayo-2013
admin

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).

27-abril-2013
admin

Carácteres Unicode

Code Result Description
C1 Controls
U+0080 PAD – Padding Character
U+0081 HOP – High Octet Preset
U+0082 BPH – Break Permitted Here
U+0083 NBH – No Break Here
U+0084 IND – Index
U+0085 NEL – Next Line
U+0086 SSA – Start of Selected Area
U+0087 ESA – End of Selected Area
U+0088 HTS – Character (Horizontal) Tabulation Set
U+0089 HTJ – Character (Horizontal) Tabulation with Justification
U+008A LTS – Line (Vertical) Tabulation Set
U+008B PLD – Partial Line Forward (Down)
U+008C PLU – Partial Line Backward (Up)
U+008D RI – Reverse Line Feed (Index)
U+008E SS2 – Single-Shift Two
U+008F SS3 – Single-Shift Three
U+0090 DCS – Device Control String
U+0091 PU1 – Private Use 1
U+0092 PU2 – Private Use 2
U+0093 STS – Set Transmit State
U+0094 CCH – Cancel character
U+0095 MW – Message Waiting
U+0096 SPA – Start of Protected Area
U+0097 EPA – End of Protected Area
U+0098 SOS – Start of String
U+0099 SGCI – Single Graphic Character Introducer
U+009A SCI – Single Character Introducer
U+009B CSI – Control Sequence Introducer
U+009C ST – String Terminator
U+009D OSC – Operating System Command
U+009E PM – Private Message
U+009F APC – Application Program Command
Latin-1 Punctuation and Symbols
U+00A0   Non-breaking space
U+00A1 ¡ Inverted Exclamation Mark
U+00A2 ¢ Cent sign
U+00A3 £ Pound sign
U+00A4 ¤ Currency sign
U+00A5 ¥ Yen sign
U+00A6 ¦ Broken bar
U+00A7 § Section sign
U+00A8 ¨ Diaeresis
U+00A9 © Copyright sign
U+00AA ª Feminine Ordinal Indicator
U+00AB « Left-pointing double angle quotation mark
U+00AC ¬ Not sign
U+00AD Soft hyphen
U+00AE ­® Registered sign
U+00AF ¯ Macron
U+00B0 ° Degree symbol
U+00B1 ± Plus-minus sign
U+00B2 ² Superscript two
U+00B3 ³ Superscript three
U+00B4 ´ Acute accent
U+00B5 µ Micro sign
U+00B6 Pilcrow sign
U+00B7 · Middle dot
U+00B8 ¸ Cedilla
U+00B9 ¹ Superscript one
U+00BA º Masculine ordinal indicator
U+00BB » Right-pointing double-angle quotation mark
U+00BC ¼ Vulgar fraction one quarter
U+00BD ½ Vulgar fraction one half
U+00BE ¾ Vulgar fraction three quarters
U+00BF ¿ Inverted Question Mark
Letters
U+00C0 À Latin Capital Letter A with grave
U+00C1 Á Latin Capital letter A with acute
U+00C2 Â Latin Capital letter A with circumflex
U+00C3 Ã Latin Capital letter A with tilde
U+00C4 Ä Latin Capital letter A with diaeresis
U+00C5 Å Latin Capital letter A with ring above
U+00C6 Æ Latin Capital letter AE
U+00C7 Ç Latin Capital letter C with cedilla
U+00C8 È Latin Capital letter E with grave
U+00C9 É Latin Capital letter E with acute
U+00CA Ê Latin Capital letter E with circumflex
U+00CB Ë Latin Capital letter E with diaeresis
U+00CC Ì Latin Capital letter I with grave
U+00CD Í Latin Capital letter I with acute
U+00CE Î Latin Capital letter I with circumflex
U+00CF Ï Latin Capital letter I with diaeresis
U+00D0 Ð Latin Capital letter Eth
U+00D1 Ñ Latin Capital letter N with tilde
U+00D2 Ò Latin Capital letter O with grave
U+00D3 Ó Latin Capital letter O with acute
U+00D4 Ô Latin Capital letter O with circumflex
U+00D5 Õ Latin Capital letter O with tilde
U+00D6 Ö Latin Capital letter O with diaeresis
Mathematical Operator
U+00D7 × Multiplication sign
Letters
U+00D8 Ø Latin Capital letter O with stroke
U+00D9 Ù Latin Capital letter U with grave
U+00DA Ú Latin Capital letter U with acute
U+00DB Û Latin Capital Letter U with circumflex
U+00DC Ü Latin Capital Letter U with diaeresis
U+00DD Ý Latin Capital Letter Y with acute
U+00DE Þ Latin Capital Letter Thorn
U+00DF ß Latin Small Letter sharp S
U+00E0 à Latin Small Letter A with grave
U+00E1 á Latin Small Letter A with acute
U+00E2 â Latin Small Letter A with circumflex
U+00E3 ã Latin Small Letter A with tilde
U+00E4 ä Latin Small Letter A with diaeresis
U+00E5 å Latin Small Letter A with ring above
U+00E6 æ Latin Small Letter AE
U+00E7 ç Latin Small Letter C with cedilla
U+00E8 è Latin Small Letter E with grave
U+00E9 é Latin Small Letter E with acute
U+00EA ê Latin Small Letter E with circumflex
U+00EB ë Latin Small Letter E with diaeresis
U+00EC ì Latin Small Letter I with grave
U+00ED í Latin Small Letter I with acute
U+00EE î Latin Small Letter I with circumflex
U+00EF ï Latin Small Letter I with diaeresis
U+00F0 ð Latin Small Letter Eth
U+00F1 ñ Latin Small Letter N with tilde
U+00F2 ò Latin Small Letter O with grave
U+00F3 ó Latin Small Letter O with acute
U+00F4 ô Latin Small Letter O with circumflex
U+00F5 õ Latin Small Letter O with tilde
U+00F6 ö Latin Small Letter O with diaeresis
Mathematical Operator
U+00F7 ÷ Division sign
Letters
U+00F8 ø Latin Small Letter O with stroke
U+00F9 ù Latin Small Letter U with grave
U+00FA ú Latin Small Letter U with acute
U+00FB û Latin Small Letter U with circumflex
U+00FC ü Latin Small Letter U with diaeresis
U+00FD ý Latin Small Letter Y with acute
U+00FE þ Latin Small Letter Thorn
U+00FF ÿ Latin Small Letter Y with diaeresis
Páginas:12»

Categorias

Linkedin