Nuestras estrellas no son como tus estrellas


Como parte de una campaña publicitaria llamada 'Sponsors of tomorrow'(Patrocinadores del mañana -Literalmente-), hace ya más de un año, Intel lanzó una serie de anuncios para promocionar la marca como tal y no un producto en especifico. ¿Qué tienen de especial estos anuncios? Pues que nos muestran de una manera divertida la empresa y la marca, nos muestra las pequeñas diferencias entre el mundo "normal" y el que se vive dentro de la compañía. Yo no se ustedes, pero yo ya me quiero ir a trabajar a Intel :D

He aquí el vídeo que más me gustó y que conocí gracias a @seprh


Y un enlace a una lista que cree, para que puedan verlos todos

Sponsors of tomorrow, Intel

¡Saludos! @fferegrino :)

Reloj con SVG y Javascript



Súper código:

function reloj()
   { 
    hora = new Date() 
    hra = hora.getHours() 
    min = hora.getMinutes() 
    seg = hora.getSeconds() 
    document.getElementById("min").setAttribute("transform","rotate("+ min*6 +" 1000 350)");
    document.getElementById("seg").setAttribute("transform","rotate("+ seg*6 +" 1000 350)");
    document.getElementById("hra").setAttribute("transform","rotate("+ hra*30 +" 1000 350)");
    setTimeout("reloj()",1000);
   } 
En la línea 3 creamos un objeto de la clase Date, el cual contiene la fecha y hora actual del sistema en el que se ejecuta el script; con los gets obtenemos los valores de las horas, minutos y segundos.

Posteriormente, para realizar la animación de las manecillas, usamos el attributo transform de la etiqueta <path>, haciéndolo girar por la cantidad de minutos o segundos multiplicado por 6 ya que esperamos que recorra los 360 grados del circulo en 60 segundos, en cambio para marcar las horas tenemos que multiplicarlo por 30 ya que debe completar el circulo en tan solo 12 movimientos.

Por último hacemos que la función se llame a cada 1000 milisegundos.

Ahora aquí está el html básico requerido, desde luego falta aplicar estilos sobre la carátula del reloj y las manecillas para hacer que luzca mejor.

<svg id="svg-area" viewBox="0 0 2000 700">
    <circle cx="1000" cy="350" r="425" stroke="black" stroke-width="30" fill="transparent" />
    <circle cx="1000" cy="350" r="420" stroke="black" stroke-width="10" />
    <path id="seg" d="M 1000,350 l 0,-350" />
    <path id="min" d="M 1000,350 l 0,-300" />
    <path id="hra" d="M 1000,350 l 0,-250" />
    <circle id="central" cx="1000" cy="350" r="15"/>
</svg>

Descarga el código de el reloj ejemplo del post.

¡Saludos! @fferegrino :)

Wallpaper de Assassin's Creed

Color 1:

Color 2:



:/ Creo que llegó el momento de hacer tarea :/

¡Saludos! @fferegrino :)

Modificar atributo style de una etiqueta


¿Necesitas modificar el atributo style dentro de una etiqueta html?
Esto fácilmente se puede hacer desde JavaScript con el método setAttribute(), pero este nos sobreescribe todo el atributo; si solo quieres modificar una propiedad dentro de ese atributo, esta es la solución que yo propongo.

Para poner un ejemplo, digamos que tienes una etiqueta html como esta:
<div id="div1" style="margin:0 auto 0 auto; padding-bottom:10px; border: 2px solid #000;">

Después de una llamada a la función modEstilo(), como la siguiente:
modEstilo('div1','margin','3px 40px');

La etiqueta div queda así:
<div id="div1" style="margin: 3px 40px; padding-bottom:10px; border: 2px solid #000;">

Sigue leyendo para encontrar la referencia completa a la función y el código de esta.

Trofeos PS3

Como parte del ocio estas vacaciones y gracias a @danvega23 (no twittea), me puse a hacer esta "aplicación" que te genera una imagen que simula ser la notificación que ves cuando ganas un trofeo en algun juego de PS3.

Requirió PHP, en específico la librería GD para el tratamiento de imágenes además un poco de JavaScript :)




Este es el enlace a la aplicación: TrofeosPS3.



¡Saludos! @fferegrino :)

Árboles AVL

El objetivo es leer un archivo "csv" que contendrá los números que queremos insertar en un árbol AVL, sus tres recorridos y su altura serán impresos en un nuevo archivo junto con el camino de un número que se desee buscar.



Descarga del código y más información en 'Leer más' (LOL)

De CSV a int *

Esta es nuestra solución para leer datos del tipo entero de un archivo CSV:

Nuestra fución devuelve un apuntador y recibe una cadena; primero definimos y asignamos valores a las variables que ocuparemos.

int * leerDatos(char * arc){
    int * resultado = NULL;//Aquí guardaremos el resultado
    int numelem = 0;//El número de elementos en el archivo, necesario para reservar memoria dinámicamente
    int n=1;
    FILE * fp = fopen(arc, "r");//Arbimos el archivo 'arc' solo para lectura.
    char * linealeida = (char *)calloc(tamano,sizeof(char));
    char * auxlinea = (char *)calloc(tamano,sizeof(char));
    /* 'tamano' es el numero aproximado de caracteres en nuestro archivo recomendamos, definirlo previamente */
    char * tokens;
También, es recomendable tomar alguna acción si nuestro archivo no pudo ser abierto correctamente.

Leemos la línea, y la copiamos a un auxiliar dado que la función que usaremos para separar los valores de las comas destruye la cadena y la necesitaremos dos veces. La función más importante es strtok(), de la cual, en el vínculo encontrarás más información.

// :)
    fgets(linealeida, tamano, fp);
    strcpy(auxlinea,linealeida);
    tokens = strtok(linealeida, "," );//Comenzamos a separar los valores entre las comas.
    while((tokens = strtok( NULL, "," )) != NULL )//Continuamos hasta que no haya más que separar.
        numelem++;//Aumentamos la cantidad de elementos que hay.

Reservamos memoria para guardar todos los elementos, más uno, dado que dentro del arreglo también guardaremos la cantidad de dígitos que leímos del archivo. En otras palabras dentro del arreglo guardaremos el tamaño del arreglo menos uno.

En este bloque de código, también usamos el auxiliar de cadena ya que en el bloque anterior la cadena inicial linealeida quedó vacía gracias a la función strtok(). Información acerca de atoi()

resultado=(int *)malloc(sizeof(int)*(numelem+1));
    resultado[0] = numelem;//La entrada 0 de nuestro arreglo, guardará la longitud del mismo menos 1
    tokens = strtok(auxlinea, "," );//Comenzamos a separar los valores de nuevo
    do{//Con atoi() convertiremos de char * a int.
      resultado[n++]=atoi(tokens);
    }while((tokens = strtok( NULL, "," )) != NULL );
    fclose(fp);//Cerramos nuestro archivo para evitar problemas posteriores
    return resultado;//Por último, regresamos el arreglo con los datos
}

Si, parte de nuestro proyecto de Estructura de datos. (descarga el código completo)


Agradecimientos a mi querida compañera de equipo Iraís con quien hacer tarea hasta da gusto :)

¡Saludos! @fferegrino :)

Mis bookmarks de ocio (II)

Hace tiempo publiqué algunos de las páginas que me he encontrado por internet, hoy vuelvo a publicar otras tantas que me han parecido interesantes y como para perder el tiempo.

Ie6 Error - Pinta con el error de internet explorer 6 (Can your Mac do this?).

˙ɐuıƃɐd ɐʇsǝ uǝ sɐɹǝınb ǝnb oʇxǝʇ lǝ ɐǝʇloʌ - ʇxǝʇ dılɟ

YTTM - ¿Quieres recordar viejos tiempos?, elige un año para ver videos que se hicieron en ese tiempo.

Portrait - Para hacer avatares, ¡crea el tuyo!

(Y que @MarveenRuiz me diga que que pinche tan geek)

¡Saludos! @fferegrino :)

Nuevas vistas dinámicas en Blogger

Muchos dicen que Blogger es una plataforma deficiente, en lo cual no estoy de acuerdo. Si bien no ofrece los mismos servicios que servicios como WordPress o Tumblr, está trabajando para mejorarlo constantemente y una muestra de ello son las nuevas vistas dinámicas que ofrecen una interfaz grafica muy atractiva y recuerda la esencia táctil del los tablets.

Visita las vistas dinámicas de este blog en el siguiente enlace.

¡Saludos! @fferegrino :)