Archivos para la categoria HTML5

Cody, tutoriales y ejemplos con demos de HTML y CSS

cody

Cody” nos presenta una interesante recopilación de turoriales y ejemplos con excelentes demos de HTML y CSS. En su pagina podremos navegar la librería actual, la cual cuenta con tutoriales que explican con detalle el código necesario para lograr un efecto, estilo, un truco como regresar arriba, etc. Así mismo nos proporciona un enlace a un demo, el cual nos permite mirar si el proyecto nos sirve o interesa, también podremos descargar el código que conforma el tutorial para modificarlo y adaptarlo a nuestra necesidad, respetando ciertos parámetros.

De momento no cuenta con demasiados tutoriales, pero los que están sin duda valen mucho la pena, así mismo nos invitan a inscribirnos es su newsletter para así enterarnos cuando un nuevo tutorial es cargado, lo que nos da a pensar que planean extender esta biblioteca.

[Tal ves te interesaMostrar y Ocultar contenido con jQuery]

Enlace
sitio Cody

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

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

Visme, crea contenido interactivo, presentaciones, infografias Online y Gratis

visme

Navegando la Web me encuentro esta interesante aplicación llamada “Visme“, de momento en versión beta pero que sin duda funciona bastante bien, lo ratifican sus comentarios. Visme nos permite crear contenido interactivo como presentaciones tipo power point, infografias tan de moda hoy día, banners, animaciones e incluso un demo para productos.

Algo bastante interesante es la posibilidad de seleccionar de una gran cantidad de plantillas predefinidas, así como la personalización de cada objeto, incluso podremos acceder a millones de imágenes gratuitas vía flickr, integra gran cantidad de fuentes incluyendo la posibilidad de texto animado, podemos hacer uso de miles de vectores libres, entre muchas cosas más. Así podremos convertir el contenido aburrido en presentaciones realmente entretenidas.

Al final nuestro resultado podrá ser compartido en linea, embebido en sitios Web o incluso descargado para usar cuando no contamos con una conexión a Internet.

Visme cuenta con una versión gratuita de la cual perfectamente podremos sacar gran provecho, y otra versión de pago la cual nos brinda mucho más, como por ejemplo la posibilidad de exportar en HTML5 y PDF.

Enlace
Visme sitio oficial

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)