NayosX Ness

Uno cuando inicia un proyecto lo ideal es tener una muestra visual del concepto que se desea desarrollar (aprendido hasta solo unos días atrás) así que necesitamos hacer algo que se llama wireframe. Los wirefrime sirven para generalizar todo el contenido que tenemos en nuestro proyecto y se vuelve un punto de partida esencial, del cual tanto desarrollador como diseñador se pueden beneficiar. Aunque mi intención no es hablar de ello, mi intension es mostrar herramientas que nos puedan ayudar para ello. Teniendo en cuenta que un wireframe no tiene que ser bonito ni elegante ya que es solo para demostrar la idea general con cierta interacción futura. Aclaro desde antes que todas estas herramientas son instalables y no via web. Ademas cabe destacar que todo lo que se haga en ellos es exportable a un formato como PDF, Images, etc. Pencil Una gran aplicación con la cual iniciar algo como ello y lo mejor IT'S FREE, en toda la ambigüedad que tiene esa palabra en ingles. yED Bu...

Bueno el usar CSS para hacer efectos junto con javascript es el pan de cada día de muchos de los que nos dedicamos al front-end y uno que siempre me a gustado es crear tanto botones a partir de unas cuantas lineas con CSS, aunque claro, esto no sera un boton sino un circulo con texto dentro de él. El resultado sera algo como lo siguiente: 1 No es nada complicado hacer algo como eso cuando se tiene cierta practica y el código es el siguiente HTML Como el editor de mi blog no me deja crear lo que quiero, diré que simplemente es un DIV con un ID lógicamente llamado circulo y que dentro de el contiene el texto a mostrar (en el caso del ejemplo solo es un número) CSS #circulo { height: 100px; width: 100px; display: table-cell; text-align: center; font-size:36px; vertical-align: middle; border-radius: 50%; background: #8CC657; } Y bueno eso es todo para esta entrada, espero les haya gustado este micro-post, bueno ademas les colo un link para que lo vean en vivo...

Hagamos la suposición de que iniciamos un nuevo proyecto web e iniciamos a buscar alguna pagina que nos inspiren como colourlovers  y seleccionar uno que otro patron de colores. Ninguno nos gusto y entonces vamos y googleamos "plantillas html 5" y quizás la que nos gusta es de paga, con un poco de análisis nos damos cuenta que podemos hacer algo similar a eso con unas cuantas lineas de código, y que lo único que de verdad necesitamos es el esquema de colores. Es aqui donde entra esta extension de chrome ColorZilla es muy similar a lo que hacen las herramientas del navegador Firefox version Develop y a lo que yo estaba acostumbrado con instant Eyedropper , pero con el pro de "a un click de distancia" Y eso es lo que prácticamente hace esta app, copiar el código de color (Hexa, RGB) el cual seleccionamos, haciendo un historial de todos aquellos colores seleccionados en caso de que queramos reutilizar alguno y no lo hayamos anotado, entre algunas cuantas ...

Cuando trabajas por largas jornadas en diferentes proyectos una herramienta como lo es GDV (Google developer tools) te viene de agrado y si ya se que muchos han hecho post sobre esto y que esta en debate que es mejor, si la propuesta de Google oh la de Firefox, a mi ver estan en empate, aunque la version Dev de Firefox esta excelente no lo negare, quizas mas adelante haga una review de eso. Mientras tanto les dejo un video que encontre del señor Alex Que lo disfruten ya que esta excelente (excepto eso de llamarle simbolo de pesito, pufff)