Home Authors Publicaciones porJesus Liñan

Jesus Liñan

946 PUBLICACIONES 1 COMENTARIOS
Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

0 2075

La tipografía es una parte muy importante del diseño web, pero a menudo descuidada. La implementación de @font-face de CSS posibilita usar en un sitio web tipografías que no estén instaladas en la PC del usuario. Pero podemos añadir caracteristicas extra con la ayuda de jQuery y tener un mejor control sobre cada tipogrfía en nuestro web. Veamos algunos plugins, una recopilación de CatWhoCode muy interesante:

FitText.js

fixtext

Lettering.js

lettering

Kern.js

kern

SlabText.js

slabtext

Bacon.js

bacon

Ver el resto de la recopilación en CatWhoCode

0 1154

Free online file converter es un servicio web que nos facilita convertir de una formato a otro diferentes tipo de archivos como audio, video, imagen, documentos y mas, de manera gratuita. Nos permite seleccionar el formato de destino (por ejemplo convertir a mp3), luego subir el archivo ó especificar una URL donde se encuentre el archivo fuente y finalmente convertir. Una alternativa a tanto software de conversión que existen por alli.

file converter

Enlace | Online Convert

 

1 3065

El siguiente código con PHP obtiene el número de “Me gusta” ó “Compatir” de Facebook, incluso número de comentarios de cualquier URL que proporciones.

share like

<?php
function facebook_shares($url){
 
    $fql  = "SELECT url, normalized_url, share_count, like_count, comment_count, ";
    $fql .= "total_count, commentsbox_count, comments_fbid, click_count FROM ";
    $fql .= "link_stat WHERE url = '".$url."'";
 
    $apifql="https://api.facebook.com/method/fql.query?format=json&query=".urlencode($fql);
    $fb_json=file_get_contents($apifql);
    return json_decode($fb_json);
 
}

$fb = facebook_shares('http://www.ribosomatic.com/articulos/tutorial-aplicacion-web-con-jquery-php-mysql-mantenimiento-de-datos/');
 
// facebook share count
echo $fb[0]->share_count.'<br />';
 
// facebook like count
echo $fb[0]->like_count.'<br />';
 
// facebook comment count
echo $fb[0]->comment_count.'<br />';

?>

Vía PaperMashup

0 1440

Piecon es un librería Javascript para generar dinamicamente un gráfico progresivo (como una barra de progreso con su nivel de porcentaje, pero con forma de gráfica) en favicon. 

Soporte: Chrome 15+, Firefox 9+, Opera 11+, IE 9, Safari 5+. Licencia MIT.

piecon

Uso básico

Piecon.setProgress(12);
Piecon.setProgress(25);
...
Piecon.reset();

Opciones:

Piecon.setOptions({
  color: '#ff0084', // Pie chart color
  background: '#bbb', // Empty pie chart color
  shadow: '#fff', // Outer ring color
  fallback: false // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
});

Enlace | Piecon

0 1470

La semana pasada mencionamos como redimensionar el contenido de una página web según el dispositivo de visualización (Redimensionar contenido de página web con CSS3 y HTML5), lo cual incluye las imágenes. Pues jQuery Picture es un pequeño plugin (2KB) que agrega soporte para las imágenes de una página web para que responda al diseño. Trabaja con el los elementos <figure>, y los nuevos <picture> y <source>. El otras palabras carga la imagen correspondiente de acuerdo a la dimensión del navegador.

jquery picture

Uso

$(function(){
    $('figure.responsive').picture();
});

En la parte del body:

<picture alt="A Half Brained Idea">
    <source src="assets/images/small.png">
    <source src="assets/images/medium.png" media="(min-width:440px)">
    <source src="assets/images/large.png" media="(min-width:600px)">
    <noscript>
        <img src="assets/images/large.png" alt="A Half Brained Idea">
    </noscript>
</picture>

Útil hasta que los nuevos elementos del HTML 5 sea aprobados por la mayoría de navegadores.

Enlace | jQuery Picture

0 5335

Windows 8, la nueva versión del sistema operativo de Microsoft, hace un gran cambio en cuanto a apariencia con su nueva interfaz de usuario Metro, la cual se puede extender a aplicaciones web también. De eso se trata Metro UI CSS que es un framework ó conjunto de estilos para crear sitios web con interfaz similar a Windows 8 Metro UI.  Puede ser usado con cualquier otro CSS framework sin problema.

metro ui css

Hay estilos para azulejos, imagenes, avisos, formularios, botones y tipografía. El proyecto no tiene nada que ver con Microsoft.

Enlace | Metro UI CSS

0 4406

El dividir un archivo AVI es un proceso realmente sencillo y no lleva mucho tiempo. El poder dividir un archivo AVI puede ser muy útil para partir un archivo grande y separarlos en partes más pequeñas y copiarlos a CD ó otro medio, por que si el archivo tiene más de 4GB de tamaño, los usuarios con dispositivos con sistema de archivo FAT32, se ven limitados por que limita añadir un archivo de más de 4GB. Lo cual incluye tratar de copiar un archivo AVI de mas 4GB en un unidad USB con sistema de archivos FAT32, para reproducirla en la PS3 (En este caso se podría usar el sistema de archivo NTFS pero para reproducir el AVI en la PS3 es una odisea hasta donde sé).

Para solucionar este problema, vamos a dividir el archivo usando VirtualDub, que es un software para Windows bajo licencia GNU. Empecemos por descargar una copia de VirtualDub  y descomprimir en su propia carpeta. También se puede obtener una versión de 64 bits.

Para este tutorial vamos a usar la versión de 64 bits. Luego de descargardo y descomprimido el programa en su propieda carpeta, abrir la aplicación Veedub64.exe.

explorer

Una vez abierto el programa hacer clic en el menu Open -> Open video file… y seleccionas el archivo AVI que deseas dividir (Caso tengas problemas ver abajo cómo solucionarlo).

Ahora antes de empezar a dividir el archivo de video tienes que hacer lo siguiente: Clic en el menu Video y verás que por defecto esta seleccionado Full processing mode, cambialo a Direct stream copy. Es importante esto por que no queremos que VirtualDub recodifique el archivo AVI dividido, ya que no solo tomará mas tiempo hacerlo sino que también degradará la calidad del video.

file open

Lo mismo tienes que hacer para el audio, clic en el menu Audio y por defecto ya deberá estar seleccionado Direct Strem Copy, bueno asegurate que sea así.

Ahora si a dividir el archivo de video! Puedes ver en la parte inferior de la previa del video, una barra de linea de tiempo con los frames que componen el video. Asegurate que el dial esté en el frame 0.

barra edit

Ahora mueve el dial hasta el punto de división deseado y presiona en el teclado la tecla de desplazamiento Fin ó End. Veras que esa parte está seleccionada.

select

También puedes usar los botones que resalto dentro del cuadro de borde rojo, que cumplen la misma función.

Una vez hecha la selección, clic en el menu File -> Save as AVI … y cambie el nombre de archivo a algo como video-parte1.avi para no sobreescribir el archivo original.

proceso

Una vez terminado el proceso, de vuelta a la ventana de VirtualDub presione la tecla Inicio ó Home así quitar la selección, ahora arrastre el dial hacia adelante al punto deseado y repetir el proceso anterior: presionar la tecla Fin ó End, una vez hecha la selección nuevamente ir a menu File -> Save as AVI … y darle nombre de segunda parte.

select 2

Cómo ven no es nada complicado, así podemos almacenar archivos AVI de gran tamaño en fracciones pequeñas en nuestro pendrive y reproducirlos en un PS3 por ejemplo.

Xvid Codec

Si no tienes instalado el Xvid Codec te mostrará el siguiente error (ver imagen). Para evitar esto tienes que descargar e instalar los codes Xvid, lo cual puedes hacerlo de su página web. Disponible para Windows y Linux.

error

Fuente | Techfleece.com

0 2615

WinRT es la abreviación de Windows Runtime, un modelo de programación implementado y presentado por Microsoft el año pasado y que facilita el desarrollo de aplicaciones software con estilo Metro UI (llamado ahora Modern UI) para su sistema operativo Windows 8. WinRT es una API basada en COM (Component Object Model) que podría ser definida como la plataforma encargada de servir aplicaciones Metro. WinRT ha sido diseñada para trabajar únicamente en sistemas operativos Windows 8. Mas información.

En este tutorial de MSDN se explica paso a paso como crear una aplicación, especificamente un lector de contenido RSS, con la ayuda de HTML 5, CSS 3 y WinJS, el framework JavaScript para Window 8. Teniendo las herramientas necesarias y siguiendo los pasos podemos terminar nuestra aplicación en 30 minutos ¿Será?

lector rss

Enlace | Windows 8 HTML5 WinRT App: How to create a small RSS reader in 30min

0 2108

BigVideo.js, un plugin para jQuery nos permite colocar ó fijar un video como fondo de página web, por lo general se coloca una imagen que se repite ó fotografía, etc; pero esta vez cambiando el tradicional esquema: un video ó una serie de videos. Bueno el plugin tambien acepta imagenes como fondo.

big video

Uso básico:

$(function() { var BV = new $.BigVideo(); BV.init(); BV.show('http://video-js.zencoder.com/oceans-clip.mp4'); });

Enlace | BigVideo.js

 

0 2457

Con la ayuda de las hojas de estilos ó CSS podemos agregar un diseño agradable a nuestra estructura HTML. Por otro lado los slider ó diapositivas es fundamental para mostrar fotografías o imágenes. Aplicando bien CSS en nuestro diseño podemos conseguir bonitas presentaciones. Aqui un ejemplo de tantos que me llama la atención por su caracteristica a pantalla completa y para imagenes grandes, el cual incluye como un explorador de imagenes en el menu inferior.

the big slide

Enlace | The big slide

SOCIAL

SOCIAL

0FansLike