School of Webcraft

La parte final del curso Webmaking 101 de School of Webcraft: una recapitulación de todo lo aprendido. Son muchas cosas las aprendidas, y tan sólo es el comienzo.

Webmaking 101 es un buen curso, ya que toma a cualquier persona, independientemente de su nivel de conocimiento, y la invita a crear en la web. Entre menos sabes, más arduo es el trabajo, pero tienes la ventaja de empezar a aprender desde los protocolos y tecnologías más recientes. Los que ya son unos magos del HTML pueden aprovechar este curso para explorar los nuevos elementos HTML5, o software que puede facilitar sus tareas.

En concreto, los siguientes servicios y herramientas fueron un gran descubrimiento para mi:

NearlyFreeSpeech.NET. Aunque hay muchos lugares que ofrecen hospedaje gratuito, sobretodo en blogs, si quieres tener más control sobre el formato y el contenido, y aprender, este es un excelente lugar para empezar.

FileZilla. Una herramienta básica, que tambien te lleva de la mano en todo lo correspondiente a FTP y SFTP.

Mozilla Developer Network. Más fácil de leer que las referencias de W3C, aqui puedes encontrar los elementos y los parámetros HTML, y consultando y usando de manera adecuada este recurso puedes familiarizarte con HTML5.

Combinemos los anteriores recursos con algunos otros (además de una computadora y una conexión a internet), y tenemos un poderoso arsenal de creacion web a bajo precio, y Open Source:

Ubuntu. Una de las distribuciones más populares de Linux. ¿Qué mejor manera de empezar a crear en la red que un sistema operativo estable y seguro? A los espíritus aventureros que actualmente usan iOS o Windows, les recomiendo utilizar un LiveUSB con Ubuntu o con otro de los sabores de Linux más accesibles, tales como Linux Mint o Fedora.

Gedit. Gran editor de texto, simple pero poderoso.

GIMP. ¿No tienes Photoshop? No hay problema, puedes crear y manipular archivos graficos con esta poderosa herramienta.

WordPress. Creacion web para las masas.

¿Cuál es el siguiente paso? Utilizar todas las herramientas anteriores para crear una página web que aproveche al maximo HTML5. Falta mucho por aprender: PHP, CSS y MySQL, principalmente.

Todavía no estoy seguro sobre como utilizar lo aprendido en la línea temporal: ¿En cuánto tiempo puedo, usando estas herramientas, crear una página web simple? Con la práctica vendrá una respuesta a ésta y otras preguntas, espero.

NearlyFreeSpeech.NET

Otra tarea de la School of Webcraft, curso Webmaking 101: encontrar la mejor opción para el hospedaje (hosting) de una página web. Con tantas opciones en la red, ¿cuál es la adecuada?

La opción de hosting que elegí es NearlyFreeSpeech.NET. La elegí por varias razones:

• Precio. NearlyFreeSpeech.NET ofrece una política de ‘paga por lo que usas’. La mayor parte de los servicios de hosting ofrecen una tarifa fija, que puede ser baja, pero puede no ser lo más conveniente para una página personal o una página de una pequeña empresa. Una tarifa fija puede ser demasiado alta si el tráfico que prevees que  tu página generará no necesita los recursos que ofrece el host.
• Soporte. Soporte comprensivo para usar la página sin necesidad de ser un super gurú. En mi imaginación, los supergurús tienen un servidor en su casa, no necesitan hosting.
• Diseño. El diseño simple de la página me agrada. Demasiadas páginas que ofrecen hospedaje tienen diseños francamente noventeros y de mal gusto. A veces hay que juzgar al libro por su portada.
• Recomendación. Recomendado por Lifehacker en una lista de los 5 mejores lugares para hospedar tu página.

Otros opciones que vale la pena checar:

• Bluehost. Combina bien con WordPress, y diferentes planes a la medida.
• Cheap Linux Web Hosting. ¿Sabes a cuánto está la rupia? Muy barata.
• Amazon Web Services. En la nube. Ahora todo es en la nube. Usarlo para una página personal es como aplastar una hormiga con un tanque.
• Tu propia PC. Vieja escuela. Un poco complicado. Muchos recursos del sistema, y puede no ser permitido por el ISP. Pero la opción perfecta para los espíritus independientes.

¿Cómo configuras tu DNS con NearlyFreeSpeech.NET? Aunque tu dominio (domain) lo tengas registrado con otro registrar, es muy fácil, tienes que establecer la dirección IP de tu dominio en el ‘A record’ de tu host. Puedes transferir tu dominio con NearlyFreeSpeech.NET, o no. Ojo: también ofrecen un nombre de dominio gratuito, aparentemente. Una vez registrado (el registro es gratis con una cuenta de correo válida), los pasos a seguir para configurar el DNS son:

1. En el menú de los miembros, en la opción ‘sites‘, ir a ‘actions‘ y darle click a ‘Create new site‘. Elige un nombre corto para tu sitio. Un nombre bueno.

2. En la siguiente pantalla, tienes la opción de elegir el nombre de dominio que tienes, con NearlyFreeSpace.NET o registrado en otro lugar.

3. Si elegiste un nombre registrado en otro lugar, puedes configurar el DNS manualmente, o permitir que NearlyFreeSpace.NET lo haga por ti. Una última pantalla confirma todo las opciones, y el las opciones del DNS se pueden accesar en el botón ‘Domains‘.

La elección de un buen hosting service depende de las necesidades de cada persona o organización, el presupuesto, y el nivel de decisión que alguien quiera tener sobre la configuración de una página. Desde configuraciones totalmente automatizadas donde el autor sólo pone el contenido, hasta configuraciones donde el detalle más básico puede ser controlado, hay una opción para todos.

School of Webcraft

Esta entrada forma parte de los ejercicios de la School of Webcraft, el curso Webmaking 101. El ejercicio consiste en hacer una breve investigación en línea sobre lo que es el DNS (Domain Name System, por sus siglas en inglés). A manera de resumen, hay que elaborar un artefacto (dibujo, diagrama, danza, macramé) que sintetize lo que entendimos. Yo hice un diagrama con la información que consideré más pertinente.

En pocas palabras, las computadoras y los servidores se identifican através de direcciones IP (Internet Protocol). Las direcciones IP son difíciles para recordar, es más fácil para nosotros acordarnos de http://www.google.com que de 74.125.227.146. Al buscar una página, lo que realmente hace nuestro navegador es buscar primero la direccion IP correspondiente a la página, para luego acceder a ésta.

Una explicación más detallada y muy fácil de leer se puede encontrar en HowStuffWorks, ‘How Domain Servers Work’. También tienen un diagrama espeluznantemente similar al mio.

Otro vínculo interesante, que encontre de manera fortuíta hoy, es OpenDNS. Es una compañía que ofrece varios servicios, entre ellos conexiones más seguras.

School of Webcraft

Otro más de los ejercicios de la School of Webcraft, la clase Webmaking 101. Una vez familiarizado con algunos de los elementos más básicos de HTML, hay que salir a la calle y tomar fotos de cosas que conceptualmente son similares a esos conceptos. Por ejemplo, la gente haciendo cola en un negocio, sería <ol> (‘ordered list’, una lista cuyos elementos siguen un patrón en particular), cada una de las personas un <li> (‘list item’, elemento de la lista). Un ejercicio divertido, pero con alguna dosis de frustración.

Antes de comenzar, vale la pena mencionar la documentación en general, y el diccionario de elementos HTML en particular, que ofrece Mozilla Developer Network. Un sitio actualizado, exhaustivo y accesible no sólo para HTML, sino CSS, JavaScript, y mucho más.

En las fotografías, estan resaltados los elementos que percibí.

<time> es un elemento que define fecha y hora, como los horarios en una parada de autobuses.

<p> es tal vez uno de los elementos más comunes en HTML, e indica simplemente el inicio de un párrafo. Podemos ver en el texto de arriba como hay varios párrafos. <span> es un elemento similar a <div>: son elementos que sirven para marcar textos pero que por sí mismos no significan nada. <span>, a diferencia de <div>, no es un marcador de secciones. En esta foto, <span> podría ser usado para separar dos idiomas diferentes.

<ol>, ‘ordered list’, marca una lista de elementos en un orden específico, normalmente números. La foto de arriba tambien podría ser una <ul>, ‘unordered list’, ya que no hay un orden explícito en la lista, pero hay un orden ciertamente ya que cualquier configuración alternativa no podría empezar con el elemento de en medio. Como en <ul>, en una <ol> cada elemento es un <li>, o ‘list item’.

<nav>, a diferencia de <href>, es un vínculo dentro de la misma página. Como en la foto, el letrero lleva a la entrada del negocio, dentro del mismo edificio. Si el letrero estuviese en otro lado, sería sin lugar a dudas <href>, o un hipervínculo.

<menu> es un elemento que contiene varias partes que llevan a acciones determinadas por los usuarios, tales como botones. También contienen <li>. En este ejemplo de la vida real, los usuarios del mundo eligen una acción, poner la basura en un contenedor o en otro.

<img> es uno de los elementos multimedia, tales como <video> o <audio>, que define una imagen dentro de la página. En este letrero, hay una imagen de una persona.

<div> divide secciones, y no tiene un significado inherente, puede ser determinado. En esta imagen, el encargado del jardín decidió que una sección sería de piedras y otra de pasto.

Despues de empezar a ver el código detrás del mundo real, poco a poco llegaremos a nuestra meta: ver todo como lo ve Neo al final de la primera película de Matrix:

gedit

Como parte de los ejercicios de la School of Webcraft, en el curso Webmaking 101, hay que elegir un editor de texto entre las muchas opciones que hay. La imagen de arriba revela de antemano mi elección, pero mencionaré brevemente algunas otras opciones.

Por cierto, el titulo de la esta entrada esta inspirado en lo que dijo la Pitonisa (The Oracle) en la película Matrix Reloaded. Dista mucho de ser la secuela perfecta, pero por lo menos, en cuanto a historia, esta segunda parte me pareció bien construída.

Volviendo al tema principal de la entrada, la elección de un editor de texto.  Mi sistema operativo es Ubuntu, una de las distribuciones populares de Linux, y las opciones en cuanto a programas son bastantes. Como parte del ejercicio para la lección, intente algunos programas que no conocía ademas de gedit, con el que ya estaba familiarizado.

gedit

Un editor de textos simple, pero a la vez con herramientas poderosas como destacar la sintaxis del código. gedit ademas reconoce ademas muchas sintaxis, haciendo de este aparentemente simple editor un programa versátil para programadores y desarrolladores de software. Simple, pero a la vez solido.

Kate

Kate

Intenté utilizar Kate, un editor de textos simple para KDE, pero como suele suceder con los programas diseñados para KDE, no funcionó bien con GNOME. Entiendo que existen muchos fans de KDE por ahí, pero a mi nunca me ha convencido. Parece una buena alternativa para esa interface gráfica.

Bluefish

Bluefish

Bluefish es ideal para escribir HTML: a diferencia de otros editores de texto cuyo propósito es escribir en cualquier lenguaje o nivel, Bluefish está optimizado para escribir HTML. No es tan pesado como un ambiente IDE, pero va un poco mas allá que un simple editor. Tiene herramientas útiles como autocompletar y ver el código en el navegador, herramientas muy útiles. Por el momento me quedo con gedit, pero Bluefish merece consideración para trabajo más pesado.

VIM

VIM

Vieja escuela. Complicado, pero si un editor ha sobrevivido tanto tiempo es por algo. VIM es un programa que bien vale la pena explorar, tal vez requiera más tiempo para dominar, por el momento nos quedamos con gedit.

School of Webcraft

Uno de los ejercicios del curso Webmaking 101, consiste en escribir a mano un poco de código HTML. Una versión mínima, parecida al ‘Hello World‘ pero con una mención de nuestro nombre y un párrafo.

La foto de lo que escribí se encuentra abajo.

HTML a mano

Copie esta hoja en el primer intento. Me fue fácil escribir el texto, ya que conozco la sintaxis del HTML, y entiendo lo que son los elementos y los atributos. Y HTML sera mas simple con HTML5, que incluye elementos multimedia.

School of Webcraft

El propósito de esta entrada únicamente es mencionar a la ‘School of Webcraft‘, y la entrada forma parte de uno de los ejercicios del curso de ‘Webmaking 101‘. Considero que al igual que Mozilla, que la web está en manos de todos, y que como parte de esa responsabilidad, tenemos que estar constantemente educándolos y educando a los demás. No tanto en el sentido de ‘pasar conocimiento’, sino en el sentido de hacer de la web un lugar mejor a través de la cooperación y la solidaridad. Les recomiendo a todos los que puedan inscribirse a este curso y, si pueden, apoyar a alguien más como su mentor. El curso también está disponible en español.

Volviendo al tema central de este blog, es increíble que este verano, la rivalidad entre DC Comics y Marvel llegue a su clímax… ¡En la pantalla grande! Por un lado, la tercera y última parte de la saga del Batman de Christopher Nolan se estrena este verano. ‘The Dark Knight Rises‘ tendrá como antagonista principal a Bane e incluirá a Catwoman, ademas de el resto de los personajes que aparecieron en las películas previas (Lucious Fox, Alfred Pennyworth, James Gordon). La pagina de la película la puedes revisar aquí, así como el trailer abajo…

Y el teaser:

Y en la otra esquina, el film Avengers Assemble reúne a todos los personajes de Marvel que aparecieron en películas previas que protagonizaron (Captain America, Thor, Hulk e Iron Man). Es una de las pocas veces que podremos ver un proyecto tan ambicioso, que emula a los eventos (o crossovers) de los comics, dónde las historias de cada uno de los personajes culminan en una sola aventura, y todos los superheroes se unen para enfrentar un mal mayor. Sin las cintas previas, esta no tendría sentido, y al parecer Marvel echará la casa por la ventana en un proyecto que competirá directamente con la continuación una de las películas mas taquilleras de la historia, ‘The Dark Knight‘. La fórmula que ha tenido tanto éxito en los comics, el evento, ¿tendrá la misma popularidad en la pantalla grande? Lo peor que puede ocurrir es que arruinen la franquicia de Iron Man. Pero poco importa, porque se puede presionar el botón de ‘reboot‘ (por cierto, el nuevo filme de Spidey promete ser mucho mejor que el original. Porque parece basado en Ultimate Spiderman). Uno de los trailers (el mejor, porque Hulk salva a su amigo Iron Man), abajo:

Eso es todo por el momento, espero que la próxima entrada de este blog no tarde tanto en salir.

Imagen de Hellboy: The Fury #3 Cover cortesía de CBR

Si estás siguiendo la miniserie ‘Hellboy: The Fury‘, escrita por Mike Mignola, ilustrada por Duncan Fegredo y editada por Dark Horse; o si te estás esperando al trade y quieres llegar ‘fresco’ y libre de ‘spoilers’, no sigas leyendo ésta entrada.

En entrevista con Comic Book Resources (CBR), Mike Mignola, el creador de Hellboy, confirma la muerte del personaje en el tercer número de ‘Hellboy: The Fury‘, que saldrá a la venta el ocho de agosto. En la entrevista revela un poco del futuro de la franquicia, lo que lo motivó a tomar la decisión de matar a Rojo, y un poco también de ‘Hellboy: House of the Living Dead‘, novela gráfica que narrará lo que hizo Hellboy en México que no se acuerda.

De acuerdo con Mignola, la muerte de Hellboy es parte de la evolución natural del personaje, avanzar su historia:

[...] Y no quiero ir nunca hacia atrás. Nunca quiero decir: “Superman ya no está muerto”, y regresar a como las cosas solían ser. Siempre puedo contar historias que ocurren en el pasado. Pero en cuanto a las historias en curso, siento que ya hemos presentado a Hellboy como agente de la B.P.R.D., o ésto o aquéllo. Pero no lo hemos mostrado muerto.

La muerte de Hellboy es significativa, a pesar de que todos sabemos que no es permanente (a diferencia de Ultimate Spidey, que sería de muy mal gusto que regresara).

Preview de ‘Hellboy: The Fury #3‘ (via CBR):

Imagen de Hellboy: The Fury #3 cortesía de CBR

Imagen de Hellboy: The Fury #3 cortesía de CBR

Imagen de Hellboy The Fury #3 cortesía de CBR

Imagen de Justice League #1 Page 1 Art cortesía de IGN

En la pasada San Diego Comic-Con (SDCC), el enfoque de las dos grandes compañías de superhéroes (Marvel y DC Comics), fue el captar a nuevos lectores. Al ‘New DCU‘, es decir, la nueva numeración para hacer más accesibles los personajes y series de DC Comics a nuevos lectores, también lo acompañaron anuncios de varios primeros números de Marvel (Hulk, X-Men) con el mismo afán.

Dentro de estos primeros números, uno de los más esperados es ‘Justice League #1‘, escrito por Geoff Johns e ilustrado por Jim Lee. El estilo de Lee como artista ha hecho escuela, y todos sus diseños e ideas serán una pieza clave para el ‘New DCU’ que saldrá en septiembre.

Arte del primer número de Justice League, primera página arriba (via IGN):

Imagen de Justice League #1 Pages 2-3 cortesía de IGN

Imagen de Justice League #1 Page 4 cortesía de IGN

Imagen de Justice League #1 Page 5 cortesía de IGN

Imagen de Justice League #1 Page 6 cortesía de IGN

Imagen de Justice League #1 Page 7 cortesía de IGN

Imagen de Justice League #1 Page 8 cortesía de IGN

Marvel re-edita ‘X-Men #1′ de Chris Claremont y Jim Lee

En un movimiento conocido en la industria del comic como ‘¿Ah sí, tienen a Jim Lee? ¡Nosotros también lo tuvimos!’, Marvel re-imprimirá en octubre el primer número de el segundo volumen de X-Men (de 1991), con nueva coloración en las páginas. Cabe mencionar que la serie actual de X-Men también será re-numerada después del evento ‘Schism‘.

Preview de la próxima re-edición de ‘X-Men #1‘, con sus nuevos colores (via IGN):

Imagen de X-Men #1 Vol. 2 Cover (Old Color) cortesía de IGN

Imagen de X-Men #1 Vol. 2 Cover (New Color) cortesía de IGN

Imagen de X-Men #1 Vol. 2 Interior coresía de IGN

Imagen de X-Men #1 Vol. 2 Interior cortesía de IGN

Imagen de X-Men #1 Vol. 2 Interior cortesía de IGN

Imagen de X-Men #1 Vol. 2 Interior cortesía de IGN

Una buena oportunidad para volver a leer este título.

Imagen de Fear Itself: Deadpool #2 Cover cortesía de Deadpool Bugle

Con la San Diego Comic Con (SDCC) y todas las noticias que de ahí están saliendo, es fácil olvidar lo verdaderamente importante: ayer salió el segundo número de la miniserie/tie-in de Fear Itself, ‘Fear Itself: Deadpool #2‘, escrita por Chris Hastings (Dr. McNinja) e ilustrada por Bong Dazo (portada por Ryan Stegman).

Soy un fanático de McNinja mucho más que de Deadpool, pero hay que reconocer que Hastings ha sabido llevar el humor característico del doctor a ésta miniserie de Deadpool. En este segundo número, Deadpool utilizará la epidemia de miedo y destrucción causada por los eventos de Fear Itself para obtener dinero, con la ayuda de… ¡The Walrus!

Preview del ‘Fear Itself: Deadpool #2‘ (via Deadpool Bugle, Dr. McNinja):

Imagen de Fear Itself: Deadpool #2 Page 1 cortesía de Deadpool Bugle

Imagen de Fear Itself: Deadpool #2 Page 2 cortesía de Deadpool Bugle

Imagen de Fear Itself: Deadpool #2 Page 3 cortesía de Deadpool Bugle

Imagen de Fear Itself: Deadpool #2 Page 4 cortesía de Deadpool Bugle

Imagen de Fear Itself: Deadpool #2 Page 5 cortesía de Deadpool Bugle