Archivos para la categoria JavaScript

Curso en vídeo de Node.js en Español

No cabe duda de la gran importancia que Node.js tiene en este momento. Por si no lo sabes, Node.js permite la ejecución de Javascript en la capa del servidor, comportándose como cualquier lenguaje del lado del servidor como lo es PHP, con entrada y salida de datos, esta basado en Javascript, su arquitectura es orientada a eventos y usa el motor Javascript V8.

nodejs

Gracias a el uso de Javascript es liviano y rápido, así mismo mediante el uso de sockets se puede aprovechar una conexión bi-direccional en tiempo real muy eficiente, esto lo hace ideal para aplicaciones que presentan datos en tiempo real como chats, entornos colaborativos, videojuegos y un amplio etc.

Que mejor que el maestro de maestros Jesús Conde, para enseñarnos este lenguaje tan de moda hoy día. En 29 vídeos en español y totalmente disponibles desde su canal, el maestro nos enseña Node.js desde lo básico hasta el uso de socket.io, siempre con practicas muy acertadas como la creación de un chat, además nos adentra al uso de MongoDB con Node.js. Si quieres aprender Node.js te super recomiendo estos 29 vídeos gratuitos, los puedes ver después del salto.

Leer el resto de la entrada »

oozled, cientos de recursos para Desarrollo, Diseño y Creatividad

oozledNavegando la Web me encuentro este interesante sitio “oozled.com”, página que nos brinda más de 600 recursos en 42 categorías de momento, que nos ayudarán con inspiración, código o diseños para nuestros proyectos Web.

Dentro de las categorías podremos encontrar recursos para Javascript, HTML5, CSS, frameworks como Laravel de PHP, iconos, fuentes, fotografía, diseño de interfaces, entre mucho más. Además podremos acceder a charlas y a una categoría dedicada al empleo.

Sin duda una excelente fuente no solo de recursos sino de inspiración, que nos provee con material gratuito y de pago, para la consecución de nuestros proyectos.

Enlace
oozled

CodeCombat aprende a programar Javascript mientras juegas

codecombat

Si has pensado en aprender a programar Javascript, existen muchas alternativas, pero una de ellas “CodeCombat” te enseña mientras juegas.

La aplicación Web te enseña los fundamentales de la programación de Javascript, todo lo que verías en un curso introductorio, mientras vas creando el código para sortear los diferentes obstáculos en el juego. Para ir de un nivel al otro, debes entender lo aprendido en la lección y demostrarlo creando el código que te permitirá avanzar.

El juego es del tipo RPG y brinda dos modos de juego, para un jugador y el multi jugador para los más avanzados, en esta opción nuestro código se debe enfrentar al de otros jugadores.

La compañía que fue fundada en febrero del año 2013 y esta a punto de graduarse de Y-Combinator la aceleradora de startups, ha dejado el código libre, además ha liberado un editor de niveles, que permite que creemos nuestro contenido. El juego y el aprendizaje es totalmente gratuito, CodeCombat pretende monetizar a través del reclutamiento, ya que ellos conocen bien a los programadores y como resuelven el juego por medio de sus algoritmos, así un empleador puede contratar un programador pagando una tarifa a CodeCombat.

[Tal ves te interesa: Curso Guía practica de Desarrollo Web Frontend]

Si te interesa aprender Javascript sin duda esta es una buena opción, ya que viene en varios idiomas entre ellos el español.

Leer el resto de la entrada »

Proyecto de la guía practica de Desarrollo Web Frontend

todo-list

Para aprender HTML5, CSS3 y Javascript lo mejor es realizar un proyecto practico, por eso miramos varias alternativas y ahora hemos elegido hacer una “Lista de tareas” o lo que se conoce en ingles como “ToDo list“, en la imagen superior podremos ver las diferentes partes que conforman la página que desarrollaremos, en la cual practicaremos temas muy frescos como es el responsive design, los Web Fonts o alineación, así también veremos como lograr el diseño, la estructura y funcionalidad con lo más reciente de HTML5 + CSS3 + Javascript.

Sino sabes de que se trata la guía te invito a que leas la presentación.

Si ya sabes de que se trata, te invitamos a que estés atento a la primera parte de la guía que esperamos sea de tu interés y por supuesto te ayude a ser un verdadero ninja del desarrollo Web Frontend.

Tendremos imágenes y lo necesario disponible de una fuente profesional que nos ayudará en el curso, para la primera parte de nuestra guía.

Curso: Guía practica de Desarrollo Web Frontend

guia-desarrollo-web

Desde “LoqueNecesita” queremos desarrollar una serie de artículos enfocados al desarrollo Web frontend, estos artículos se crearán en un orden especifico a la ves que vamos realizando practicas con determinado proyecto.

La idea es tratar temas acerca de HTML5, CSS3 y Javascript, veremos temas puntuales con relación a la nueva tecnología de HTML5, así como detalles y herramientas de CSS3, que nos ayudarán a lograr cosas muy comunes, como el centrado de texto tanto horizontal como vertical, alineación, sombras, curvas, fuentes, responsive design, etc. Así también queremos profundizar un poco en la programación con Javascript y como contribuye este a las grandes mejoras de la nueva Web, así también echaremos un vistazo a librerías del lenguaje muy comunes que nos pueden ayudar muchísimo.

La idea es ir desarrollando la guía practica entorno a un proyecto frontend, que anunciaremos en la primera parte, pero también están invitados a proponer un proyecto para desarrollar la guía practica. A medida que vamos avanzando, tal vez tengas mejores soluciones a implementaciones que queremos hacer, en tal caso te invitamos a que escribas tus soluciones al igual que tus comentarios y consultas, en los comentarios del articulo o en Facebook o Twitter, así estas también estarán dentro de la guía final que construiremos entre todos, por esto su participación es muy importante.

Al final unificaremos los artículos, los comentarios que contribuyen con soluciones, dudas o aportes, y así tendremos una guía de desarrollo web frontend lista para su descarga, que te servirá de referencia para el desarrollo de tus futuros proyecto, obviamente su código fuente estará disponible.

¿Te animas a aprender y aportar, en esta guía de desarrollo web frontend?

Si tu respuesta es afirmativa, compártelo con tus amigos en las redes sociales, y si quieres propone un proyecto que te gustaría desarrollar a medida que hacemos la guía.

Mostrar y Ocultar contenido con jQuery

Necesitaba crear algo así como “mostrar más” en donde tengo una parte de contenido visible y otra oculta que se muestra cuando hago clic sobre mostrar más, en la Web existen muchas soluciones acá comparto una solución que te puede servir.

Caso especifico: Una lista de categorías que muestra 5 y un enlace “mostrar más” que permite ver las demás, adicional si quieres agregas un enlace ocultar para regresar a mostrar solo 5.

Primero paso

Tenemos el código html con las categorías, consta de un div y dentro una lista desordenada con 10 categorías:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="contenedor">
  <ul class="categorias">
    <li>Categoria 1</li>
    <li>Categoria 2</li>
    <li>Categoria 3</li>
    <li>Categoria 4</li>
    <li>Categoria 5</li>
    <li>Categoria 6</li>
    <li>Categoria 7</li>
    <li>Categoria 8</li>
    <li>Categoria 9</li>
    <li>Categoria 10</li>
  </ul>
</div>

Luego tenemos un par de divs para poner los enlaces mostrar más y menos, hemos agregado el estilo cursor: pointer para que el texto parezca un enlace y uno de ellos esta oculto por defecto con display: none; como vemos a continuación:

1
2
<div class="mas" style="cursor: pointer;">mostrar mas</div>
<div class="menos" style="display: none; cursor: pointer;">mostrar menos</div>

Leer el resto de la entrada »

Tessel, plataforma de hardware programable con Javascript

tessel

Tessel” es una placa electrónica con un microcontrolador programable tipo Arduino creado por Jon McKay, Jia Huang, y Tim Ryan, con la diferencia en que su entorno de desarrollo es el lenguaje Javascript.

Desarrollar proyectos en Tessel será relativamente sencillo si sabes Javascript, además podremos hacer uso de módulos externos, extendiendo así sus capacidades, su conexión con dichos módulos es plug and play y la instalación de las librería necesarias para su funcionamiento, es tan sencillo como “npm install“. Dentro de los módulos con que contará podremos ver acelerometro, lector de micro SD, RFID, audio, servos, relés y sensores de temperatura y humedad. También cabe destacar que viene con wi-fi pre construido, es decir que para poner nuestro código dentro de Tessel lo podremos hacer vía wi-fi o también por medio de USB.

Tessel corre directamente Javascript sin la necesidad de un servidor, así que podremos usar nuestras propias librerías o librerías externas como (node.js) para nuestros proyectos, justo como si estuviésemos desarrollando una Web, también promete actualizaciones de firmware tan sencillo como “tessel push“.

En cuanto a las aplicaciones móviles, Tessel no cuenta con una pantalla, pues casi siempre tenemos una en nuestros bolsillos. Podremos tener control de todas las salidas de Tessel directamente desde nuestras aplicaciones iOS o Android. Contamos con una interface por defecto para nuestras funciones o podremos crea una propia usando HTML/CSS. Tessel se podrá conectar a wi-fi sin necesidad de poner los detallas directamente en el código, estos se enviarán desde nuestro smarthphone.

Una interesante característica es que los desarrollos y librerías creadas para Arduino los podremos correr en Tessel.

Además contamos con ejemplos para el uso de servos, proximidad, node,js, entre otros, los cuales podremos usar en Tessel, y los podremos descargar desde GitHub.

Especificaciones

  • Procesador ARM Cortex-M3 LPC1830 a 180Mhz
  • 32MB de SDRAM
  • 32MB Flash
  • TI CC3000 Wifi Radio
  • 16 pins de entrada y salida para los prototipos
  • Alimentación por medio de batería o micro USB

Sin duda una placa para desarrollo bastante interesante y que de seguro compraré, aunque de precio aun no se habla, actualmente dice que su lanzamiento será pronto y en su sitio Web podremos inscribirnos para recibir una notificación cuando este disponible.

Enlace:
Tessel (sitio oficial Technical Machine)

Monsta, cliente FTP que funciona desde el navegador

monsta

Sin duda existen muchos clientes FTP entre los cuales destaco uno de mis favoritos el “Filezilla“, pero a diferencia de estos “Monsta FTP” es un cliente que instalamos directamente en un servidor, pudiendo acceder él por medio del navegador, evitando así instalar software en nuestros ordenadores.

Monsta FTP” es un proyecto de código libre bajo licencia GNUGeneral Public License“, desarrollado en PHP y hace uso de la tecnología AJAX, su instalación es tan simple como subir los archivos que descargamos, a un servidor y ya tendremos acceso al cliente FTP a través de nuestro navegador, para hacer uso amplio del script dentro de su sitio recomiendan el uso del navegador Google Chrome ya que este permite arrastrar y soltar carpetas desde nuestro ordenador.

Más que un proyecto que nos permite tener un cliente FTP 100% funcional, es un script para reforzar nuestro conocimientos, así que si puedes y quieres realizar donaciones al proyecto.

Enlace:
Monsta (Sitio oficial)

Como aceptar pagos sociales en su sitio Web

pago-socialPara los creadores de contenido, en ocasiones resulta de gran utilidad recibir pagos sociales a cambio de esté; es decir que a cambio de un Tweet, un Me gusta o un +1, entregas contenido como un libro electrónico, una canción, un cupón, etc.

Ya hemos visto antes como entregar contenido a cambio de un pago social, cuyo funcionamiento es adecuado, pero su implementación es difícil, así que desde labnol, ahora nos trae un sencillo script que permite entregar contenido a cambio de un Me gusta, un Tweet o un +1, pero este script resulta mucho más sencillo de instalar.

Después del salto vemos el script y como personalizarlo.

Leer el resto de la entrada »

Mobello, programa aplicaciones móviles con HTML5

Mobello

Mobello” es un framework Javascript UI para el desarrollo de aplicaciones móviles basadas en HTML5, siendo un framework escalable y robusto, proporcionando herramientas con una interfaz enriquecida que permiten un desarrollo fácil y ágil.

Una parte bastante interesante, es la limpieza de desarrollo que brinda ya que hace uso del modelo MVC, permitiendo mantener un código limpio y organizado, además nos brinda una experiencia nativa en nuestro navegador, es decir que no necesitaremos de un smartphone para las pruebas, basta nuestro navegador. También nos proporciona una aplicación de escritorio “Mobello Studio“, que nos permite desarrollar y probar lo que nos aporta productividad.

Una parte bastante interesante a tener en cuenta es que “Mobello” es de código abierto bajo una licencia LGPL, así que desde Github nos podremos bajar el código y realizar contribuciones si así lo deseamos.

Así que si has pensado en iniciarte en el desarrollo de aplicaciones moviles, “Mobello” sin duda será un gran inicio.

Enlace:
Sitio oficial Github | Mobello
Descargar | Github