Posts etiquetados ‘HTML5’

WiMi5, crea juegos HTML5 sin saber Programar

wimi5

Navegando la Web me encuentro esta interesante página “WiMi5“, la cual permite desarrollar juegos en HTML5 sin conocimientos de Programación, tan solo arrastrando y soltando bloques podremos darle forma a nuestro juego.

Así mismo una ves que hemos creado nuestro juego, no necesitamos pensar donde lo subiremos, ya que la propia página nos ofrece la posibilidad de hospedar nuestro juego, así mismo se encargará de su promoción, además brinda la posibilidad de recibir micro pagos, en este caso el creador del juego se quedará con el 70% del pago y WiMi5 con el 30% en este modelo sin duda interesante se basa su negocio.

Con el editor visual se podrán crear juegos multijugador con funcionalidades sociales, así mismo con un solo clic es posible tener el juego en diferentes plataformas, además brinda estadísticas del juego y el jugador en tiempo real, ideal si quieres mejorar y monetizar tus juegos.

Enlace
sitio oficial WiMi5

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.

oTranscribe, convierte de audio a texto con esta app gratuita

otranscribe

Navegando la Web me encuentro esta sencilla pero sin duda útil e interesante aplicación gratuita, su nombre “oTranscribe” y básicamente nos permite subir un audio en formato mp3, ogg, webm o wav, el cual transcribirá en un documento en la parte inferior de la pantalla, para después ser exportado a Google Drive o texto plano.

La aplicación requiere de un navegador moderno que soporte HTML5, es de código abierto y se encuentra bajo licencia MIT, el código fuente puede ser descargado desde GitHub, el audio y la transcripción siempre estarán en nuestro computador lo cual brinda un nivel alto de privacidad, además para su uso no se requiere de inscripción.

No cabe duda que es una excelente y útil aplicación, ideal para entrevistas realizadas en audio, las cuales posteriormente serán escritas en un Web por ejemplo.

Enlace
oTranscribe (sitio oficial)
Código fuente (GitHub)
oTranscribe is a simple and useful free Web app for transcription (vía TNW)

EasyHTML5Video, convierte tus vídeos a HTML5

easyhtml5video

Navegando la Web me encuentro este interesante programa, que nos puede ser de gran utilidad en estos tiempos, se trata de “EasyHTML5Video“, el cual nos permite convertir cualquiera de nuestros vídeos a HTML5, para poder mostrarlos fácilmente en nuestros sitios Web.

Lo usual para crear y distribuir vídeos en HTML 5 es:

Conseguir un convertidor y obtener diferentes versiones del vídeo como es MP4, OGG, WebM. Después para tener compatibilidad con navegadores viejos e Internet Explorer tomas uso de Flash, además creas una imagen para presentar el vídeo y por último tienes que poner unas lineas de código para que todo esto funcione.

Lo anterior resulta un poco complicado y es lo que comúnmente hacemos, con “EasyHTML5Video” nos olvidamos por completo de esto ya que en solo tres sencillos pasos lo podremos lograr.

1. Arrastramos y soltamos nuestro vídeo a EasyHTML5Video.
2. Fijamos la imagen de presentación del vídeo y seleccionamos los codecs.
3. Clic en “Start” (Iniciar).

Y como resultado tendremos una página en HTML con todo el código necesario, imágenes y vídeos.

Sin duda es un excelente programa que nos ahorra mucho tiempo, es gratuito para uso no comercial, si lo requieres para este uso, puedes tomar una de las versiones comerciales, US $49 para un sitio Web o US $69 para sitios Web ilimitados. Cabe destacar que la versión no comercial incluye una marca de agua de EasyHTML5Video y se puede usar en cantidad ilimitada de sitios Web no comerciales. El programa esta disponible para Windows y Mac.

Enlace:
EasyHTML5Video (sitio oficial)

HTML5 Up, plantillas editables para tus sitios Web en HTML5

html5-up

Hoy día se hace necesario el desarrollo de sitios Web para diversos propósitos, así como también es importante pensarlos para que estos sean vistos correctamente, desde cualquier dispositivo, y sin duda también podremos experimentar el crecimiento y uso que tiene HTML5.

Si quieres desarrollar tu sitio Web implementando HTML5, una forma interesante de iniciar, es con una plantilla elegante que podamos adaptar fácilmente hasta lograr nuestro diseño deseado, esto resulta de gran ayuda sino contamos con suficientes conocimientos técnicos, para crearla desde cero. “HTML5 Up” es un sitio Web cargado de plantillas muy elegantes y que se adaptan a dispositivos móviles, mediante el diseño Web Responsable “Web Responsive Design”, estas plantillas las podremos descargar gratuitamente y adaptarlas según nuestras necesidades, también desde su sitio Web podremos acceder a demos en vivo para ver que plantilla puede cumplir nuestras necesidades.

Así que si tienes en mente el desarrollo de un sitio Web, que mejor punto de partida que esta herramienta.

Enlace:
HTML Up (sitio oficial)

Turbulenz, crea juegos en HTML5 ahora es código abierto

save-the-city

Sin duda que HTML5 se esta convirtiendo en una de las tecnologías más utilizadas, si eres de las personas que esta usando HTML5 y te gusta la creación de vídeo juegos, acá tienes un motor de desarrollos de juegos en HTML5 llamado “Turbulenz” que acaba de anunciar que ahora es de código abierto.

Este motor de desarrollo nos permite crear juegos en 2D y 3D, con una notable calidad de sonido, el SDK de Turbulenz cuenta con todo los necesario para su desarrollo, permitiéndonos depurar, así también nos proporciona una cantidad de ejemplos de código para guiar nuestro desarrollo. Además tiene una amplia documentación con detalle de su API.

Desde su sitio Web puedes jugar algunos juegos que han sido desarrollados con este motor, sin duda unos muy divertidos.

Sin duda una excelente herramienta que nos ayudará a lograr nuestros juegos HTML5 más rápido.

Enlace:
Turbulenz (sitio oficial)

Curso gratis para desarrollar juegos en HTML5

html5Desde “Udacity” lanzarán un curso totalmente gratuito para el desarrollo de juegos en HTML5, el curso nos guiará por el desarrollo de un juego, las técnicas estándar del desarrollo y esto se complementa para desarrollar aplicaciones de alto rendimiento en HTML5.

Para seguir el curso se recomienda conocimientos básicos de HTML y Javascript, así como tener conocimiento acerca del funcionamiento de la Web, el curso también incluirá una unidad de HTML y Javascript para acelerar el proceso de aprendizaje, una ves finalizado el curso se aprenderá a crear un juego en HTML5 con características como el 2D canvas y técnicas para mejorar el rendimiento.

El curso será dictado por Colt McAnlis quien es desarrollador en Google y se especializa en juegos para Chrome, desde ahora es posible suscribirse al curso el cual se impartirá en Ingles.

[Tal ves te interesa: Juega 8 clásicos de Atari desde tu navegador gracias a HTML5]

Enlace:
Sitio del Curso | Desarrolla juegos en HTML5

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

Geolocalización HTML5 por wi-fi

geolocalizacion html5Gracias a las novedades de HTML5, obtener la localización es realmente muy sencillo. En diversas aplicaciones resulta de gran utilidad tener la ubicación del usuario, también es importante saber que no siempre se cuenta con un GPS que entregue esta información y es aquí donde entre a jugar la geolocalización por medio de wi-fi.

Funcionamiento

De seguro has escuchado hablar de los GPS, dispositivo que te permite conocer la ubicación geográfica de un objeto con la ayuda de satélites. También es posible obtener la ubicación por medio de las señales provenientes de los dispositivos wi-fi.

Compañías como Google o Skyhook recolectan información en sus bases de datos, provenientes de routers, y gracias a algo conocido como triangulación se logra ubicar el punto, gracias al uso de tres puntos de referencia y distancias o puntos ya conocidos, por otro lado los dispositivos con GPS que capturan información de estos routers también envían la información, además Google también lo hace con sus carros de Google Street View.

Una vez accedes a una aplicación que te permite geolocalización por wi-fi, esta se conecta a la base de datos de la empresa que usa y le envía la MAC de los routers que la antena wi-fi del dispositivo que usas detecta, esta las compara con las almacenadas en la base de datos y envía la más cercana a tu ubicación, a decir verdad es bastante acertado.

La base de datos de la empresa usada por la aplicación te retornará la latitud y longitud del punto ubicado, con esta información puedes representar en un mapa la ubicación geográfica del objeto, pudiendo usar servicios como Google maps para este propósito.

Ver ejemplo

Después del salto podrás ver el código fuente para que hagas tus propias pruebas.

Leer el resto de la entrada »