Embat Consultors: Desarrollo web y Soluciones con Software Libre http://embatconsultors.com/blog Embat Consultors: Desarrollo web y Soluciones con Software Libre Thu, 02 Feb 2012 11:25:18 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Solocomedía, Alberto Casado, Ángel Martín y Rober Bodegas http://embatconsultors.com/blog/nuestros-proyectos/solocomedia-alberto-casado-angel-martin-y-rober-bodegas.html http://embatconsultors.com/blog/nuestros-proyectos/solocomedia-alberto-casado-angel-martin-y-rober-bodegas.html#comments Thu, 02 Feb 2012 11:25:18 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1706

Nuevo proyecto estrenado el 28 de diciembre, Solo Comedia, es un proyecto de Alberto Casado, Ángel Martín y Rober Bodegas en el que trabajamos hace unos meses.

La idea, al menos a priori, es sencilla: Divertir a la gente, y de eso ellos saben un rato… Otro gallo cantaría si nos dieran el micro a nosotros ;-)

En un mes han tenido 500.000 visitas, nada mal, ¿verdad?, y en los siguientes meses iremos sacando una serie de novedades y mejoras que pueden ser interesantes. Es divertido trabajar con ellos.

El proyecto está montado sobre un WordPress, con un sistema de publicidad extra, cacheado con wp-cache (de Ricardo Galli), y ahora tenemos entre manos algo de comunidad, tienda, etc… También vamos a probar de servir los vídeos sin plataformas de terceros (ahora están en Vimeo), alojando todo el material, pero aún estamos en fase de pruebas de rendimiento con la gente de JoopBox, poco a poco ;-)

Bueno, les deseamos suerte a los 3 campeones, que en esta época, y habiendo salido de la televisión… han apostado por Internet.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/nuestros-proyectos/solocomedia-alberto-casado-angel-martin-y-rober-bodegas.html/feed 0 Fast HTML5: 16, Video http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html#comments Mon, 30 Jan 2012 14:00:06 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1674 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, datalist, en esta… hablaremos algo más sobre html5, y hoy toca: <video>.

Como sabéis, internet, además de crecer exponencialmente en contenido de vídeos, ha tenido un “representante” hasta la fecha… Sí, supongo que todos sabéis que Flash era (y en muchos casos aún sigue siendo) la mayor forma de reproducción de vídeos en internet.

Y digo “era”, porque html5 ha llegado para quitarle ese lugar a Flash.

Desde que html5 está presente en los navegadores modernos (y lo que le queda aún…) Flash ha perdido enteros en la lucha por reproductores de vídeo (y formatos de vídeo, evidentemente), ya que con html5 (si el navegador es moderno) no necesitas instalar nada más para poder visionar correctamente los vídeos, y con flash, debíais instalar su plugin de visionado.

Desde este blog, hace ya muchísimo tiempo (artículo posiblemente desfasado) se ha luchado en algunas ocasiones contra flash, ya que defendemos a ultranza todo lo libre y abierto, y flash, como sabéis… tiene poco de libre ;-) y ha sido gracias al tema del vídeo (y dispositivos móviles) que definitivamente ha recibido los golpes necesarios como para, como mínimo, knockeralo…

La descripción de video en la documentación:

A video element is used for playing videos or movies, and audio files with captions.

Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.

Bueno, vamos a ello.

Como dice, es un elemento html5 para reproducir vídeos, y audios con capturas, con una serie de parámetros que el usuario no verá, pero que son útiles para los navegadores, tanto para el visionado como metadatos para búsquedas, etc…

Ejemplo completo (pertenece a esta página, pegadle un ojo también ;-)), y comentamos:

<body>
...
    <video width="640" height="360" poster="poster.jpg" controls autoplay>
        <!-- MP4 must be first for iPad! -->
        <source src="video.mp4" type="video/mp4"  /><!-- Safari / iOS, IE9 -->
        <source src="video.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
        <source src="video.ogv" type="video/ogg"  /><!-- Firefox3.6+ / Opera 10.5+ -->
        <object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
            <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
            <param name="movie" value="video.swf" />
            <param name="flashvars"
                value="autostart=true&controlbar=over&image=poster.jpg&file=archivo.mp4" />
            <!-- fallback image -->
            <img src="poster.jpg" width="640" height="360" alt="alt" title="title" />
        </object>
    </video>
...
</body>

Parece complicado, ¿verdad?

Únicamente, lo que estamos haciendo es asegurándonos que en todos los navegadores actuales haya una solución de “lectura” (visionado, en este caso) que esté nativamente implantada en ellos, es decir, que no tengan que instalar nada para poder verlo correctamente… y en el caso de que el navegador sea antiguo o no pueda reproducirlo, se le da la opción del visionado con flash (si no lo tiene tampoco, entonces sí tendrá que instalarlo, como hasta ahora…).

Como veis, hay algunos detalles interesantes, como “autoplay” y “controls”, que son bastante evidentes, también hay otros interesantes, que no están puestos como “autobuffer”.

El atributo “poster”, muestra una imagen al empezar, hasta que no se le da al “play” (como veis también está dentro de <object>, como tag <img>).

En la página “Video For Everybody” Test Page, os informa muy bien sobre los diferentes navegadores y versiones, y sobre los formatos, os recomiendo que os paséis por ella, e investiguéis bien el código fuente y sus instrucciones, porque es verdaderamente útil.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-16-video.html/feed 0 stop SOPA http://embatconsultors.com/blog/internet/stop-sopa.html http://embatconsultors.com/blog/internet/stop-sopa.html#comments Wed, 18 Jan 2012 23:00:18 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1669

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/internet/stop-sopa.html/feed 0 Feliz 2012, y agradecimientos http://embatconsultors.com/blog/embat-consultors/feliz-2012-y-agradecimientos.html http://embatconsultors.com/blog/embat-consultors/feliz-2012-y-agradecimientos.html#comments Sat, 31 Dec 2011 23:01:18 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1650

No podíamos ser menos…

Embat os desea un feliz año entrante.

Que el 2012 sea un poquito mejor que el 2011 y un poquito peor que el 2013 ;-)

¡Felicidades de todo el equipo!

Deseamos dar las gracias a:

  • Iván Caparrós (de Contenido SEO, porque sin él, Embat no sería lo que es, ni trabajar sería tan y tan divertido y  porque es lo más similar a un hermano)
  • Carlos Hernández (que podamos avanzar con Hosteltur por muchos años y agradecerle su inestimable ayuda)
  • Ángel Martín (porque es un verdadero placer que haya confiado en nosotros para solocomedia, y ya puestos, ¡que el proyecto triunfe!)
  • David Hernández (aka Dabo, por ser un crack, simplemente, y porque sus podcast son lo mejor :-))
  • Luis Eduardo Sánchez (de Hallucina, porque a pesar de usar Apple, entiende el concepto de libertad)
  • Sabrina Acuña (de WUAI, porque es uno de los mejores talentos que me he cruzado en el campo del diseño)
  • A nuestras mujeres, Patry y Lina (porque si no comprendieran nuestra pasión por esto, no sé que pasaría…)
  • A gente como Antoni Aloy (de APSL, porque conozco a pocos programadores tan competentes, y es un placer charlar con él), Ricardo Galli (de Meneame, porque es un referente para mi, y es mucho más cercano de lo que puede parecer, pese a que ¡aún ni nos vimos!), Eladio (de JoopBox, por su inestimable ayuda), y porque ellos nos inspiran día a día
  • A Miquel Frontera y Benet Joan Darder (por los buenos momentos juntos, y lo que aprendemos de ellos), Enrique Castro (porque sí, porque lo merece, y porque gente como él animan a seguir luchando como él mismo lo hace), Toni Serna (por su convencimiento con el software libre, y su pasión de enseñar… y porque el curso que estamos dando en EDIB nos está encantando), a Jorge (porque nos ayuda muchísimo desde Ibiza, y allí somos “forasters”), a David Martín (aka Suki, porque nos ha tirado un cable siempre que hemos necesitado) y un larguísimo etcétera, que sería complicado contemplar en estos minutos que estoy escribiendo…

Joan y Juan Antonio.

Esperemos, simplemente… Que Embat pueda seguir siendo.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Posts más comentados:

]]> http://embatconsultors.com/blog/embat-consultors/feliz-2012-y-agradecimientos.html/feed 3 Fast HTML5: 15, datalist http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html#comments Wed, 21 Dec 2011 10:13:25 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1632 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, input, range, en esta… hablaremos algo más sobre formularios, y hoy toca: <datalist>.

Seguimos con las estradas relacionadas con elementos de formulario, que es donde más cambios hay dentro del html5, y donde más útiles son.

En este caso veremos como la solución html5 a algunos problemas actuales, es añadir un tag que como veréis, es bastante útil.

Como siempre, la descripción de datalist en la documentación:

The datalist element represents a set of option elements that represent predefined options for other controls. The contents of the element represents fallback content for legacy user agents, intermixed with option elements that represent the predefined options. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.

The datalist element is hooked up to an input element using the list attribute on the input element.

Bueno, ¿qué quiere decir?

Representa un conjunto de elementos que son las opciones predefinidas para otro control, el que estamos pulsando.
Supongo que todos conocéis los famosos “autocomplete”, que hasta ahora programábamos con Javascript, y AJAX (normalmente, si hay petición a la DB), pues bien, con este nuevo elemento podríamos prescindir, a priori, de tener que programar todo eso.

Vamos con un ejemplo muy sencillo:

<body>
...
    <form>
        <fieldset>
            <legend>Probando los datalist</legend>
            <label>Busca en la agenda:
                <input type="text" name="agenda" list="agenda" />
                <datalist id="agenda">
                    <option value="Luis Eduardo">
                    <option value="Joan">
                    <option value="Iván">
                    <option value="Juan Antonio">
                    <option value="Jorge">
                </datalist>
            </label>
        </fieldset>
    </form>
...
</body>

Podríamos decir, para simplificar mucho, que es como un <select>, pero en lugar de seleccionar en primera instancia la opción, puedes ir escribiéndola y te va presentando las posibles opciones.

Por tanto, volvemos a repetir un poco lo de anteriores entradas, con html5 simplificamos el uso de scripts, ya que, todos los que son más comunes ya vendrán nativamente en los navegadores con html5, y así evitamos el uso de tanto scripts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-15-datalist.html/feed 1 Fast HTML5: 14, input, range http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html#comments Tue, 13 Dec 2011 14:15:54 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1610 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, input, placeholder, email, url, date, autofocus, required, en esta… hablaremos algo más sobre el <input> con más novedades con el atributo type: “range“.

Ya comentamos en el anterior mini post lo que significaba el tag <input>, y hoy hablaremos de otro de sus nuevos valores para type: “range“.

Con “range” obtenemos algo similar a la barra de progress que hablamos el otro día pero esta vez, el valor lo escoge el usuario, es decir, con su interacción selecciona el rango que desea (y que se le permite).

Volvemos a presentar descripción de input en la documentación, para no olvidar que estamos hablando de este tag y de sus atributos:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

Quedaos rápidamente con los atributos type (ya lo conocéis) min (lo conocéis de otras), max (también lo conocéis de otras), value (sin problemas) y step (este es nuevo, y lo que nos indica son los “saltos” que le son permitidos al usuario para avanzar o retroceder dentro del rango):

<body>
...
    <form action="" method="">
        <fieldset>
            <legend>Datos</legend>
            <input id="range" type="range" min="1" max="201" value="5" step="50">
            <input type="button" onclick="alert(document.getElementById('range').value);" value="Testear">
        </fieldset>
    </form>
...
</body>

Probad el resultado en Chrome, aquí lo tenéis:

 

TIP: Para saber en qué navegadores podéis probar y en cuáles no, tenéis la web Can I use.

Como podéis ver, el día que html5 sea realmente soportado por todos los navegadores el ahorro de javascript será realmente enorme… Y aún no hemos entrado en detalles en CSS3, donde sin duda también hay un gran camino recorrido para ahorrar interacciones y transiciones… Pronto más. Aunque ahora mismo ya se puede poner en práctica, simplemente tenéis que vigilar con qué navegadores no hay problemas, y con los que “si los haya”, utilizar soluciones como html5 boilerplate o modernizr, de las que hablaremos más detenidamente en futuros posts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-14-input-range.html/feed 1 Fast HTML5: 13, input, placeholder, email, url, date, autofocus, required http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html#comments Mon, 05 Dec 2011 14:45:29 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1590 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, mark y progress en html5, en esta… hablaremos sobre el <input> y las novedades en su atributo “type”.

<input> como ya sabéis de HTML, es una etiqueta mediante la cual pasamos datos a través de un formulario <form>.

Tranquilos porque seguiremos hablando de “type”… ya que da para varios posts, en lugar de eso, iremos completando diferentes formularios a lo largo de estos posts, y así damos un repaso a las posibilidades de los nuevos “type’s” que trae HTML5.

La descripción de input en la documentación:

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

Ejemplo rápido de <form> con variedad de <input> types:

<body>
...
    <form action="" method="">
        <fieldset>
            <legend>Datos</legend>
            <input type="text" placeholder="Tu nombre" name="nombre" required autofocus>
            <input type="email" placeholder="Correo electrónico" name="email" required>
            <input type="url" placeholder="Tu web" name="url">
            <input type="date" placeholder="Fecha" name="fecha">
            <input type="submit" value="Enviar">
        </fieldset>
    </form>
...
</body>

¿Novedades?

Seguro que ya las habéis notado, pero por si acaso las iremos enumerando:

  • El atributo “placeholder” es un texto que se pone sobre el input, una vez haces focus sobre él, se quita, y si no pones nada en el interior del input, al quitar el foco sobre el mismo, vuelve a aparecer ese texto…
  • El atributo “required”, hace que al submitar el formulario, no lo envíe si no está rellenado, y te avise mediante una alerta.
  • El atributo “autofocus”, hace que nada más cargar la página, el cursor se sitúe en ese input.
  • El atrituto “type = email”, obliga a que sea una dirección de email correcta.
  • El atrituto “type = url”, obliga a que sea una dirección web correcta.
  • El atrituto “type = date”, te despliega opciones de fecha.

En resumen: Lo que antes tenías que hacer con javascript, ahora ya lo hace HTML5.

Fantástico, ¿verdad?… Seguiremos con los formularios en los siguientes posts.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-13-input-placeholder-email-url-date-autofocus-required.html/feed 4 Fast HTML5: 12, mark y progress http://embatconsultors.com/blog/embat-consultors/fast-html5-12-mark-y-progress.html http://embatconsultors.com/blog/embat-consultors/fast-html5-12-mark-y-progress.html#comments Thu, 01 Dec 2011 11:14:32 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1583 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, figure y figcaption en html5, en esta… elemento/s <mark> y <progress>

<mark> Representa una extensión de texto marcado o resaltado para fines de referencia.

<progress> Dibuja una barra de progreso, como las típicas barras que te van indicando el tiempo que llevan ejecutándose y el que falta por terminar… Por ejemplo, descargando un archivo de algún servidor.

La descripción de mark en la documentación:

The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.

Y la de progress:

Represents the completion progress of a task. Progress may be either indeterminate — meaning it is unclear how much work remains before the task is complete (e.g., the task is waiting for a response from a remote host) — or a numeric value between 0 and a given maximum, explicitly specifying the fraction of work that has so far been completed.

Ejemplo rápido de <mark>:

<body>
...
    <p>
        Aprende <mark>HTML5</mark> rápidamente, con breves entradas de 10 minutos.
    </p>
...
</body>

Ejemplo rápido de <progress>:

<body>
...
    <p>
        Tiempo de espera restante: <progress min="0" max="100" value="85"></progress>
    </p>
...
</body>

¿Cómo se ve el ejemplo de <progress>?

Tiempo de espera restante:

Evidentemente, <progress> es un elemento perfecto para ir cambiando mediante javascript el atributo “value”, y así ir incrementando la barrita.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/embat-consultors/fast-html5-12-mark-y-progress.html/feed 4 Fast HTML5: 11, figure y figcaption http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html#comments Wed, 30 Nov 2011 14:40:30 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1571 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, hgroup en html5, en esta… elemento/s <figure> y <figcaption>

<figure> está principalmente pensado para utilizar junto a <figcaption> y en resumen, es para diagramas, ilustraciones, fotos (sería perfecto, por ejemplo, para pedazos de código en blogs de programación ;-)).

<figcaption> es opcional, y podemos ponerlo antes o después de la imagen en cuestión, es algo así como el “pie de foto”, en los ejemplos lo veréis claro.

La descripción de figure en la documentación:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Y la de figcaption:

The figcaption element represents a caption or legend for a figure.

Ejemplo rápido:

<body>
...
    <figure>
        <img src="img/stallman.jpg" alt="Richard Stallman">
    </figure>
...
</body>

Ahora, usando <figcation> dentro.

<body>
...
    <figure>
        <img src="img/stallman.jpg" alt="Richard Stallman">
        <figcation>
            Richard Stallman, Ilustre evangelizador y defensor del Software Libre, fotografía tomada por
            <a href="http://joanballestermoragues.com">Joan Ballester</a> en Palma de Mallorca.
        </figcation>
    </figure>
...
</body>

Pensad que también podríamos ponerlo antes de la imagen, o que podríamos utilizar más de una imagen, y poner varias con un mismo <figcation> dentro.

Cuando mencioné lo de pedazos de código, arriba, me refería a que también podríamos utilizar ambos tags (<figure> y <figcaption>), por ejemplo, con un <blockquote> en lugar de un <img>, a modo de explicación del código insertado en el <blockquote>, que sería perfecto para blogs como este… (tendremos que ponernos con ello ;P)

Interesante, ¿verdad?

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-11-figure-y-figcaption.html/feed 2 Fast HTML5: 10, hgroup http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html#comments Fri, 25 Nov 2011 10:05:27 +0000 Joan Ballester http://embatconsultors.com/blog/?p=1568 Entrada de la serie: Aprender html5 rápidamente (fast-html5).


La anterior entrega, footer en html5, en esta… elemento/s <hgroup>

Este elemento no tiene excesivo secreto, si os fijáis en la documentación es simple y expeditiva, agrupar uno o más elementos de <h1> a <h6>, siempre que semánticamente valga la pena.

Es más, no hay demasiadas webs que lo utilicen por norma, pero nos parece interesante, hay que crecer en el uso de elementos semánticos, como en nuestro lenguaje cotidiano intentamos crecer día a día, y hablar más correctamente, con html tiene que suceder lo mismo, debemos “hablar” mejor ;-)

La descripción en la documentación:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

Ejemplo rápido:

<body>
...
    <hgroup>
        <h2>
            Sección HTML5
        </h2>
        <h3>
            Hoy hablaremos del tag <hgroup>
        </h3>
    </hgroup>
    ... Aquí podría venir un section, por ejemplo, sobre <hgroup>
</body>

Como ocurre con tantísimos elementos html5, podemos usar el hgroup siempre que la semántica y la coherencia nos dicte que pueden agrupar elementos de título correctamente.

©2012 Embat Consultors: Desarrollo web y Soluciones con Software Libre. All Rights Reserved.

.

Otros posts relacionados:

]]> http://embatconsultors.com/blog/post-tecnico/fast-html5-10-hgroup.html/feed 1