Gira el mundo 2 (una explicación de las animaciones en css3)

¿Notaron que parecía como si hubiera un tamaño intermedio cuando se pasa el puntero sobre nuestro elemento? eso se debe nuestro cerebro nos engaña, ya que crea una imagen intermedia para convertir el movimiento brusco en uno con armonía (o casi).

Si queremos que de verdad tenga un intermedio y sea más fluida la transición, utilizaremos la propiedad transition a la le indicamos las propiedades que aran el cambio en su valor y el tiempo, aunque también podemos darle otros valores como el tiempo que se tarda en comenzar y la forma en que transcurrirá el tiempo la transición solo utilizaremos las dos primeras.

Aquí está un ejemplo de como se utilizaría la propiedad.

#elemento{
    background:red;
    width:50px;
    height:30px;
    transition:width 1.5s;
}
#elemento:hover{
    width:100px;
}

Bueno supongo que en este punto ya entiendes cómo funciona una animación y sabes cómo realizar una animación simple en CSS pero falta ahora lo más importante la propiedad animation.
Como venía explicando las animaciones consisten en un sucesivo cambio de algo en imágenes creando así una ilusión de movimiento de ese algo, ahora esas imágenes se vendrían llamando fotogramas y en CSS los podemos utilizar con la palabra clave @keyframe (vendiera siendo en español como fotograma clave).

La propiedad animation se utiliza en la regla del elemento que queremos y como valor el nombre que le hemos puesto en a los fotogramas.
Podemos crear animaciones simples las cuales constaran solo de dos fotogramas las cuales serán el principio y el final, para esto podemos utilizar las palabras from(desde) to(hasta) o también 0% a 100%.
Al utilizar la segunda opción es posible agregar más fotogramas de forma intermediaria con un valor del 0% hasta el 100%.
Bueno después de todo esto lo que tenía que realizar mi compañero de trabajo era similar a un mundo girando y por eso el título de esta publicación, así que dejo a continuación el ejemple de una animación infinita y una transición la cual hace poner el elemento que representa al mundo al revés.
click aquí para ver el ejemplo

Hasta luego y buena suerte.

Fuentes:
mdn animation
Mi poquita experiencia.

Gira el mundo (una explicación de las animaciones en css3)

Hoy les traigo algo de CSS, sé que les debo la segunda parte de JavaScript y pronto se las traeré es que he estado un poco distraído con lol (nunca voy a salir de bronce), yo sé que hay muchos y muy buenos tutoriales por la red y esta publicación lo hago por petición de un compañero de trabajo que no conoce las animaciones en CSS3 y ya que me muevo bien en esa área me ofrecí a ayudarlo, así que no creo que haga daño otra publicación en la red.

La animación es un efecto visual producido por el sucesivo cambio de algo en imágenes y para entender esto hay que pensar que para ir del punto C al punto A tenemos que cruzar por el punto B, fácil de entender ¿verdad? podemos pensar en esto como si fueran fotos, si pasas muy rápido una serie de fotos en la que un objeto está en diferente posición en cada una de ellas, nos crearía una ilusión en la que el objeto está en movimiento, siendo más preciso así funciona la técnica de stop motion.

Ahora tienes una noción de cómo vamos a realizar una animación para esto necesitaremos de una serie de propiedades y valores claves en CSS3 que nos ayudaran o mejor dicho crearan por nosotros el efecto deseado, las propiedades a continuación son las principales:

animation: proporciona una forma de combinar valores css, dando un resultado intermedio a los valores dados de inicio y fin creando así una animación.
transform: cambia la apariencia de un elemento.
transition: controla los cambios de un elemento.

Les Comparto el código CSS para una transición la cual es el paso de un estado a otro activado por un evento.

/* para probar */
/* crea un div con id elemento */
#elemento{
    background:red;
    width:50px;
    height:30px;
}
#elemento:hover{
	width: 100px;
}

continuara..

Un loco repaso de JavaScript parte 1

Algo que es difícil cuando empiezas en el loco mundo de JavaScript son las funciones las cuales cumplen diferentes misiones en el lenguaje, si se es nuevo en la programación prepárese para darse en la cabeza con este post

var variable;

Esto es una variable un espacio cambiante que se almacena en memoria, las variables las utilizamos para realizar un proceso del cual obtendremos un resultado, simplificando datos entran se transforman mediante un proceso para convertirse en información (un resumen de toda la programación).

vamos a guardar un dos variables diferentes números (se pueden guardar diferentes tipos datos como números o caracteres esto se llaman tipos, en este momento no lo voy a explicar ya que es una guía breve y ya que JavaScript no es fuertemente tipado si desea aprender por completo este maravilloso lenguaje hay muchos libros y guías completísimas en su biblioteca local o puede buscar en internet).

var variable1 = 1 ;
var variable2 = 5;

console.log(variable1+variable2);

Si abrimos la consola del navegador (eso varía según tu navegador busca en herramientas) copiamos lo siguiente con todo y la declaración de las variables obtendremos como resultado 6, si usted desea vamos a cambiar los números agregar una tercera variable y cambiar la operación por una multiplicación hágalo así entenderá mucho mejor.

Ahora si usted es un poco más avanzado en la programación déjeme mostrarles algo llamado las funciones, cuando tenemos un montón de código y queremos reutilizar algunas partes de este realizamos funciones, están encargadas de realizar las operaciones que se encuentran en su interior cada vez sean llamadas, las funciones se declaran con la palabra ‘function’ y existen varias formas declarar una función y todas son los mismo, a continuación un ejemplo:

function pachecoDameLa(){
  console.log('pacheco dame la A');
   //si es menor de  15 años ignore el nombre de esta función
}

//tambien podemos declararla así:
var pachecoDameLa = function(){
    console.log('pacheco dame la A');
}

//que viene siendo la misma cosa, por cierto también esta esto
var pachecoDameLa = function pachecoDameLa(){
     console.log('pacheco dame la A');
}

y otra vez viene siendo la misma cosa. bueno tenemos declarada la función ahora en el momento de utilizarla para que funcione aremos lo siguiente, escribiremos el nombre de la función seguido de los paréntesis

pachecoDameLa();

lo cual retornara a la consola la frase ‘pacheco dame la A’ tantas veces como sea llamada la función, pero que tal si queremos que la función interactúe con el demás código «pues se le tiene» ya que recuerde introducimos los datos , pasa por un proceso y el resultado es información, ¿pero como? las funciones tiene variables llamadas parámetro hay es donde introduciremos los datos.

function pachecoDameLa(letra){
   console.log('pacheco dame la '+ letra);
}

Continuara…

pequeñas curiosidades que debes saber de los formularios

tablas

si como leen se suelen utilizar tablas para organizar los elementos como labels y inputs en los formularios para que visualmente se vean mas ordenados es una técnica de cross browser que  para simplificar el uso del css y minimizar los errores de compatibilidad que hay en los diferentes tipos de navegadores.

etiqueta label

son muy buenos para el facilitar manejo de un formulario de muchos campos la muchas  personas no los utiliza, pero estos pueden hacer una gran diferencia a la hora ux  al igual que las siguientes  propiedades.

propiedad tabindex

la propiedad tabindex se utiliza indicando una serie de números los cuales será el orden en que se saltara de campo en campo utilizando el tab es muy útil cuando se quiere realizar una aplicación que tiene una gran cantidad de campo y el usuario no tiene tiempo o para aquellas personas como muchos desarrolladores que escriben con una mano (es mas rápido que utilizar el mouse, no sean mal pensados).

propiedad acceskey

esta propiedad como las la anterior también se usa para facilitar el manejo de formularios,  presionando una tecla te dirige al campo.

ayudas a la hora de validad un formulario con HTML

hay propiedades que nos ayudaran a validar formularios sin enviarlos al backend asiendo parecer a la aplicación mas natural (aunque claramente también se pueden realizar estas con javascript)

required

esta propiedad se puede utilizar sola o con el valor required que es lo mismo y significa que el campo es obligatoria su completado si un campo tiene esta propiedad y esta vacío su formulario no enviara asta que este tenga algún valor

size

esta propiedad realmente no es para validar un campo pero nos ayuda en esta labor ya que la propiedad limita el uso de caracteres en un campo (por el ancho de los caracteres o el ancho de los pixeles en otro tipos de input)

maxLength

la máxima cantidad de caracteres que se pueden utilizar

rows/cols

esta propiedad es similar a las anteriores dos pero se utiliza para los textarea dando una cantidad de filas y columnas que no se pueden sobrepasar

pattern

esta propiedad permite que se revise un campo utilizando expresiones regulares

al fin y  al cavo también se debe utilizar la validación del formulario en lenguaje de backend por mayor seguridad y evitar inyecciones de código =S

Seudoelementos :after y: before

Son comúnmente utilizados para insertar contenido antes (before) y después (after)  de un elemento sin manipular el HTML , aunque no seria posible sin la propiedad content ya que no es posible crear un elemento si el contenido está vacío, aunque en algunos casos de efectos de bordes se puede hacer pero es obligatorio el uso del elemento content y de valor unas comillas.

Mas que todo es utilizan para crear efectos en los menú como colocar una imágenes que representen una sección o un movimiento como desplegar, como dije antes también se utilizan para efectos de bordes triangulares

puedes ver un ejemplo en el siguiente enlace

restaurar en mongo

Ejecutar mongorestore en Windows

Ala hora de ejecutar mongorestore en Windows se nos dificulta un poco ya que tenemos que tener el servidor ejecutándose y los comandos de mongo no se ejecutan de forma global como node.js si no que tenemos que estar en la carpeta de instalación de mongo

Es casi de la misma forma en la que arrancamos el servidor

Por ejemplo si utilizamos esta forma para iniciar el servidor

C:\\tu_carpeta_de_mongo\bin mongod dphat=’la ruta de tus datos’

(como yo soy un poco perezoso ha la hora de escribir la ruta realice un archivo bash así solo lo presiono como cualquier otro programa y listo) por si algo hay una buena guía en hackxcrack para aprender a programar en Shell y muchos video tutoriales en youtube que enseñan sobre la terminal (y uno muy bueno que enseña cómo instalar mongo y hacer un archivo bash )

Pero bueno sigamos con lo nuestro, tenemos la base de datos que queremos copiar en un archivo punto rar y si no solo tendremos el archivo punto BSON (el cual si extraen el rar hay estará) el archivo BSON es prácticamente un archivo JSON solo que en formato binario.

Si estamos en la carpeta bin y si no nos dirijimos a ella y escribimos lo siguiente

Mongorestore –-host localhost:27017 –-db elnombredetubd rutadondeesta

Lógicamente hay que cambiar esto “elnombredetubd rutadondeesta” por el nombre de la base de datos que hay en el archivo bson y la ruta con la dirección con todo y archivo en mi caso es asi

C:\mongodb-win32-x86_64-2.4.6\data \dump \archivo.bson

Espero que les haya servido =)

Intentando realizar las caritas

Me puse un reto con un ejemplo que me habían recomendado “unas caritas” están hechas a partir de bordes redondeados y animaciones

Aquí está el recurso http://bennettfeely.com/csscreatures/

Y aquí está mi primer intento http://jsfiddle.net/MmNZA/

y el segundo http://jsfiddle.net/5c6Tj/

JavaScript para lob (en winrt)

Buena hoy les traigo otra librería acabada de salir del horno con un montón de controles e iconos los cuales son gratis (por el momento). Esta especialmente diseñada para lo que se llama “línea de negocios” o siglas lob que según tengo entendido son un conjunto de cosas las cuales se relacionan, bueno creo que ya me pillaron no sé nada de negocios, a excepción de que tengo una tienda jeje. Bueno aun no la he utilizado pero lo que me llamo la atención es que es para metro lastimosamente aún no hay una para web de este tipo. Buena hoy les traigo otra librería acabada de salir del horno con un montón de controles e iconos los cuales son gratis (por el momento). Esta especialmente diseñada para lo que se llama “línea de negocios” o siglas lob que según tengo entendido son un conjunto de cosas las cuales se relacionan, bueno creo que ya me pillaron no sé nada de negocios, a excepción de que tengo una tienda jeje. Bueno aun no la he utilizado pero lo que me llamo la atención es que es para metro lastimosamente aún no hay una para web de este tipo.

Bueno sin más preámbulo dejo la susodicha librería. ir

 

otra libreria

navegando y leyendo como siempre en internet (por qué me da pereza ir a la biblioteca o al menos hasta que arreglen la fotocopiadora) me he encontrado este magnífico texto de uno de mis blogs preferidas, ¿curiosa librería verdad? quizá sea muy buena para aquellas aplicaciones en las cuales prevalece la lectura y  ojalá algún día algún maquetador de web de periódicos lea este articulo y la convierta en moda.

la cara posterior!

backface-visibility

Sinceramente no me acordaba de esta propiedad hace poco la he vuelto a ver, es una propiedad especial para 3d es la encargada de decidir cómo lucen los elementos que han sido transformados, ya que por defecto la cara posterior esta visible y la cual es transparente, eso nos molestaría para algunos tipos de efectos de trasformaciones 3d por que el texto quedaría al revés.