Snipplr: trozos de código

ByLuis

snipplr.pngA todos nos pasa que nos gusta reutilizar (copy/paste) aquellas trozos de código (snippet) que hemos creado en algún proyecto anterior y que no nos apetece volver a pensar cómo hacerlo. En vez de tener que buscar entre todo el código que tenemos y pasarse todo el tiempo diciendo “recuerdo haber hecho esto en tal sitio”, podemos usar Snipplr para guardar nuestros propios snippets o para usar los que comparten otros usuarios, organizados por lenguaje de programación y por tags.
Snipplr
Vía / Criterion

Similar Posts

| | | |

Cómo destacar en el menú de navegación el acceso en que nos encontramos

ByLuis

Imaginemos que tenemos un menú de navegación y queremos diferenciar la opción de Home, el About, el Contacto… ya que en esos momentos estamos en uno de ellos.

¿Cómo hacerlo? En Babblative nos enlazan algunos métodos para hacerlo:

Method 1 – WordPress: WordPress actually has this feature built-in. WP-List-Pages

Method 2 – PHP: Jem’s Trendy Active CSS Tabs or Matt’s Intelligent Menu’s. I’ve personally had middling success with PHP on a manually maintained site and little success with it on Textpattern.

Method 3 – Textpattern: You can either muck around with multiple templates, which is bloated and unnecessary, or you can use this method. If you choose to use the multiple templates then you’ll need to read how do I use a different page layout for each section?

Method 4 – Manually Maintained Sites: Use Hicksdesigns method to highlighting current page with CSS

Keep Reading: Keeping a ‘current state’ on navigation, Keeping Navigation Current With PHP, EasyNav, Setting the Current Menu State with CSS

Vía / Babblative

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Social Web: clon de Digg, Meneame o Reddit en PHP y MySQL

ByLuis

Social Web CMS es un sistema de noticias social al estilo de Digg o Menéame que está desarrollado en PHP y MySQL y que nos permite crear nuestro clon de forma sencilla.
Permite la inserción de artículos por parte de los usuarios, votar los artículos, realizar comentarios, valorar los comentarios, buscar contenidos, obtener feeds para secciones, categorías y usuarios, disponer de perfiles, mensajes privados … Además dispone de una administración que permite gestionar el anti-spam, bloquear URLs, importar RSS, …
Social Web CMS

Gutenberg Snippet block

ByLuis

Últimamente estoy trabajando bastante con Gutenberg, tiene sus cosas buenas y malas. Sea como sea, es el futuro de WordPress, así que toca aprender.

Lo más interesante de todo es poder usar lo que sabía de webpack, React, HMR, … Y para practicar he hecho un plugin que permite añadir snippets de código en los posts usando los bloques de Gutenberg

Para ello uso la librería highlight.js que permite destacar código de forma sencilla. Aquí un ejemplo

//  Import CSS.
import './scss/style.scss';
import './scss/editor.scss';
import icon from './icon';
import edit from './edit';
import save from './save';
import attributes from './attributes';

import { __ } from '@wordpress/i18n'; // Import __() from wp.i18n

export const name = 'sentidoweb/snippet';

export const settings = {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'Snippets editor', 'sw-snippet' ), // Block title.
	icon: icon,
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'code', 'sw-snippet' ),
		__( 'format', 'sw-snippet' ),
		__( 'snippet', 'sw-snippet' ),
	],

	attributes,
	edit,
	save,
};

Snippet Block en Github

|

10 razones por las que usar Silverlight

ByLuis

silverlight.pngEl título original dice ’10 razones por las que Silverlight cambiará la web’, y en mi opinión es pasarse un poco, entre otras cosas porque tampoco veo nada nuevo. Eso sí, también hay que reconocer que Silverlight parece una buena alternativa a Flash, sobre todo para los que desarrollen aplicaciones en .NET con Visual Studio. Microsoft sabe hacer las cosas y algo que gusta mucho a los jefes de proyectos es que todo esté conectado entre sí de forma fácil y rápida.

Las 10 características son las siguientes:

  • Vídeos de alta calidad: la misma tecnología que se usa para VC-1, el codec de los BluRay y HD DVD, es la que se usa para el streaming de los vídeos.
  • Multiplataforma y multinavegador: funcionará para cada plataforma y cada navegador, incluso gracias al proyecto Mono funcionará para Linux.
  • Unión de diseño gráfico y desarrollo: los desarrolladores de Visual Studio podrán crear aplicaciones para Silverlight de forma rápida, pudiendo separar el core de la aplicación de la parte gráfica.
  • Barato: tan solo es necesario disponer de IIS en nuestro servidor Windows, aunque debería funcionar en todos los servidores web. Este punto es un tanto confuso, el autor dice que es barato, pero por lo poco que he entendido, Silverlight es un plugin, como lo es el Flash Player, y su precio es gratuito. IIS no lo necesitas para nada, porque es como almacenar un archivo .swf o .png (si mal no creo). Ahora bien, ¿el precio de Visual Studio para desarrollar las aplicaciones o animaciones que funcionen en Silverlight?, mirando el precio de Flex (810€ la versión con Charting, 520€ la versión normal) y el precio de Visual Studio (1.284€ para Visual Studio 2005 Professional Edition con Suscripción MSDN Premium, aunque hay otro producto que se llama igual pero que cuesta 2.675€), no sé que pensar sobre lo barato que es.
  • Soporte a lenguajes de terceros: gracias a la nueva Dynamic Language Runtime es posible usar Ruby, Python y EcmaScript para desarrollar aplicaciones Silverlight y dejar a un lado .NET. ¿Pero esto es como cuando te dicen que puedes crear ficheros Excel, pero que tienes que tener instalado el Excel?, ¿puedes pasar de .NET y también de Visual Studio o solo de .NET?.
  • Depuración multiplataforma y multinavegador: gracias a las características que ofrece Visual Studio.
  • Mejor entorno de desarrollo del planeta: bueno, esto va en gustos, y al autor le debe gustar mucho Visual Studio.
  • Soporte a mashups: muy buena utilidad, obtenida gracias al soporte a LINQ y LINQ-to-XML por parte de Silverlight y a que los datos son accesibles mediante RSS, POX, REST y JSON.
  • Protección anticopia: evitando así que los contenidos como vídeos se puedan copiar como ocurre en los vídeos Flash como los que ofrece Youtube. Hasta que venga uno y consiga copiarlos…
  • Rapidez: habrá un gran incremento en la rapidez en las aplicaciones basadas en Ajax que usen Silverlight.

Otro punto que cuestiono es el alarde que hace el autor de que solo ocupa 2Mb., pero eso es solo el Silverlight, y según he entendido es necesario .NET, por lo que a esos 2Mb hay que añadirle los 22Mb. del framework de .NET. Demasiado si lo comparamos con el tamaño del Flash Player que es el que ejecuta las aplicaciones Flex.

Lo siento, me ha sido incapaz no dar mi opinión, que quizás parezca anti-microsoft, pero he leído en varios sitios cosas parecidas al siguiente artículo, y aunque seguro que Silverlight aporta buenas cosas a la web, tampoco hay que pasarse.

Top 10 Reasons Silverlight Will Change the Web

Vía / dzone