Buscando artículos sobre "CSS"
20-diciembre-2017
admin

Transiciones CSS. Mejorando el diseño.

A continuación se muestran dos links con información sobre transiciones.

https://www.bootply.com/tagged/transition
Se trata de una web que contiene diferentes ejemplos de transiciones realizadas con Bootstrap.


https://daneden.github.io/animate.css/
Se trata de una css que contiene un monton de animaciones muy interesantes. Se instala con npm mediante:

npm install animate.css --save

Y luego solo tienes que incluirla:

< head>
  < link rel="stylesheet" href="animate.min.css">
< /head>
1-noviembre-2014
admin

Angularjs

AngularJS es una librería Javascript que nos sirve para hacer aplicaciones muy avanzadas, con una experiencia de usuario de alto. Video de una charla donde los de desarrolloweb hablan sobre él:

Para el que quiera meterse algo más en código en éste artículo contiene un resumen bastante bueno que te permite empezar a aprender angularjs.

1-noviembre-2013
admin

Sencha Touch

Se trata de un framework para HTML5 que está pensado para desarrollar aplicaciones web para dispositivos móviles. Además, consigue efectos que aparentan ser los nativos tanto de dispositivos iOS como Android.

Sencha Touch nos permite aprovechar la potencia y flexibilidad de HTML5, CSS3 y JavaScript. Para ello hace uso de los nuevos elementos disponibles en la nueva especificación del estándar para utilizar video, audio, guardar datos offline. También consta de una librería con múltiples widgets de usuario y control para los eventos táctiles de los dispositivos. Además de los métodos estándares de eventos como touchstart y touchend, el framework añade una extensa lista de eventos útiles como tap, double tap o rotate entre muchos otros.

Enlaces de interes:
Sencha Touch
Documentación
Ejemplos
Tutoriales
Integración de Sencha Touch con PhoneGap

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-abril-2013
admin

JSBin, JSBeautifier y JSFiddle

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa.

En http://jsbin.com podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública. (Más info.)

JSBeautifier, te organiza y modifica estéticamente tu código Javascript, de modo que este sea más placentero a la vista y siga estándares de formatos de programación.

jsbeautifier.org

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
Al igual que as anteriores se trata de una herramienta 100% web. Lo que JSFiddle te ofrece es un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Con JSFiddle eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

JSFiddle

10-enero-2013
admin

Temas gratuitos para WordPress

Listado de diferentes páginas donde se pueden encontrar temas gratuitos para utilizar con WordPress.

http://www.free-premium-wordpress-themes.com

http://www.freepremiumwordpressthemes.info


http://www.freewpthemes.co

http://freepremiumthemes.com

16-noviembre-2012
admin

Herramientas online para crear nubes de etiquetas

Si deseas crear una de esas nubes de etiquetas donde se muestran las palabras claves o los temas más populares de un sitio web o blog. Ahora puedes hacerlo de forma sencilla mediante diversas herramientas online que nos permiten crear la nube de tags sin mucho esfuerzo.

Por orden de preferencia:
Tagxedo – http://www.tagxedo.com/app.html (Pide instalar Silverlight)
TagCrowdhttp://tagcrowd.com/
Tagulhttp://tagul.com/
TagCanvas – http://www.goat1000.com/tagcanvas.php
Wordlehttp://www.wordle.net/
ToCloudhttp://www.tocloud.com/

8-agosto-2012
admin

Crear un select multiple con checkbox . Utilizando JQuery.

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};

$(".multiselect").multiselect();

Fuente

Páginas:123»

Categorias

Linkedin