La tecnología llegó a nuestras vidas para quedarse, y es que actualmente cualquier servicio que necesitemos (hasta el que menos nos imaginamos) lo podemos tener desde nuestro teléfono. Llegar a un sitio específico, pedir comida, hacer cualquier pago, obtener información del acontecer mundial, etc, son solo algunas de las cosas que podemos conseguir con el uso de nuestras apps.

Según diferentes encuestadoras, solamente en México existe un total de 52 millones de dispositivos móviles en uso, y por supuesto, esta cifra irá creciendo con el pasar de los años. Por otro lado, México se encuentra en el tercer lugar del continente en el consumo de aplicaciones solo por detrás de Estados Unidos y Brasil respectivamente.

Jaime Reyes, secretario de Innovación en Ciencia y Tecnología apunta que México podría encontrar en el desarrollo de tecnología la solución necesaria para encaminar al país hacia un futuro económico más brillante. Así mismo, añade que Jalisco es un semillero de ingenieros e informáticos que contribuyen al crecimiento acelerado de este sector posicionado a Guadalajara como el “Silicon Valley de Latinoamerica”

La presencia de gigantes tecnologicos en esta región del país ha incrementado la capacidad de inversion en el ramo de la planeación, investigacion y ejecución de nuevas propuestas que satisfagan exitosamente, las exigencias cotidianas de los usuarios que buscan soluciones en tiempo real.

Hoy por hoy, Guadalajara es reconocida por ser el nodo tecnologico del país, promoviendo así de soluciones digitales a empresas nacionales e internacionales. Startups que nacieron en garages han logrado crecer y posicionarse como importantes empresas lideres en el sector gracias a su capacidad de desarrollo.

Un claro ejemplo de lo anterior es Ingeniería Pixel, una empresa joven liderada por su CEO Carlos Arroyo. Una pequeña startup que nacio en una cochera hoy se ha vuelto la empresa #1 en el desarrollo de apps en México y una de las Top 20 a nivel continental, lo cual, los ha llevado a crear lazos comerciales con empresas globales de banca y telecomunicaciones

En entrevista con el director de Ingeniería Pixel pudimos conocer datos relevantes que podrias considerar para implementar en tu app.

¿Qué tipo de apps son las que generan dinero?

• Todas las apps estan desarrolladas con un objetivo enonomico y bien llevadas pueden ser muy lucrativas. Ya sea monetizando mediante ads-publicidad, mejorar la presencia de una marca promoviendo sus productos y/o servicios o utilizando el modelo de “economia colabrorativa”

¿Qué es la economía colaborativa?

Es un modelo de negocio basado en el intercambio de bienes o servicios en el cual los participantes obtienen un beneficio a un menor costo ya que dicho intercambio se realiza utilizando medios propios, como podría ser un vehiculo particular, herramienta de trabajo ropa que no utilizas u otros elementos que sean de tu propiedad y quieras “rentarlos” a los demás usuarios.

¿Qué tipo de apps son las mas solicitadas?

Hemos podido comprobar que la temática de las apps varia de acuerdo al estado de la republica. En el norte del país, las apps para mejorar procesos en las empresas son muy solicitadas, mientras que en la capital, lo son las aplicaciones para transporte

¿Cuánto cuesta una app?

Esto depende de las funciones que compongan la plataforma, es importante determinar si se utilizara geolocalización, si la aplicación requiere de un sistema administrativo, si hay algún proceso de cobro dentro de la misma app, etc, sin embargo podemos decir que una aplicación sencilla se cotiza a partir de los $3,000 – $4,000 usd

¿Cuál es el proceso para realizar una aplicación móvil?

Entendemos que cada empresa implementa sus estrategias de desarrollo, nosotros en Ingeniería Pixel aplicamos 3 procesos que nos ayudan a realizar un producto funcional que cumpla con el objetivo para el cual fue desarrollado:

1. Work flow
En este proceso nos encargamos de documentar las funciones que tendrá la app

2. Wireframe
Ya que se tiene la información detallada se comienza con la usabilidad y análisis que tendrá el usuario al momento de interactuar con la app

3. Look and feel
Verificada la experiencia de usuario comenzamos con el bocetado de diseño para entregar un prototipo con el que el cliente pueda navegar la app y corroborar funciones

4. Codificación
Los 3 procesos anteriores nos ayudan a acelerar el flujo de trabajo y disminuir drásticamente los reprocesos por lo que llegada esta instancia podemos comenzar con la programación de la plataforma

¿Cuál es el tiempo de desarrollo de una app móvil?

Al igual que con el costo, el tiempo de realización dependerá de la cantidad de funciones a desarrollar. Una app sencilla podría tener un periodo de 3 a 5 semanas

¿Cual app es la mejor, la nativa o la hibrida?

Es cierto que las apps hibridas son más económicas pero personalmente prefiero las aplicaciones nativas ya que permiten explotar en su totalidad las características de tu dispositivo. Las apps hibridas pueden limitar el desempeño para algunos proyectos por lo que al ser una inversión, recomendamos establecer los alcances del proyecto y así determinar la solución adecuada

Conclusiones:

El desarrollo de aplicaciones móviles nos ofrece una gran cantidad de soluciones a necesidades cotidianas que hacen nuestra vida mas fácil.

En México existe la capacidad para competir con potencias mundiales como EUA y Alemania, así lo demuestra un emprendedor tapatío que ha sabido llevar su startup a lo mas alto

La entrada Ingeniería Pixel y el Silicon Valley de Latinoamerica se publicó primero en Punto Geek.

Carecterísticas a destacar de Uppy

• Podemos subir archivos desde el disco, Google Drive, Dropbox, Instgram, URL, webcam, etc.
• Soporta drag & drop.
• Tiene un diseño increíble y es ultra liviano.
• Subida de archivos con la posibilidad de reanudación.
• Apto para usar con CDN.
• Compatibilidad con React.
• Funciona perfectamente en dispositivos móviles.
• Core muy liviano, con diseño modular que nos permite agregar todo tipo de funciones.
• Open Source.

Lo mejor de todo es que Uppy es completamente gratuito y open source, así que podrán usarlo en cualquier tipo de proyecto que se les ocurra.

La entrada Uppy, el mejor file uploader para el navegador que vas a encontrar se publicó primero en Punto Geek.

Hace unos días compartí con ustedes un par de posts interesantes como el checklist para saber si tu front-end está completo o el directorio curado de cursos de programación gratis, y hoy les tengo otro que seguramente les va a encantar.

JS.Directory es un directorio curado muy útil donde frecuentemente van colgando recursos referentes al «ecosistema» JavaScript. Un lugar esencial para todo desarrollador que siempre está ávido de nuevos recursos de programación.

El directorio tiene (hasta el momento) las siguientes categorías:

• Ejemplos
• Boilerplates
• Tools
• Componentes
• Documentación
• Artículos
• Libros
• Videos
• Podcasts
• Comunidades

Día a día van agregando nuevos recursos al directorio, aunque si ustedes lo desean pueden agregar los suyos ya que es una lista abierta y colaborativa.

La entrada Directorio curado de recursos JavaScript se publicó primero en Punto Geek.

¿Para qué puede servir esta API? La verdad es que es realmente muy útil ya que la pueden usar desarrolladores para evitar que las personas se registren en sus servicios usando este tipo de direcciones de email.

Su uso es bastante simple, detecta si la dirección de mail es descartable o no :P. No hay mucho más para darle vueltas.

Lo bueno es que es una API gratuita que podemos usar en cualquier proyecto para evitar que la gente se registre con mails falsos o temporales en nuestros servicios, sitios web o donde sea.

La entrada API gratuita para detectar direcciones de email descartables se publicó primero en Punto Geek.

Estos themes son open source y los brinda la gente de hackerthemes para toda la comunidad. Ustedes pueden descargarlos y modificarlos a gusto, usarlos para proyectos comerciales, personales, o para lo que se les cante.

Los themes en cuestión son 4:

1. El theme default de Bootstrap 4 pero un poco tuneado.
2. Vibran Sea, un theme donde predomina el color azul y con muy buen diseño.
3. Bussines Tycoon, un theme con estilo profesional para usar en webs de servicios o negocios.
4. Neon Glow, un theme bien geek con colores tipo línea de comandos para hackers :P.

Estos themes pueden descargarse desde aquí. Y como yapa les cuento que tienen un par de recursos interesantes como un cheatsheet, un tutorial para crear tus propios themes con Sass, y un par de cosas más.

La entrada Algunos themes open source para Bootstrap 4 se publicó primero en Punto Geek.

Como bien lo dicen en el slogan de la web, se puede redimensionar el ícono de tu app a la velocidad de un cohete.

Redimensionar íconos para tus apps

1- Primero tienen que ingresar en el sitio en cuestión.

2- Elegir el ícono que quieran redimensionar (funciona mejor con imágenes cuadradas de 512×512 o 1024×1024).

3- Pueden elegir tildar la opción «Instant icon download» para descargar automáticamente todos los tamaños de ícono, si lo prefieren personalizado, saltear al paso 4.

4- Una vez subido el ícono tienen que bajar y seleccionar los tamaños de íconos a los cuales quieren redimensionar. Esto es personal y dependerá de qué uso le darán a la app y para qué plataforma está hecha.

5- Hagan click en la opción de descarga que corresponda, ya sea para bajar todos los íconos o solo los seleccionados.

Esta herramienta es completamente gratuita y estoy seguro que les ahorrará  muchísimo trabajo y tiempo a la hora de desarrollar sus apps.

La entrada Herramienta online para redimensionar el ícono de tu app a todos los tamaños necesarios se publicó primero en Punto Geek.

Voog

Conocido originalmente como Edicy, Voog se cambió su nombre el año pasado y rediseñó su página principal para tener unos colores eléctricos y modelos en poses sexuales (es en serio).

Pero dejando fuera la refundación de la marca, el creador de sitios web en sí se mantuvo prácticamente sin cambios (con algunas pequeñas modificaciones).

Voog ha sido desde siempre un decente creador de sitios web, pero a veces es demasiado simple y escaso. Comprado con los mejores creadores como Squarespace, Format y Weebly; no es tan sofisticado. En lo que se destaca es en el soportar diferentes idiomas, y es el mejor sino el único creador web que ofrece un gran trabajo con sitios en distintos lenguajes.

Yola

Yola es un editor único con una barra horizontal en la parte superior de la pantalla que tiene todo lo necesario para crear tu sitio web y configurarlo como quieras. Lo único malo que tiene es lo grande que es esa barra, que combinada con la barra del navegador se consume una buena parte de la pantalla.

El diseño en general es básico, y tiene un par de distracciones para cuando construyes, pero en sí las secciones están muy bien organizadas.

Tiene muchos widgets con toda clase de herramientas y opciones para agregar, como mapas de Google o formularios de contacto de simple creación.

Wix

 La intención de Wix es la de darle al usuario la opción de elegir. Tienen tantas características disponibles como es posible y les dejan a los usuarios arrastrar elementos en cualquier sitio de su página.

Pero todas estas opciones a veces tienen un costo. A veces Wix se siente aplastante, como que ponemos cosas en nuestras páginas sin haberlo pensado mucho. Esto depende mucho del sentido que el usuario termine dando a su sitio.

En general, Wix es el servicio más adecuado para los usuarios pacientes que se tomarán el tiempo necesario para sacar ventaja de todo lo que ofrece en su repertorio.

Weebly

 Es quizás uno de los más conocidos en español, o al menos yo veo anuncios sobre el creador en todos lados. Y desde la posibilidad de crear tiendas, hasta editar presentaciones de diapositivas, todo lo que se puede hacer en Weebly se disfruta. Mientras la mayoría de los creadores de páginas web son torpes y frustrantes, éste es sencillo y directo.

Lo que hace tan especial a este servicio es que cada tarea e interacción ha sido considerada profesionalmente. La interfaz es muy nítida.

Pero Weebly no solamente es sencilla de utilizar, también tiene muchas características útiles. Con su creador puedes crear tiendas de comercio electrónico, personalizar tu plantilla móvil, diseñar fondos personalizados, crear formas dinámicas y mucho más.

Squarespace

 Squarespace es un creador que tiene todos los aspectos pulidos. Las características están todas muy bien pensadas, con nada que se sienta inútil. En pocas palabras, Squarespace es el mejor creador de sitios webs disponible en la actualidad.

Estuve probando muchos creadores web y Squarespace es uno de los pocos con los que sentí que podía hacer todo lo que podría interesarme añadir en un sitio web. Es una herramienta muy flexible y sencilla de utilizar, que tiene toda clase de opciones y características.

De verdad, lo tienes que probar si quieres crear un sitio web y vas a entender por qué para mi es lo mejor.

Bueno, esos son los mejores 5 sitios para crear páginas web que yo recomiendo. No tengo acuerdos con ninguno y no tengo favoritismo por alguno, simplemente pongo los mejores entre los que probé y los que creo que merecen ser mencionados.

Si conoces otro mejor o tienes algún comentario para hacer, no dudes en utilizar la caja de comentarios o hablarme por Twitter (@AyalaManu).

La entrada Los mejores 5 sitios para crear páginas web se publicó primero en Punto Geek.

Todos estos cursos los pueden encontrar en el sitio de mclibre.org, allí tienen acceso desde los íconos que identifican los diferentes lenguajes: HTML-CSS, Python, XML, PHP y webapps; dentro de ésta última categoría van a encontrar muchas cosas como CMS, phpMyAdmin y mucho más.

Por último también tienen una sección de tests para evaluar sus conocimientos.

La entrada Cursos de desarrollo web gratis: HTML, CSS, Python, XML, PHP y webapps se publicó primero en Punto Geek.

Este directorio es el resultado de años de trabajo de recopilar recursos de sus creadores, los cuales decidieron compartir todo con la comunidad, algo invaluable sin dudas.

Lo bueno es que todos los recursos están organizados por categoría o tipo, entre los cuales encontramos arquitecturas, blogs y sitios de noticias, comunidades, elementos, servicios, inspiración, interfaces gráficas, código, y mucho más. Obviamente que todos esos recursos están orientados siempre al desarrollador web.

Enlace: wwwhere

Visto en Soft&Apps

La entrada Más de 600 recursos gratuitos para desarrolladores web se publicó primero en Punto Geek.

Científicos de la Universidad Tecnológica de Nanyang en Singapur dicen haber desarrollado una batería de iones de litio que puede ir de cero al 70% de la capacidad de energía en dos minutos. Las baterías de litio se utilizan comúnmente en los teléfonos y tablets.

Tal vez aún más importante, la batería dura mucho más tiempo que las que tenemos ahora, un atributo que podría impulsar la industria del automóvil eléctrico, según dijeron los desarrolladores.

La nueva batería se supone que debe durar 10.000 ciclos, una vida útil estimada en dos décadas y 10 veces más de lo que estamos acostumbrados.

En contraste, Apple dice que sus baterías de teléfonos están diseñados para «soportar hasta un 80% de su capacidad original tras 500 ciclos de carga completos». En general, cuanto más recargamos una batería, más se pierde su funcionamiento con el tiempo.

El avance aquí está en el ánodo o polo negativo de la batería, que tradicionalmente trabaja con grafito. El grafito se sustituye con un gel recién desarrollado a partir de un material «abundante, barato y seguro» llamado dióxido de titanio, que se encuentra en el suelo. También es un ingrediente activo en la protección solar.

Los investigadores fueron capaces de transformar el dióxido de titanio con forma esférica en forma de cordones tubulares que son 1.000 veces más delgados que un cabello humano. El gel acelera las reacciones que tienen lugar dentro de la nueva batería, ayudando a cargar la batería del teléfono mucho más rápido. La han llamado la «super batería».

La entrada La super batería: cargar la batería del teléfono en 2 minutos se publicó primero en Punto Geek.

En serio, no lo hagan, esperen que tenga un poco de tiempo libre o vean que este distraído, se levanto de su puesto o hizo algo diferente a ver la pantalla, lo mismo ocurre con aquellos que utilizan audífonos para concentrarse, no los interrumpan abruptamente, les aniquila toda la concentración y productividad que tengan en el momento.

Todos unidos en pro de desarrolladores felices.

Vía: Google+

La entrada Por qué no deberías interrumpir a un programador se publicó primero en Punto Geek.

Nuevos frameworks, librerías, tecnologías y lenguajes surgen todos los días, cada una tratando de solucionar un problema en concreto especialmente cuando se trata de librerías JavaScript, gracias a su enredado poder se puede solucionar problemas muy específicos en cuanto a sitios web se refiere, como la selección avanzada en el DOM, realizar AJAX, procesar formatos de información como JSON o CSV o algo más avanzado como un motor de animaciones CSS pero con JS.

La mayoría de estas increíbles librerías poseen un tamaño considerable lo que a largo plazo hará que tus aplicaciones y sitios web se vuelvan lentos, robustos y especialmente pesados, una de estas razones es que a veces la librería o el framework es un exceso para el problema que estás tratando de resolver, es por esto que siempre debes hacer una búsqueda detallada y muy bien seleccionada de las herramientas o librerías que utilizarás en tus proyectos.

Es por está razón que hoy les presento MicroJS, un sitio web que recopila cientos de librerías JavaScript para solucionar problemas muy específicos como la utilización de HTML5 en todos los navegadores, definición de funciones, clases y prototipos o controlar la historia del navegador o sus cookies, la principal característica es que todas las librerías pesan menos de 5 kb, es decir, está enfocado en pequeñas pero poderosas micro librerías, las cuales mejorarán el peso final de tu aplicación o sitio web.

MicroJS

La entrada MicroJS: Cientos de pequeñas librerías JavaScript para tus necesidades se publicó primero en Punto Geek.

Te cuento que ya no es necesario una aplicación de escritorio ni un editor de código ni un lento y pesado, pero robusto IDE para editar código, ahora ya existen aplicaciones y herramientas online para ejecutar cualquier código que necesites y ver los cambios en vivo a medida que escribes el código.

A continuación les dejo una lista de editores de código en vivo y en la web, todos absolutamente gratuitos y sin nada que envidiarle a un editor de código como aplicación de escritorio:

CodePen

CodePen te permite incluir tu HTML, CSS y JavaScript en los panales destinadas para cada tecnología web y ver en vivo como cambia la forma final de tu código mientras lo editas. Permite guardar todos tus códigos, compartirlos, incrustarlos en otros sitios web e incluso ejecutarlos en los smartphones.

JSFiddle

JSFiddle es uno de los más populares porque es uno de los más completos, te permite agregar cualquier librería de JavaScript o CSS, pero lo mejor es que ya tiene un listado con docenas de las librerías más populares como jQuery, Mootools, YUI, e incluso frameworks JavaScript como AngularJS o EmberJS, permite además hacer peticiones AJAX dentro del editor, limpiar el código JavaScript y guardar varias versiones de tu edición.

Mozilla Thimble

Mozilla Thimble es uno de los últimos esfuerzos por la empresa Mozilla, quien esta detrás del popular navegador Firefox, de llevar a más personas las hermosas capacidades de las tecnologías web, aunque no tiene muchas opciones, es uno de los más rápidos, como punto a favor te muestra errores en tu HTML rápidamente y subrayado de etiquetas, puedes incluir CSS y JavaScript en el documento sin problemas, pero no tiene guardado de código, así que ten cuidado con cerrar la pestaña del navegador.

dabblet

dabblet es un editor enfocado al CSS y HTML, tiene dos vistas principales, el HTML y el resultado o el CSS y el resultado, como lo pueden notar esta enfocado al CSS de la página, puedes escribir cualquier CSS que se te ocurra y funcionará directamente en la previsualización, la forma final de tu código se puede compartir o ver a pantalla completa, también guarda todos las versiones que hagas del código.

CSSDeck

CSSDeck, como su nombre lo indica está completamente enfocado al CSS, te muestra un panel pequeño para el HTML, uno más grande para el CSS y por último el panel con el resultado de tu código, como punto a favor de CSSDeck, puedes cambiar el fondo de la página de resultados y crear enlaces únicos que puedes compartir para que cualquiera vea tu nueva creación, por último puedes descargar el resultado en un archivo .html.

JSBin

Lo mejor para el final, JSBin es una completa joya en cuanto a editores de código online se refiere, puedes incluir CSS, JS y HTML, agregar una o varias de las más de 50 librerías que tiene disponibles para importar, por supuesto puedes compartir el código final, incrustarlo en sitios web seleccionando que paneles deseas mostrar en el resultado final, exportar el código a un Gist de Github, guardarlo como plantilla y navegar desde la misma ventana a través de todos tus Bins.

La entrada Herramientas online para probar código en vivo se publicó primero en Punto Geek.

Pero esta mágica bebida generadora de código no puede tomarse en cualquier taza, debe ser LA taza de café, y en el caso de los desarrolladores debe ser una taza de café con un buen lema relacionado con nuestra profesión. A continuación te dejo algunas tazas de café para desarrolladores y diseñadores web con muy buenos temas relacionados, para que disfrutes tu café como debe ser, con una buena taza:

La entrada Tazas de café para desarrolladores y diseñadores web se publicó primero en Punto Geek.

No me cansaré de mostrarles casi todos los días la capacidad de las nuevas tecnologías web, hace poco les comentaba sobre detallados símbolos de superheroes creados solo con una etiqueta HTML y el resto del trabajo lo hacía el CSS, en su versión número 3.

Hoy les traigo otra muestra de las cosas que se pueden llegar a crear solo con CSS3, en esta oportunidad son los logos de varias empresas: Apple, Dropbox, Evernote,  Github, Twitter, Facebook y LinkedIn creados a partir de varias formas y figuras recreadas con variadas técnicas de CSS3, en la página con el demo de los logos se puede observar el truco detrás del logo al pasar el mouse por encima del elemento.

El proyecto se puede utilizar libremente en tus proyectos, tan solo basta con descargar los archivos necesarios desde su repositorio en Github e incluirlos donde los necesites.

Logos in Pure CSS

La entrada Logos de empresas creados solo con CSS3 se publicó primero en Punto Geek.

¿Para qué imágenes, programas de edición como Photoshop o Illustrator si puedes hacer lo que quieras con CSS?

Una de las cosas que se pueden hacer solo con CSS y un elemento HTML son figuras geométricas, desde simples cuadros, círculos, triángulos hasta formas más complicadas como un Jinjiang o una estrella. Por hoy aprenderán como crear un simple triángulo, esta no es una explicación donde copias y pegas, realmente te explica el truco y como funciona para crear un triángulo solo con CSS:

¿Cómo se crea un triángulo con CSS? (Quería insertar la animación acá pero WordPress no lo permite)

Original creado por CSS-Tricks

La entrada Aprende como se crea un triángulo con CSS se publicó primero en Punto Geek.

El Desarrollo Web dejo de ser hace mucho tiempo tan solo HTML, CSS y JavaScript, cada día son más las tecnologías que se crean, usan y se inventan para crear aplicaciones web increíble, rápidas y sin nada que envidiarle a una aplicación de escritorio.

Conocer todas estas nuevas tecnologías y estar actualizado en ellas es una tarea complicada, pero siempre es mejor hacerlo que no de hacerlo. Cada tecnología tiene sus sitios web, su documentación, sus tutoriales, sus ayudas pero debido al número de recursos disponibles a veces no sabes que leer, que tutorial seguir para empezar a conocer la tecnología o donde encontrar la documentación, información indispensable cuando estás aprendiendo algo nuevo.

Bento llega para solucionar este problema, la página recopila todas las tecnologías en cuanto a desarrollo web se refiere, cuando haces click sobre una caja de la tecnología se resaltan las otras tecnologías que deberías aprender luego de la que seleccionaste, en mi experiencia, debo decir que es la forma correcta de empezar a desarrollar para la Web, está bien organizado y los pasos a seguir con los correctos.

Los enlaces a los que lleva cuando le haces click al título de la tecnología son las páginas más confiables y con la última información sobre la tecnología seleccionada, son las páginas con la documentación actualizada, ejemplos claros y con la definición clara de todo lo relacionado con el lenguaje o tecnología web.

No dejes de visitar esta página cada vez que tengas duda sobre algo con desarrollo web.

Bento

La entrada Bento: Todo lo que necesitas saber sobre desarrollo web en un solo lugar se publicó primero en Punto Geek.

Hace poco les compartía un PSD con todos los elementos de interfaz de usuario de Bootstrap 3, un recurso para los diseñadores de tu proyecto, pero hoy les traigo un recurso destinado a los desarrolladores, pero con las mismas características del PSD.

Se trata de Bootstrap Magic, una aplicación web que te permite mágicamente crear tu propio tema de Bootstrap 3, totalmente intuitivo rápido y por supuesto, gratis! :)

Lo único que tienes que haces y es la mayor parte del trabajo, es tener bien definido los colores, tamaños, fuentes, dimensiones e iconos que tendrá tu proyecto, una vez tengas todo listo entra a la aplicación y empieza a completar todos los campos que tengas que cambiar para volver realidad tu visión del diseño.

Absolutamente todo es personalizable, colores de las alertas, paneles, botones, navegación y demás, también la fuente y lo un elemento muy relevante, el tamaño, dimensiones, espaciado y margenes entre los elementos.

Una vez termines de crear tu tema, tan solo debes descargar el archivo CSS final, si eres más avanzado y estás trabajando con preprocesadores también puedes descargar el archivo LESS.

Bootstrap Magic

La entrada Crea tu propio tema para Bootstrap 3. se publicó primero en Punto Geek.

Seguramente sabrán que desde hace dos años existe HTML5 y otras tecnologías web que están cambiando la forma en que los usuarios completan los campos en los formularios de los sitios web.

En la página Native form elements creada por Joshua Jenkins se recopila todos los elementos nuevos de entrada de información, desde los más comunes como el texto hasta los más complejos como el selector de color o de rango.

La página te muestra el elemento en su estado normal, su estado deshabilitado y el HTML para crearlo correctamente, cabe mencionar que esta es tecnología que no está 100% estandarizada así que antes que la uses en un proyecto, asegúrate que es soportada por el navegador de tus usuarios.

Native form elements

La entrada Conoce los elementos de los formularios HTML5 se publicó primero en Punto Geek.

El código fuente de los programas que creamos difiere muchísimo de cualquier otro tipo de texto, como una carta, un documento, un email, ensayo o similares, porque en los códigos fuente hay caracteres diferentes y que necesitamos reconocer más rápido, como las llaves, los corchetes, los paréntesis y similares, además se debe diferenciar fácilmente caracteres similares como la l con el 1, la o con el 0, la letra e con el 3 y otros similares, es por esto fundamental que el editor de código de cualquier desarrollador utilice una fuente que cumpla con estas características, haciendo nuestra labor más fácil y eficiente.

Algunas de las fuentes más conocidas para programar es Consolas en Windows, Ubuntu Mono en Linux y Monaco en OSX pero en el mercado existen muchas alternativas libres y otras de pago que son igual o mejor que estas, como Inconsolata o Source Sans Pro, pero hoy les presento una muy buena llamada Hermit, una fuente creada específicamente para escribir código fuente, lo mejor de todo es que la fuente es completamente gratuita, la fuente viene con todos los caracteres más utilizados y un conjunto de caracteres especiales que a veces necesitamos, es muy fácil de leer, se ve bien en diferentes tamaños y por supuesto los caracteres similares son distinguibles a simple vista.

Puedes ver la especificación completa de la fuente en su presentación y descargarla gratis desde su sitio web.

La entrada Hermit: Fuente para programadores gratuita se publicó primero en Punto Geek.

Hoy me encuentro con un recurso que me hubiese servido muchísimo en semanas anteriores, se trata de extractCSS, un procesador de documentos HTML, en cualquiera de sus versiones, que extrae los ID, las clases y los estilos en línea o inline styles del documento en cuestión.

Posee algunas configuraciones, se puede seleccionar el tipo de información que se desea extraer del documento, el número de espacios de indentación y el estilo de las llaves de apertura en el CSS, cuando tengas todo listo solo debes copiar el HTML al que deseas extraer la estructura CSS y darle click al botón Extrac! verde, obtendrás al lado derecho la estructura de los estilos y si es el caso el estilo en línea de los elementos HTML que lo tengan.

extractCSS

La entrada extractCSS: Obtén la estructura, id’s, clases y estilos en línea de cualquier HTML se publicó primero en Punto Geek.

La unidad de medida EM es utilizada en el desarrollo web para definir tamaños escalables a los elementos, ya que utiliza como referencia el tamaño definido de la propiedad font-size, si este no está definido hereda el tamaño definido por el navegador, que normalmente son 16 px, así 1em = 16px, está unidad es utilizada muchísimo en estos días porque al ser una medida escalable es especialmente útil cuando se están creando sitios web que se necesita que sean Responsive o con diseño adaptativo.

Si estás creando un sitio web con diseño Responsive y apenas te enteras de esto o quieres actualizar uno que ya tengas listo y no quieres (nadie quiere) ponerte en la tarea de convertir manualmente todos los valores, ahora la tienes más fácil con Pixem, un convertidor de PX a EM y viceversa, lo único que tienes que hacer en copiar y pegar todo tu CSS, así es todo, sin límites, definir una base de tamaño de píxeles y darle click al botón Convert, obtendrás al otro lado el CSS pero con todos los tamaños, medidas y demás valores numéricos en valores de la unidad EM.

Más fácil imposible: Pixem

La entrada Convierte de PX a EM de todo tu CSS con Pixem se publicó primero en Punto Geek.

La nueva versión del popular framework frontend Twitter Bootstrap ya está disponible para su descarga desde su sitio oficial, la versión número 3 fue escrita desde cero, absolutamente todo el código cambio por lo que no es en lo absoluto recomendable simplemente cambiar el enlace de sus archivos. NO lo hagas, toda tu aplicación web se corromperá por completo.

Aún así como nueva versión que es viene con muchísimas mejoras para el bien de todos, entre ellas está su enfoque Mobile First, es decir, está nueva entrega está diseñada para tener en cuenta primero smartphones y tablets que portátiles o PC’s de escritorio cuando se está creando el sitio web, ya no es necesario importar dos archivos CSS, ahora todo el código está en un solo, bootstrap.css.

Grilla

La grilla o grid en inglés fue modificada por completo y es una de las cosas que más cambiaron, ahora viene en tres tamaños diferentes, Diminuto (Smartphones .col-*), Pequeño (Tablets .col-sm-*) e Intermedio y Grande (Portátiles y PC’s de escritorio .col-lg-*), cada uno de estos tamaños con su respectivas clases te da el control absoluto sobre como se verá tu aplicación web en cada dispositivos. Lo único que tienes que hacer es combinarlas respecto a tus necesidades.

<div class="row">
  <div class="col-12 col-lg-8">8</div>
  <div class="col-6 col-lg-4">4</div>
</div>

Diseño Plano

Siguiendo la tendencia que ha crecido en el último año, ahora el diseño de Twitter Bootstrap es totalmente plano o flat, los botones, las alertas, la navegación y el resto de los elementos tienen un diseño sencillo, lo que facilita muchísimo su personalización, ahora ya no tenemos que preocuparnos por los gradientes, las sombras o el brillo de los elementos, simplemente hay que cambiar solo el color de los elementos  y ya esta.

Nuevos componentes

La versión número 3 de Bootstrap incorporó dos nuevos elementos, Grupos de Listas y Paneles, cada uno para mostrar elementos con información más extensa relacionada a el, los Grupos de Listas sirven para mostrar listas con información más compleja, no son listas con una viñeta a la izquierda, ahora cada item de la lista puede tener un badge mostrar un número al estilo iOS o incluso tener un título y una descripción, muy útil para administradores de aplicaciones donde es necesario mostrar pequeñas estadísticas. Los Paneles, ¿No te has encontrado que no sabes como posicionar esa información? Ahora lo pones dentro de un Panel y listo, los paneles están creados para mostrar información por cajas, que le da a la página una estructura más definida y fácil de seguir, cada Panel puede tener un título, una descripción y un pie, todos opcionales, de igual forma tienen contexto, es decir, se les puede aplicar las clases de las alertas, y más allá, se pueden combinar con la lista de grupos perfectamente.

Soporte

El soporte para Internet Explorer 7 fue removida, significa que si visitas un sitio web hecho con Bootstrap 3 desde IE7, todo se verá de la peor forma posible, se verá y funcionará bien, pero si tienes algún problema con este navegador no tendrás soporte alguno.

Está es una versión RC o Release Candidate, así que es recomendable primero jugar con ella antes de usarla en un nuevo proyecto.

Una nueva versión cargada de mejoras visuales, de rendimiento y de estabilidad que nos hará la vida más fácil a todos los desarrolladores web, ofreciendo ahora más que nunca mejores formas para mostrar e interactuar con los elementos ofrecidos.

Descargar: Twitter Bootstrap 3

La entrada Twitter Bootstrap 3 disponible, con nuevos elementos y grilla renovada se publicó primero en Punto Geek.

Preocupaciones apartes, si eres un desarrollador perezoso o simplemente tu software se está comportando de forma inesperada o extraña, haciendo «raros» y cuando te preguntan no sabes que responder puedes acudir a Developer Excuses, un sencillisímo pero práctivo sitio web donde obtienes cada vez que entras a la página una excusa perfecta que te puedes sacar del apuro en el que te encuentras, dándote un poco tiempo para ir a arreglar el bug sin introducir otro. :P

Algunas de las excusas que muestra el sitio web son:

• It’s never shown unexpected behaviour like this before. (Nunca antes había presentado un comportamiento como este)
• There’s currently a problem with our hosting company. (Tenemos en este momento un problema con nuestra empresa de alojamiento)
• It probably won’t happen again. (Probablemente no vuelva a suceder)
• It’s a third party application issue. (Es un problema de una aplicación de terceros)
• How is that possible?. (¿Cómo es eso posible?)
• It works for me. (A mi me funciona)
• The user must not know how to use it. (El usuario no tiene que saber como usarlo)
• You must have done something wrong. (Debiste haber hecho algo incorrecto)

Aunque están en Inglés, es un inglés básico que seguramente sabes traducir sin problema.

Chiste aparte, recuerda lo importante es que tus usuarios se sientan a gusto con tu software. ;)

Developer Excuses

La entrada La lista definitiva de excusas de los programadores perezosos se publicó primero en Punto Geek.

En Internet se encuentra muchas soluciones a estos problemas de todas las formas posibles, en prácticamente todos los lenguajes de programación, pero todas se encuentran mal documentadas, en total desorden, no están centralizadas o no tienen una misma estructura en su programación, lo que hace difícil utilizarlas o aprender como funcionan.

code-problems es un repositorio en Github, donde se encuentran más de 50 problemas comunes de programación resueltos en JavaScript, C#, Python y PHP, están los más comunes como el Ordenamiento Burbuja, Fibonacci, Factorial, problemas como el del las habitaciones de Hotel, y otros con una complejidad más elevada.

Aunque es bueno tener este tipo de recursos para utilizarlos rápidamente en nuestros propios problemas es importante resaltar que la mejor forma de utilizarlos es creándolos por uno mismo, es la única forma de comprenderlos mejor e incluso mejorarlos para hacerlos más eficientes.

code-problems

La entrada Repositorio con problemas de programación comunes resueltos en JavaScript se publicó primero en Punto Geek.

Ha sido tal el crecimiento de Git en la comunidad de desarrolladores en el mundo que existe Github, una red social de código basado en Git, la red social hace más fácil la colaboración entre los desarrolladores, la revisión del código y la discusión sobre el mismo.

La forma original de utilizar Git ha sido a través de la consola, pero actualmente ya hay disponibles varias aplicaciones gráficas para utilizar, aún así, si tienes mucha experiencia con la consola y prefieres un buen fondo negro con letras verdes te dejo está chuleta de comandos de Git, en ella están todos los comandos disponibles de Git y su significado, así no volverás a tener dudas cuando estés trabajando con Git en tu proyecto de desarrollo.

Vía: Tower

La entrada Chuleta de comandos para Git se publicó primero en Punto Geek.

Hace algunos años si queríamos animar algo en nuestro sitios web teníamos que recurrir principalmente a imágenes gif, de esta forma se hacía el sitio web más vistoso, pero para otras personas era una total molestia ver tantas cosas moviéndose sin sicronización.

Ahora todo es diferente, aunque todavía las imágenes gif son muy utilizadas ya no se habla de animaciones de los elementos, si no de transiciones entre ellos, es decir, si haces scroll en la página, algún elemento se mueve para ajustarse a este movimiento, como la barra de navegación que se puede ampliar y establecer al principio de la página para que siempre esté disponible.

Crear estas animaciones con solo CSS3 no es tarea sencilla, es un tema avanzado y realmente no hay muchísima información para implementarlas de forma directa y rápida en tu sitio web, pero alguien ya se dio cuenta de esto y creo Magic CSS3 Animations, un archivo CSS que contiene 55 animaciones y transiciones diferentes para incluirlos en tu proyecto web fácilmente.

Lo primero que debes hacer es descargarlo de su repositorio en Github, luego incluir el archivo CSS en tu documento HTML

<link rel="stylesheet" href="yourpath/magic.css">

Ya con esto se puede combinar fácilmente con JavaScript o jQuery para crear la animación cuando se pase el mouse por encima de un elemento, por ejemplo:

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

Magic CSS3 Animations

La entrada Animaciones CSS3 bellas y fáciles de implementar con magic animations se publicó primero en Punto Geek.

El lenguaje de programación JavaScript ha evolucionado mucho en los últimos años, paso de ser un lenguaje utilizado para fastidiar al usuario con sonidos de fondo, ventanas emergentes y popus intrusivos a un lenguaje con el cual se crean las mejores aplicaciones web, sitios web interactivos, rápidos que no tienen nada que envidiar a una aplicación de Escritorio, hoy en día son más las líneas de código de JavaScript que las de PHP o HTML en una aplicación web.

Con esta evolución fue inevitable el surgimiento de cientos de librerías que facilitan el esfuerzo y disminuyen los tiempos de desarrollo, librerías que permiten desde acceder a la cámara web del computador hasta librerías para simular eventos touch en los computadores portátiles y Escritorio, como si se tratará de una tablet o un smartphone, existen ya tantas librerías que es difícil encontrarlas debido al extraño nombre que tiene algunas o porque son muy específicas lo que hacen.

Menos mal alguien ya pensó en la solución y creo  JSDB.io, una página web que tiene indexadas cientas de librerías de JavaScript categorizadas por el tipo de herramientas que permite desarrollar, como Animación, Formularios, Juegos, Datos, Móviles, entre otros, además de esto ofrece estadísticas como la popularidad de de la librería, número de personas que contribuyen a la librería y por supuesto enlaces al sitio web oficial y al repositorio oficial en Github si lo tiene.

JSDB.io

La entrada JSDB.io: La base de datos de librerías JavaScript se publicó primero en Punto Geek.

Si estás creando un proyecto web y tienes una gran cantidad de elementos que mostrar en una grilla o cuadrícula, y dichos elementos son categorizables, es decir, se pueden organizar de cierta forma dependiendo de sus características el siguiente plugin de jQuery te será perfecto para organizar tus elementos.

Se trata de MixItUp, un sencillo pero poderoso plugin de jQuery para organizar, ordenar y filtrar elementos de una cuadrícula, especialmente útil para galerías en portafolios, blogs y todo tipo de contenido que se necesite organizar.

El plugin utiliza los métodos de animación de jQuery combinándolos con las transiciones de CSS3, haciendo que los elementos se muevan por la pantalla suavemente cuando son filtrados por el usuario, los elementos se pueden filtrar de forma ascendente o descendente por su nombre o cualquier otra propiedad, el plugin ofrece 7 efectos diferentes para las transiciones y 4 tipos de movimientos.

Una de las características más sobresaliente y agradecidas del plugin es que es completamnete Responsive, es decir, la galería de elementos es completamente funcional en cualquier resolución, así que no tienes que preocuparte porque el efecto no funcione en moviles o tablets.

Pueden encontrar en el sitio web oficial la documentación completa y descubrir todas las posibilidades que ofrece.

Descargar: MixItUp

La entrada MixItUp: Plugin jQuery para filtrar y organizar contenido se publicó primero en Punto Geek.

Uno  de los primeros editores de código para desarrollo web fue por parte de Microsoft, el amado en su época pero ahora olvidado FrontPage, tuvo sus años de oro a finales de los años 90 y luego fue opacado lentamente por Dreamweaver, el editor de código más completo que hay, creado por Macromedia y luego comprado por Adobe, pero los tiempos han cambiado y los desarrolladores web en la actualidad dejaron de lado los IDE para utilizar los editores de código ligeros pero igual de poderosos, como Sublime Text o Intype.

Pingendo es un editor de código e IDE al mismo tiempo, tiene la rapidez y ligereza de un sencillo editor de código, pero tiene herramientas como el Inspector de elementos, del cual puedes editar visualmente las propiedades de dicho elemento, funcionalidades comunes encontradas en IDE’s.

Se trata de un editor que combina lo mejor de los dos mundos de editores de código web, Pingendo ofrece una interfaz sencillla, sin muchos elementos, solo se observa la estructura del documento o página web que estés editanto, las propiedades de los diferentes estados del elemento, y en la parte de arriba de la pantalla se puede cambiar entre la vista en vivo o visual o el código fuente del mismo, al hacer click derecho sobre un elemento de la página se puede acceder a todas las propiedades del mismo, como color, fuente, alineación y demás.

Uno de las características más sobresalientes de Pingendo es que está directamente integrado con los frameworks frontend más populares, como Bootstrap y Foundation.

Pingendo está disponible para Mac y Windows.

Descargar: Pingendo

La entrada Pingendo: Un IDE de desarrollo web rápido se publicó primero en Punto Geek.