Etiqueta: html

Cursos gratis para aprender HTML5

Publicado el

por Juan Diego Polo

Ya os hemos comentado en algunas ocasiones varios sitios en los que podéis realizar clases para aprender HTML5, os dejamos ahora con una recopilación de dichos enlaces, esperando que nos ayudéis a ampliar la lista en los comentarios.

– Cursos de HTML5 en Udemy: 3 cursos que imparten en Udemy, sin necesidad de conocimientos previos, incluyendo uno en español para entender las bases.

curso html5

– Curso en Codeavengers: Ideal para aprender tanto HTML5 como CSS3 y Javascript. Existen varios juegos que nos ayudan a mantenernos motivados, subiendo de nivel y ganando premios.

– Curso de HTML5 de Microsoft: Un curso completo, en español, con 6 lecciones para aprender HTML5.

– Programando.la: Con ví­deos en español sobre el tema.

– Edutin: Lista de ví­deos en español para aprender las bases de HTML5.

– mozilla.org: Documentación extensa en el sitio web de Mozilla.

Podéis ver algunas demostraciones de lo que se puede hacer usando HTML5 en chromeexperiments.com o en esta recopilación de experimentos que publicaron en spyrestudios.com

Si buscáis otros lenguajes de programación, recordad el artí­culo ¿Qué lenguaje de programación debo aprender y dónde puedo hacerlo gratis? que publicó Juan David hace unos meses.

Codio, una excelente herramienta para programar proyectos Web

Publicado el

por Juan Diego Polo

codio

Antes de leer el texto, si sois programadores y os dedicáis al mundo web, echad un vistazo en el ví­deo de presentación de Codio, en codio.com:

Como veis, se trata de un editor de código que permite personalizar el panel de trabajo, añade atajos de teclado, incluye funciones para organizar las lineas permitiendo tener una estructura de código más atractiva y sencilla de entender, accede a librerí­as, se conecta a ftp, github y otros servidores remotos, muestra visualización de resultado en tiempo real… funciones extremadamente interesantes para quien programa y quiere concentrarse en el código, no en el editor, ya que puede facilitar mucho el trabajo «burocrático» de la programación.

En la parte de front end trabaja con HTML5, CSS y Javascript, en el back end es compatible con PHP, Node, Ruby y Python, siendo siempre posible cargar proyectos enteros y permitir el trabajo colaborativo.

Codio es una herramienta gratuita para proyectos públicos y de código libre. Ya están trabajando en una versión en la que, por 8 dólares, podemos usarlo para proyectos privados, aunque informan en su web que esta opción aún no está disponible.

Si queréis seguir de cerca el estado del proyecto, os recomiendo suscribiros a su blog, en codio.com/s/blog/, donde van informando sobre los avances realizados, planes disponibles y disponibilidad.

Dash, un nuevo sitio para aprender HTML, CSS y Javascript

Publicado el

por Juan Diego Polo

Si no tenéis suficiente con codecademy o con la enorme cantidad de sitios existentes para aprender a programar, echad un vistazo en el nuevo Dash (dash.generalassemb.ly).

Se trata de un nuevo proyecto creado por General Assembly para permitir aprender HTML, CSS y Javascript usando el navegador, sin necesidad de instalar nada. Solo tenemos que identificarnos ví­a Twitter o crear una cuenta usando el email (no es posible identificarse ni con Google ni con Facebook) y seleccionar el curso que queremos realizar. Existen opciones de varios niveles y es posible ir ganando «medallas» a medida que cumplimos con objetivos en la aplicación, siempre pensando en motivar al alumno.

css

No son lecciones sin objetivo definido, son proyectos completos del tipo «vamos a crear nuestro primero sitio web», «vamos a diseñar un tema de un blog que se adapte a dispositivos móviles», «creemos una web para un pequeño negocio» o «construyamos un robot con css».

En The Next Web han entrevistado a su creador y comentan que, aunque sea limitado en oferta (solo permite html, css y JS) se han concentrado en crear la mejor web para enseñar programación directamente desde el navegador (calidad Vs cantidad), aunque seguramente irán ampliando la cantidad de cursos disponibles durante los próximos meses.

Emmet, una extensión para agilizar el trabajo de quien programa HTML y CSS

Publicado el

por Juan Diego Polo

emmetProgramar desde cero una página web, creando las hojas de estilo y el HTML que responderá al diseño especificado en ella, puede ser una odisea si no se usa el editor adecuado.

La mayorí­a de los editores ya ofrecen recursos que ayudan a no olvidar las comillas, los puntos y comas, las etiquetas y demás componentes, pero cada uno tiene sus propias reglas, sus propios atajos de teclado, y muchas veces necesitamos un «algo más» que nos ayude a ahorrar tiempo a la hora de escribir código.

Emmet es una extensión compatible con varios editores de código, tanto web como para plataformas tradicionales, que permite, entre otras cosas, escribir lineas de código usando abreviaturas. Podemos así­ evitar los CTRL+C & CTRL-V usando un código especial de Emmet que permite ser interpretado para rellenar lineas de forma automática, aunque también ofrece atajos que en muchos editores no existen.

Las caracterí­sticas completas de esta extensión, así­ como los programas con los que es compatible, pueden verse en emmet.io, donde está disponible de forma gratuita. En caso de querer cotillear entre su código, podéis hacerlo en github; también podéis visitar este artí­culo en hongkiat.com, donde explican un paso a paso para su instalación y uso.

Twitter usa Torrent para distribuir el HTML de su botón

Publicado el

por Juan Diego Polo

En varias ocasiones os hemos hablado de los usos y de las posibilidades que tiene la tecnologí­a torrent, la transmisión de archivos usando P2P, y hoy ampliamos la lista con un caso bastante curioso que comentan en TorrentFreak y en numerama.

Se trata del botón de Twitter, el famoso botón que vemos al lado de los artí­culos de media Internet y que nos permite enviar textos, fotos y enlaces a dicha red de contenido.

Por lo visto, un error técnico, activo durante este fin de semana, ha sido el responsable de que muchos usuarios, al cargar una web, vean una solicitación para bajar un archivo .torrent. El archivo en cuestión es el responsable por el botón, que en lugar de cargar el html que el torrent distribuye, cargaba el .torrent original.

Muchos usuarios de Twitter han comentado el asunto, pensando que o bien el blog habí­a sido hackeado, obligando a instalar un torrent que podrí­a estar apuntando hací­a contenido de reputación cuestionable, o Twitter.com estaba con algún problema serio. De momento Twitter no ha comentado nada sobre el tema, pero las capturas que se han realizado muestran que, efectivamente, el botón de Twitter es distribuí­do usando la tecnologí­a torrent.

twitterbug

No hay duda de que este tipo de transmisión es la más rápida y efectiva cuando millones de personas de todo el mundo necesitan cargar el mismo contenido. Usar un servidor central para hacer el download de forma repetitiva no es una buena idea, y en Twitter lo saben, usando trackers de bittorrent (servidores especiales con la información necesaria para que los peers se conecten con otros peers) hospedados en Amazon.

La presentación de La Guerra de las Galaxias con HTML, JS y CSS

Publicado el

por Juan Diego Polo

Star Wars

En timpietrusky.com podéis ver los detalles del trabajo de Tim Pietrusky, programador que ha dedicado buena parte de su tiempo en una aplicación que simula la presentación de la pelí­cula de 1977 de La Guerra de las Galaxias.

El resultado, que puede disfrutarse en codepen.io, puede ejecutarse pulsando en el texto inferior de dicha página, así­ como personalizarse alterando tanto el HTML de la columna izquierda, el CSS del medio o el javascript de la derecha.

Esta joya, descubierta en boingboing.net hace pocas horas, incluye la música de la pelí­cula, así­ como el texto original que apareció en el largometraje en su momento.

Un lugar ideal para fans de la pelí­cula, así­ como para profesores y alumnos de diseño web que estén aprendiendo HTML, JS y CSS y quieren verificar cómo cambiando algunas lineas pueden obtenerse resultados fantásticos.

Codepen.io, recurso que os presentamos en el libro Tendencias de Diseño web en 2013, es un editor de código online que nos ayuda a practicar mientras vemos el resultado de forma inmediata, siendo posible navegar por los ejemplos que otros usuarios han publicado en la plataforma.

Allí­ es posible ver otros trabajos del mismo desarrollador, como un homenaje a la serie Breaking Bad que no tiene ningún desperdicio.

Extensión que transforma Markdown en HTML

Publicado el

por Juan Diego Polo

En markdown-here tenemos una extensión, disponible para prácticamente todos los navegadores web, que transforma lo que escribimos en Markdown (lenguaje de marcas ligero creado originalmente por John Gruber y Aaron Swartz) en HTML, algo muy útil para los que no quieren despegarse del teclado.

Si estáis habituados a escribir de esa forma, con asteriscos para indicar negrita, rayas para indicar puntos de una lista, barras para tablas y demás elementos caracterí­sticos de los lenguajes de marcas, veréis como con un simple click podemos dar el formato adecuado al texto.

De esta forma podemos escribir un email con el formato Markdown y transformarlo en HTML antes de enviarlo, lo que permite dar mucha más flexibilidad al contenido que si nos limitamos a las herramientas de formato incluidas en la mayorí­a de los sistemas de correo electrónico.

markdown

La extensión es de código libre, código que puede obtenerse, como no podrí­a ser de otra forma, en github.com.

Si os interesa conocer más sobre este tema, os recomiendo La guí­a oficial de MarkDown por John Gruber, o la guí­a rápida, en formato txt. Si conseguí­s agilidad con este formato, veréis que puede facilitar mucho el trabajo de edición de contenido, sin tener que soltar el teclado para usar el ratón y jugar con los botones de los editores clásicos.

Link: markdown-here | Ví­a lifehacker.com

9 interesantes sitios para empezar a trabajar con HTML5

Publicado el

por Juan David Quiñónez

Aquí­ tenemos ahora varios enlaces que pueden ayudar a quienes desean empezar a trabajar con HTML5. Seguramente falta mucho para que Adobe Flash sea reemplazado, si es que sucede, pero mientras tanto nada mejor que aprender del HTML5 y su futuro poderí­o.

No importa el nivel de conocimientos, exceptuando las cosillas de CSS3 y otros fundamentos con los que se deberí­a contar, hay opciones para todos los gustos:

1. HTML5 Boilerplate 3.0


Para no iniciar desde cero, HTML5 Boilerplate ofrece una excelente herramienta de aprendizaje en forma de plantilla, con montones de posibilidades y la documentación suficiente para realizarlas. Es un «esqueleto» de código optimizado fácilmente adaptable para empezar a desarrollar hasta para móviles, por supuesto, sin dejar a un lado la velocidad, estabilidad y seguridad.
Continúa leyendo «9 interesantes sitios para empezar a trabajar con HTML5»

Dos formas de extraer datos estructurados de una web

Publicado el

por Juan Diego Polo

En algunas ocasiones nos encontramos con páginas que incluyen información que queremos exportar, rastrear y monitorizar de alguna forma. Cuando existe un canal RSS con las actualizaciones de dichos datos, es sencillo tenerlas bajo control con un lector como Feedly, TheOldReader o cualquiera de las muchas alternativas existentes en la web, pero en caso contrario tenemos que inventar alguna forma de seguir las actualizaciones sin necesidad de estar constantemente actualizando la página.

Hoy os presento dos opciones, una sencilla y básica, la otra extremadamente flexible, y más compleja. Empecemos por la segunda:

Feed43

feed

Conozco esta opción desde 2006, opción que poco ha cambiado con el tiempo, aunque continúa siendo tan efectiva como siempre.

Se trata de una herramienta en la que tenemos que mostrar la estructura HTML de cualquier página indicando el patrón que debe seguir para avisarnos de las actualizaciones. Si vemos que el contenido que queremos rastrear tiene un tag HTML especí­fico o mantiene una estructura en el código que generalmente es repetida, Feed43 conseguirá crear un Feed, una dirección RSS, en cualquier página.

Las direcciones creadas pueden ser actualizadas en cualquier momento para adaptarse a una posible actualización de código.

La ventaja es que es capaz de crear un feed de prácticamente cualquier página web, la desventaja es que para hacerlo hay que conocer nociones básicas de HTML.
Continúa leyendo «Dos formas de extraer datos estructurados de una web»

Slid.es (antes Rvl.io), la brillante alternativa para crear presentaciones online

Publicado el

por Juan David Quiñónez

slides

Hace unos meses destacaba un par de librerí­as en Javascript, impress.js y reveal.js, que permití­an crear presentaciones al estilo Prezi pero permitiendo editar directamente el código del contenido de las diapositivas y sus respectivas transiciones, algo perfecto para no depender estrictamente de un servicio online como Prezi.com y trabajar incluso de forma offline. Los requerimientos: conocimientos básicos en CSS y HTML, y un navegador de Internet para ejecutar las diapositivas resultantes.

Con un control absoluto del código los lí­mites a las funciones dadas en Prezi casi que desaparecen ya que ahora la cuestión es apenas de nivel de conocimiento. Sin embargo, como no querí­a dejarse a un lado a quienes apenas conocí­an de edición de diapositivas a través de herramientas ofimáticas, los creadores de la segunda librerí­a, reveal.js, pusieron junto a ésta un cómodo editor gratuito llamado rvl.io.

Pues bien, hace algunos dí­as decidieron renovar toda la herramienta cambiándole su nombre a slid.es, mejorando su interfaz, agregando más estilos predeterminados, manteniendo los planes gratuitos junto a nuevos planes de pago, y resaltando su renovado editor que prescinde de su extrema sencillez…

rvlio Continúa leyendo «Slid.es (antes Rvl.io), la brillante alternativa para crear presentaciones online»