tierradentro

AJAX en el interín

2011-10-11T11:22:00.000-07:00

Antes que nada, una disculpa. Como dije al inicio de la serie, voy "haciendo", junto a los probables lectores de este blog, los ejercicios que propongo. Esto da como resultado que, como trato de dar soluciones a un problema determinado, me encierre en vericuetos insospechados. Así, ante el reto de actualizar una página, sin salirme de ella e informar al usuario sobre el resultado de la interacción, me he tropezado con que tengo que aprender AJAX, pero aplicado a HTML 5. De tal suerte, lo primerito que hay que hacer, es definir qué es AJAX. Veamos:

Asynchronous JavaScript And XML es lo que, abreviado, conocemos como AJAX; un conjunto de tecnologías o lenguajes que permiten, al diseñador o programador o, aún mejor, al diseñador-programador web, crear sitios que son, en sí mismos, una aplicación que el usuario puede manipular con un alto grado de sofisticación. Estas tecnologías son: HTML-JavaScript-CSS-DHTML-PHP/ASP.NET/JSP-XML, que, juntas, permiten actualizar parte de una página con información depositada en el servidor o en una base de datos, sin actualizar la página de manera completa.
El punto más destacado para quienes nos enfrentamos a este conjunto de tecnologías, es el dominio de todas ellas, para poder hacerlas compatibles y funcionales. Así que si no tienen ni idea con por lo menos una de las que hemos nombrado, busquen y actualicen su conocimiento. En internet hay miles de sitios que les pueden ayudar.
Las siguientes publicaciones, versarán sobre un pequeño desarrollo con AJAX. Espero que no desesperen.

HTML 5 | Ejemplo práctico IV

2011-10-07T11:57:00.000-07:00

Antes de comenzar con el estilo, recapitulemos la estructura de nuestra Sala de prensa. Veamos (sólo establecemos la estructura y dejamos de lado los contenidos, para no equivocarnos) Es muy importante que establezcan la estructura, la fijen casi de memoria, y se apresten a quebrarse un poco la cabeza, para entender cabalmente, aunque, claro, siempre quedará la opción de preguntar. Ahora sí, comencemos:
<!doctype html>
<html lang="es">
<head>
    <title>...</title>
    <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
</head>
<body>

    <header>
        <h1>...</h1>
    </header>

    <nav>
        <ul>
            <li class="selected"><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li class="subscribe"><a href="#">...</a></li>

        </ul>
    </nav>
    <section id="intro">
        <header>
            <h2>...</h2>
        </header>
        <p>....</p>
        <img src="imagenes/tribuno" alt="tribuno" />

    </section>
    <div id="content">
        <div id="mainContent">
            <section>
                <article class="blogPost">
                    <header>
                        <h2>...</h2>
                        <p>... <time datetime="2011-09-30T23:31-06:00">mes-día-año</time> | <a href="#">...</a> - <a href="#comments">...</a></p>

                    </header>
                    <div>
                        <p>...</p>

                        <img src="imagenes/tribuno2.png" alt="tribuno" />

                        <p>...</p>

                        <p>...</p>
                    </div>

                </article>
            </section>
            <section id="comentarios">
                <h3>...</h3>
                <article>
                    <header>
                        <a href="#">...</a> | <time datetime="2009-06-29T23:35:20-06:00">...</time>

                    </header>
                    <p>...</p>
                </article>
                <article>
                    <header>
                       <a href="#">...</a> | <time datetime="2009-06-29T23:35:20-06:00">...</time>

                    </header>
                    <p>...</p>
                </article>
                <article>
                    <header>
                        <a href="#">...</a> | <time datetime="2009-06-29T23:35:20-06:00">...</time>

                    </header>
                    <p>...</p>
                </article>
            </section>
            <form action="#" method="post">
                <h3>...</h3>
                <p>
                    <label for="name">...</label>

                    <input name="name" id="name" type="text" required />
                </p>
                <p>
                    <label for="email">E-mail</label>
                    <input name="email" id="email" type="email" required />
                </p>
                <p>
                    <label for="website">Web</label>

                    <input name="website" id="website" type="url" />
                </p>
                <p>
                    <label for="comment">Comentario</label>
                    <textarea name="comment" id="comment" required></textarea>
                </p>
                <p><input type="submit" value="Enviar" /></p>
            </form>

        </div>
        <aside>
            <section>
                <header>
                    <h3>...</h3>
                </header>
                <ul>
                    <li><a href="#">...</a></li>

                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </section>
            <section>

                <header>
                    <h3>...</h3>
                </header>
                <ul>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </section>
        </aside>

    </div>
    <footer>
        <div>
            <section id="nosotros">
                <header>
                    <h3>...</h3>
                </header>
                <p>....</p>

            </section>
            <section id="blogroll">
                <header>
                    <h3>...</h3>
                </header>
                <ul>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>

                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </section>
            <section id="popular">
                <header>

                    <h3>...</h3>
                </header>
                <ul>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>

                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                    <li><a href="#">...</a></li>
                </ul>
            </section>
        </div>

    </footer>

</body>
</html>

Empecemos a definir estilos. Casi todo lo podrán reconocer, pues no varía mucho de la versión 2.1 de CSS.

Primera parte

Aquí, la primera parte del código, que va comentado, para explicarlo de una sóla vez.

/*------------------------------
/// Posicionamiento básico ///
------------------------------*/
/* Reinicio de propiedades CSS */
/* Primero, nos aseguramos que el navegador comience desde "0", en términos de CSS. Es claro que en un proyecto real, el método de "resetear" el css, es más complejo y metódico. Pueden buscar en la red, tutoriales al respecto.*/
{
    margin: 0;
    padding: 0;
}
/*Ahora, nos aseguramos que el navegador interprete todos elementos de HTML 5, como un bloque, es decir, se interpreta como una caja compacta con una línea antes y después del bloque. Esto nos sirve para manipular con soltura los elementos HTML 5*/
header, footer, section, aside, nav, article {
    display: block;
}
/*Ahora formateamos el cuerpo general.*/
body {
    margin: 0 auto;/*hay que recordar que la propiedad "margin", se define en sus funciones pares como <top><bottom><rigth><left>, por lo que en este caso, el margen par arriba-abajo, es de valor cero, y el par derecha-izquierda, es automático, es decir, el navegador establecerá los márgenes iguales a los lados, por lo que nuestra página se colocará en medio de la pantalla, sin más trucos complejos como antaño*/
    padding: 22px 0;/*la propiedad "padding", se puede definir también en pares, de igual forma que margin, por lo que en este caso, estamos estableciendo 20 pixeles arriba y abajo, y cero a los lados*/
    width: 960px;/*la propiedad width, establece el ancho de un elemento, independientemente de margin, padding o border. Entonces, en este caso, le damos un ancho general a nuestra pantalla de 960 pixeles.*/
    font: 13px/22px Helvetica, Arial, sans-serif; /*Como sabemos, la propiedad font acepta no sólo los valores de tamaño, familia y estilo, sino lo que en diseño editorial, conocemos como "interlineado". así, en este caso, establecemos el tamaño general de la fuente en 13 pixeles sobre 20. La familia, dependiendo el cliente, en Helvética, Arial ouna variante "sans-serif" o palo seco.*/
    /*background. Esta propiedad, supongo, está de más explicarla... por ahora. Cuando se vuelva más compleja, la retomaremos.*/
    background: #d6d7d5 url("imagenes/fondo_body.jpg") repeat-x;
}
/*Seguimos vistiendo a nuestra página, ahora con los encabezados principales (h1, h2... etc.)*/

En otro post, continuaré con el código CSS. Saludos

HTML 5 | Ejemplo práctico III

2011-09-30T10:44:00.000-07:00

Hasta donde recuerdo, nuestro código de la "Sala de Prensa", había llegado a este punto:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>
</header>
<nav>
    <ul>
        <li><a href="#">Notas</a></li>
        <li><a href="#">La empresa</a></li>
        <li><a href="#">Archivero</a></li>
        <li><a href="#">Contacto</a></li>
        <li class="subscribe"><a href="#">Notas vía RSS</a></li>
    </ul>
</nav>
<section id="principal">
<header>
        <h2>In nova fert animus mutatas</h2>
    </header>
    <p>In nova fert animus mutatas dicere formas corpora; di, coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen! Ante mare et terras et quod tegit omnia caelum unus erat toto naturae vultus in orbe, quem dixere chaos: rudis indigestaque moles nec quicquam nisi pondus iners congestaque eodem non bene iunctarum discordia semina rerum.</p>
</section>
<section>
    <article class="notas">
        <header>
            <h2>Título de la nota</h2>
            <p>Escrita en <time datetime="2011-09-29T12:45:45-06:00">Septiembre 29 de 2011</time> por <a href="#">Jefatura de Información</a> - <a href="#comments">1 comentario</a></p>
        </header>
        <p>Hanc deus et melior litem natura diremit. nam caelo terras et terris abscidit undas et liquidum spisso secrevit ab aere caelum. quae postquam evolvit caecoque exemit acervo, dissociata locis concordi pace ligavit: ignea convexi vis et sine pondere caeli emicuit summaque locum sibi fecit in arce; proximus est aer illi levitate locoque; densior his tellus elementaque grandia traxit et pressa est gravitate sua; circumfluus umor ultima possedit solidumque coercuit orbem.</p><p>Sic ubi dispositam quisquis fuit ille deorum congeriem secuit sectamque in membra coegit, principio terram, ne non aequalis ab omni parte foret, magni speciem glomeravit in orbis. tum freta diffundi rapidisque tumescere ventis iussit et ambitae circumdare litora terrae; addidit et fontes et stagna inmensa lacusque fluminaque obliquis cinxit declivia ripis, quae, diversa locis, partim sorbentur ab ipsa, in mare perveniunt partim campoque recepta liberioris aquae pro ripis litora pulsant. iussit et extendi campos, subsidere valles, fronde tegi silvas, lapidosos surgere montes,
utque duae dextra caelum totidemque sinistra parte secant zonae, quinta est ardentior illis, sic onus inclusum numero distinxit eodem cura dei, totidemque plagae tellure premuntur. quarum quae media est, non est habitabilis aestu; nix tegit alta duas; totidem inter utramque locavit temperiemque dedit mixta cum frigore flamma.</p>
    </article>
</section>
<section id="comentarios">
    <header>
        <h3>La gente ha dicho</h3>
    </header>
    <article>
        <header>
            <a href="#">Octavio Paz</a> | <time datetime="2011-09-29T13:45:45-06:00">Septiembre 29 de 2011</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </article>
    <article>
        <header>
            <a href="#">Javier Sicilia</a> | <time datetime="2011-09-29T17:45:45-06:00">Septiembre 29 de 2011</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </article>
</section>
    <form action="#" method="post">
        <h3>Di lo que piensas</h3>
        <p>
            <label for="name">Nombre</label>
            <input name="name" id="name" type="text" required />
        </p>
        <p>
            <label for="email">E-mail</label>
            <input name="email" id="email" type="email" required />
        </p>
        <p>
            <label for="website">Website</label>
            <input name="website" id="website" type="url" />
        </p>
        <p>
            <label for="comment">Comentario</label>
            <textarea name="comment" id="comment" required></textarea>
        </p>
        <p><input type="submit" value="Post comment" /></p>
    </form>
Y para que esto quede bien, falta hacer un poco más de código (que ya no explicaré), pero que pueden ver aquí:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>
</header>
<nav>
    <ul>
        <li><a href="#">Notas</a></li>
        <li><a href="#">La empresa</a></li>
        <li><a href="#">Archivero</a></li>
        <li><a href="#">Contacto</a></li>
        <li class="subscribe"><a href="#">Notas vía RSS</a></li>
    </ul>
</nav>
<section id="principal">
<header>
        <h2>In nova fert animus mutatas</h2>
    </header>
    <p>In nova fert animus mutatas dicere formas corpora; di, coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen! Ante mare et terras et quod tegit omnia caelum unus erat toto naturae vultus in orbe, quem dixere chaos: rudis indigestaque moles nec quicquam nisi pondus iners congestaque eodem non bene iunctarum discordia semina rerum.</p>
</section>
<section>
    <article class="notas">
        <header>
            <h2>Título de la nota</h2>
            <p>Escrita en <time datetime="2011-09-29T12:45:45-06:00">Septiembre 29 de 2011</time> por <a href="#">Jefatura de Información</a> - <a href="#comments">1 comentario</a></p>
        </header>
        <p>Hanc deus et melior litem natura diremit. nam caelo terras et terris abscidit undas et liquidum spisso secrevit ab aere caelum. quae postquam evolvit caecoque exemit acervo, dissociata locis concordi pace ligavit: ignea convexi vis et sine pondere caeli emicuit summaque locum sibi fecit in arce; proximus est aer illi levitate locoque; densior his tellus elementaque grandia traxit et pressa est gravitate sua; circumfluus umor ultima possedit solidumque coercuit orbem.</p><p>Sic ubi dispositam quisquis fuit ille deorum congeriem secuit sectamque in membra coegit, principio terram, ne non aequalis ab omni parte foret, magni speciem glomeravit in orbis. tum freta diffundi rapidisque tumescere ventis iussit et ambitae circumdare litora terrae; addidit et fontes et stagna inmensa lacusque fluminaque obliquis cinxit declivia ripis, quae, diversa locis, partim sorbentur ab ipsa, in mare perveniunt partim campoque recepta liberioris aquae pro ripis litora pulsant. iussit et extendi campos, subsidere valles, fronde tegi silvas, lapidosos surgere montes,
utque duae dextra caelum totidemque sinistra parte secant zonae, quinta est ardentior illis, sic onus inclusum numero distinxit eodem cura dei, totidemque plagae tellure premuntur. quarum quae media est, non est habitabilis aestu; nix tegit alta duas; totidem inter utramque locavit temperiemque dedit mixta cum frigore flamma.</p>
    </article>
</section>
<section id="comentarios">
    <header>
        <h3>La gente ha dicho</h3>
    </header>
    <article>
        <header>
            <a href="#">Octavio Paz</a> | <time datetime="2011-09-29T13:45:45-06:00">Septiembre 29 de 2011</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </article>
    <article>
        <header>
            <a href="#">Javier Sicilia</a> | <time datetime="2011-09-29T17:45:45-06:00">Septiembre 29 de 2011</time>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </article>
</section>
    <form action="#" method="post">
        <h3>Di lo que piensas</h3>
        <p>
            <label for="name">Nombre</label>
            <input name="name" id="name" type="text" required />
        </p>
        <p>
            <label for="email">E-mail</label>
            <input name="email" id="email" type="email" required />
        </p>
        <p>
            <label for="website">Website</label>
            <input name="website" id="website" type="url" />
        </p>
        <p>
            <label for="comment">Comentario</label>
            <textarea name="comment" id="comment" required></textarea>
        </p>
        <p><input type="submit" value="Post comment" /></p>
    </form>
<section>
    <header>
        <h3>Temas</h3>
    </header>
        <ul>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Sit amet consectetur</a></li>
            <li><a href="#">Adipisicing elit sed</a></li>
            <li><a href="#">Do eiusmod tempor</a></li>
            <li><a href="#">Incididunt ut labore</a></li>
        </ul>
</section>
<aside>
<section>
    <header>
        <h3>Histórico</h3>
    </header>
        <ul>
            <li><a href="#">Marzo 2011</a></li>
            <li><a href="#">Abril 2011</a></li>
            <li><a href="#">Mayo 2011</a></li>
            <li><a href="#">Junio 2011</a></li>
            <li><a href="#">Julio 2011</a></li>
            <li><a href="#">Agosto 2011</a></li>
            <li><a href="#">Septiembre 2011</a></li>
        </ul>
</section>
</aside>
<footer>
    <div>
        <section id="nosotros">
            <header>
                <h3>Nosotros</h3>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#">laboris nisi ut aliquip</a> ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
        <section id="similares">
            <header>
                <h3>Ligas de interés</h3>
            </header>
                <ul>
                    <li><a href="#">Deserunt</a></li>
                    <li><a href="#">Incididunt</a></li>

                    <li><a href="#">Labore</a></li>
                    <li><a href="#">Officia</a></li>
                    <li><a href="#">Tempor</a></li>
                </ul>
        </section>
        <section id="popular">
            <header>

                <h3>Lo más visto</h3>
            </header>
                <ul>
                    <li><a href="#">Laboris nisi ut aliquip</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                    <li><a href="#">Consectetur adipisicing</a></li>
                    <li><a href="#">Duis aute irure dolor</a></li>
                    <li><a href="#">Excepteur sint occaecat</a></li>
                    <li><a href="#">Reprehenderit in voluptate</a></li>
                    <li><a href="#">Officia deserunt mollit</a></li>
                    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                </ul>
            </section>
        </div>

    </footer>
</body>
</html>
Y acá, lo pueden ver como queda en el navegador (en tres partes, porque no puedo desplegar todo):

Y ya es hora de entrar en materia CSS3...
Como tod@s ustedes saben, CSS 3, al igual que sus antecesores, se basa en los principios conocidos de estilos y selectores. El punto es que la nueva norma, añade muchas características nuevas (en cualquier sitio, como este, pueden tener la referencia completa), incluyendo los nuevos selectores, pseudo-clases y propiedades. El uso de estas nuevas características hace más fácil el diseño de sitios y páginas web. Basta de choros y veamos código.
Pero eso será en otra entrada. Por ahora, me dedico yo también a aprender.

HTML 5 | Ejemplo práctico II

2011-09-29T11:44:00.000-07:00

Anteriormente, analizábamos este código:
<!doctype html>
<html>
<head>
<title>Prueba de html 5</title>
</head>
<body>
<header>
<h1>Aprendizaje de HTML 5</h1>
</header>
<nav>

</nav>
<section id="principal">

</section>
<section>

</section>
<aside>

</aside>
<footer>

</footer>
</body>
</html>

Ahora trataremos de "vestirlo" y de paso, ir conociendo algunos elementos de html5 y CSS3. Comencemos por la etiqueta <nav></nav>.
Esta etiqueta, dijimos, contendrá un menú de navegación (en este caso muy sencillo). Esto lo haremos al igual que hacíamos en HTML4 o XHTML. Algo así como:
<nav>
    <ul>
        <li><a href="#">Notas</a></li>
        <li><a href="#">La empresa</a></li>
        <li><a href="#">Archivero</a></li>
        <li><a href="#">Contacto</a></li>
        <li class="subscribe"><a href="#">Notas vía RSS</a></li>
    </ul>
</nav>
Con lo que nuestra pequeña página, se verá algo así:

Vayamos más allá y modifiquemos la etiqueta <section>.
<section id="principal">
<header>
        <h2>In nova fert animus mutatas</h2>
    </header>
    <p>In nova fert animus mutatas dicere formas corpora; di, coeptis (nam vos mutastis et illas) adspirate meis primaque ab origine mundi ad mea perpetuum deducite tempora carmen! Ante mare et terras et quod tegit omnia caelum unus erat toto naturae vultus in orbe, quem dixere chaos: rudis indigestaque moles nec quicquam nisi pondus iners congestaque eodem non bene iunctarum discordia semina rerum.</p>
</section>
Lo que se verá en el navegador así:

Ahora, "hagamos" una nota en esta pequeña "sala de prensa" (ahora ya saben de qué se trata). Escribimos:

<section>  
    <article class="notas">  
        <header>  
            <h2>Título de la nota</h2>  
            <p>Escrita en <time datetime="2011-09-29T12:45:45-06:00">Septiembre 29 de 2011</time> por <a href="#">Jefatura de Información</a> - <a href="#comments">1 comentario</a></p>  
        </header>  
        <p>Hanc deus et melior litem natura diremit. nam caelo terras et terris abscidit undas et liquidum spisso secrevit ab aere caelum. quae postquam evolvit caecoque exemit acervo, dissociata locis concordi pace ligavit: ignea convexi vis et sine pondere caeli emicuit summaque locum sibi fecit in arce; proximus est aer illi levitate locoque; densior his tellus elementaque grandia traxit et pressa est gravitate sua; circumfluus umor ultima possedit solidumque coercuit orbem.</p><p>Sic ubi dispositam quisquis fuit ille deorum congeriem secuit sectamque in membra coegit, principio terram, ne non aequalis ab omni parte foret, magni speciem glomeravit in orbis. tum freta diffundi rapidisque tumescere ventis iussit et ambitae circumdare litora terrae; addidit et fontes et stagna inmensa lacusque fluminaque obliquis cinxit declivia ripis, quae, diversa locis, partim sorbentur ab ipsa, in mare perveniunt partim campoque recepta liberioris aquae pro ripis litora pulsant. iussit et extendi campos, subsidere valles, fronde tegi silvas, lapidosos surgere montes,
utque duae dextra caelum totidemque sinistra parte secant zonae, quinta est ardentior illis, sic onus inclusum numero distinxit eodem cura dei, totidemque plagae tellure premuntur. quarum quae media est, non est habitabilis aestu; nix tegit alta duas; totidem inter utramque locavit temperiemque dedit mixta cum frigore flamma.</p>.
    </article>  
</section>

Lo que veremos así:

Hasta aquí todo iba más o menos tranquilo hasta que nos hemos encontrado con el segmento: <time datetime="2011-09-29T12:45:45-06:00">Septiembre 29 de 2011</time>.
Tratemos de explicarlo: HTML5 incluye esta etiqueta con su atributo "datetime", para establecer líneas estándar de registro temporal y geográfico. Veámoslo parte por parte:

2011 es el año de publicación.
09 el mes
20 el día

Como vemos, el formato es aaaa-mm-dd
Ahora, la T indica que utilizamos un tiempo local, que expesamos bajo el formato hh:mm:ss Después, como yo me encuentro en la zona horaria de la ciudad de México, que se encuentra posterior a seis horas del meridiano de grenwich, la hora se sigue de "-06:00", para indicar mi zona geográfica. Estas partes de la sala de prensa, supongo que que se incluirán mediante un JavaScript o PHP , para hacerlo de manera automatizada. Más adelante lo averiguaremos juntos.
Mientras tanto, continuemos con el "vestido" de nuestra Sala de Prensa.

Supongamos un espacio de comentarios de los usuarios. Esta área estaría en una etiqueta (también) <section>, por lo quedaría así:

<section id="comentarios">  
    <header>  
        <h3>La gente ha dicho</h3>  
    </header>  
    <article>  
        <header>  
            <a href="#">Octavio Paz</a> | <time datetime="2011-09-29T13:45:45-06:00">Septiembre 29 de 2011</time>  
        </header>  
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>  
    </article>  
    <article>  
        <header>  
            <a href="#">Javier Sicilia</a> | <time datetime="2011-09-29T17:45:45-06:00">Septiembre 29 de 2011</time>  
        </header>  
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>  
    </article>  
</section>

Que en el navegador se verá así:

Y claro, como ya habrán pensado, tendremos que hacer un pequeño formulario para que los usuarios nos den su opinión sobre lo que quieran, que de eso se trata el feedback. Entonces, escribimos algo como lo que ven acá abajo:
<form action="#" method="post">
        <h3>Di lo que piensas</h3>
        <p>
            <label for="name">Nombre</label>
            <input name="name" id="name" type="text" required />
        </p>
        <p>
            <label for="email">E-mail</label>
            <input name="email" id="email" type="email" required />
        </p>
        <p>
            <label for="website">Sitio web</label>
            <input name="website" id="website" type="url" />
        </p>
        <p>
            <label for="comment">Comentario</label>
            <textarea name="comment" id="comment" required></textarea>
        </p>
        <p><input type="submit" value="Post comment" /></p>
    </form>
Antes de ver cómo se vería esto en el navegador, sólo les haré el comentario de que, como pueden observar, el desarrollo del formulario es muy semejante a lo que haríamos en HTML4 o XHTML, sólo vemos algo fuera de lo común, el atributo "required", que es una nueva norma en HTML5. Bueno, después de esto, en el navegador se ve así:

Por ahora es todo. En otra entrada comenzaremos a "maquillar" nuestra Sala de Prensa, con CSS3... Espero que esto les haya sido útil.

HTML 5 | Ejemplo práctico

2011-09-28T15:13:00.000-07:00

Como reza el título de esta entrada, ahora me enfocaré a un caso práctico de HTML5 y su "armado". En otros blogs, sitios, tutoriales y un largo etcétera, podrán enterarse de las etiquetas nuevas, sus atributos y lo bonito que hacen las cosas para las que fueron diseñadas. Aquí veremos un caso de diseño (amateur) del nuevo estándar. Debo aclarar que este ejemplo, está probado en Firefox 7, sobre una máquina Ubuntu. Así que comencemos:

Antes que nada, debemos de saber que ahora, con este nuevo estándar de HTML, en lugar de la famosa primera línea aquella de:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ahora sólo tenemos que escribir:

<!doctype html>

Y nuestro documento será reconocido como un documento HTML5 (después tendremos qué ver cómo "parchar" el documento, para que sea visto por aquellos navegadores que no soporten este estándar).

Bien, ahora visualicemos el esquema básico de nuestro primer diseño (primitivo) con HTML5.
El esquema que propongo, contiene la mayor parte de las etiquetas referidas en otra entrada de este blog.

Ya de acuerdo en el esquema básico, deberemos escribir las etiquetas HTML5, de acuerdo con su normativa. Eso, quedaría así:

<!doctype html>
<html>
<head>
    <title>Prueba de html 5</title>
</head>
    <body>  
        <header>  
            <h1>Aprendizaje de HTML 5</h1>  
        </header>  
        <nav>  
            <!-- Navegación -->  
        </nav>  
        <section id="principal">  
            <!-- Sección Principal -->  
        </section>  
        <section>  
            <!-- Área de desplegado -->  
        </section>  
        <aside>  
            <!-- Barra lateral -->  
        </aside>  
        <footer>  
            <!-- Pie de página -->  
        </footer>
    </body>  
    </html>  

Cuando analizamos este pequeño código, notaremos algo que ya habíamos "platicado", pero que espero, quede más claro con el ejemplo. Veamos:

En HTML 5, sólo hay un tipo de documento. Se declara en el comienzo de la página <! DOCTYPE html>. "Simplemente" le dice al navegador que se está tratando con un documento HTML.
La etiqueta <header> "envuelve" a los elementos iniciales de nuestra página y que sirven como identificación gráfica, como el logotipo, el título del sitio, un motor de búesqueda, etcétera. Como sabemos, cada cabecera suele contener una etiqueta que corresponde a su jerarquía (h1 a h6, generalmente). Aquí utilizamos <h1> como título de toda la página. Más adelante veremos cómo introducir secciones.
La etiqueta <nav> se utiliza para los elementos de navegación principal y secundaria del sitio (ya depende de la imaginación y el diseño).
La etiqueta <section> se utiliza para denotar una sección en el documento. puede contener todo tipo de marcas y varias secciones se pueden anidar unas dentro de otras.
<aside> se utiliza para mostrar los contenidos relacionados con el contenido principal. En este caso lo estamos utilizando para la barra lateral.
<footer> contendrá información adicional sobre el contenido: quién lo escribió, copyright, enlaces a documentos relacionados etcétera.

Como ya habíamos apuntado en otra entrada, con HTML5, en lugar de utilizar divs que contienen las diferentes secciones de la página, ahora usamos etiquetas adecuadas y estandarizadas. En otras palabras, utilizamos semántica.
Así, facilitamos la tarea de los motores de búsqueda y los lectores de pantalla para averiguar qué es lo que en una página. Es decir, integramos el SEO a nuestro sitio, de una manera nativa.

Por hoy, es todo, pero después seguiremos con el formateo de la página.

¡Saludos!

Pemex emite Certificados Bursátiles por 10,000 MDP

2011-09-28T09:34:00.001-07:00

Como parte de su programa de financiamientos 2011, el día de hoy, Petróleos Mexicanos realizó la segunda oferta de Certificados Bursátiles del año por un monto total de 10,000 millones de pesos aproximadamente. La emisión se realizó en dos tramos, el primero por 7,000 millones de pesos a tasa variable (TIIE + 24 puntos base), con vencimiento en 2017, y el segundo por 653.38 millones de Unidades de Inversión (UDIS), equivalentes a aproximadamente 3,000 millones de pesos, con vencimiento en 2021, el cual pagará un cupón de 3.55% fijo pagadero semestralmente. La oferta generó una demanda de más de 24,000 millones de pesos, repartida en 121 posturas. Los principales participantes en la oferta fueron sociedades de inversión, afores, banca privada, aseguradoras, casas de bolsa, así como tesorerías bancarias y corporativas.

Fuente: Pemex

miguelángeltorresvera
nos duo turba sumus

Instalar firefox 7 en Ubuntu

2011-09-28T09:19:00.000-07:00

Todo el choro que sigue a continuación, lo podríaamos resumir como: "Teclea las siguientes líneas en tu terminal:

sudo add-apt-repository ppa:ubuntu-mozilla-security/ppa
sudo apt-get update
sudo apt-get dist-upgrade

Y acabaría muy rápido. Igual les gusta una explicación más extensa... entonces, lean abajo.

Si a alguien le interesa, para actualizar su navegador Firefox de Ubuntu, a la versión 7, deberán ir a la terminal (Aplicaciones>Accesorios>Terminal) y cuando estén posicionados en su usuario, tecleen:

sudo add-apt-repository ppa:ubuntu-mozilla-security/ppa

La terminal les pedirá su contraseña de administrador y enseguida, verán algo así:

Executing: gpg --ignore-time-conflict --no-options --no-default-keyring --secret-keyring /etc/apt/secring.gpg --trustdb-name /etc/apt/trustdb.gpg --keyring /etc/apt/trusted.gpg --primary-keyring /etc/apt/trusted.gpg --keyserver hkp://keyserver.ubuntu.com:80/ --recv AF316E81A155146718A6FBD7A6DCF7707EBC211F

gpg: solicitando clave 7EBC211F de hkp servidor keyserver.ubuntu.com

gpg: clave 7EBC211F: clave pública "Launchpad PPA for Ubuntu Mozilla Security Team" importada

gpg: no se encuentran claves totalmente fiables

gpg: Cantidad total procesada: 1

gpg: importadas: 1 (RSA: 1)

Al término, tecleen:

sudo apt-get update

y verán esto en su terminal:

miguel@torresvera:~$ sudo apt-get update

Ign http://extras.ubuntu.com natty InRelease

Ign http://archive.ubuntu.com natty InRelease

Ign http://ppa.launchpad.net natty InRelease

Ign http://mx.archive.ubuntu.com natty InRelease

Ign http://mx.archive.ubuntu.com natty-updates InRelease

Ign http://mx.archive.ubuntu.com maverick-backports InRelease

Ign http://archive.canonical.com natty InRelease

Ign http://archive.canonical.com maverick InRelease

Ign http://security.ubuntu.com natty-security InRelease

Ign http://ppa.launchpad.net natty InRelease

Des:1 http://extras.ubuntu.com natty Release.gpg [72 B]

Obj http://archive.ubuntu.com natty Release.gpg

Ign http://mx.archive.ubuntu.com natty-backports InRelease

Obj http://archive.canonical.com natty Release.gpg

Obj http://ppa.launchpad.net natty Release.gpg

Des:2 http://ppa.launchpad.net natty Release.gpg [316 B]

Obj http://mx.archive.ubuntu.com natty Release.gpg

Obj http://mx.archive.ubuntu.com natty-updates Release.gpg

Obj http://security.ubuntu.com natty-security Release.gpg

Obj http://extras.ubuntu.com natty Release

Obj http://mx.archive.ubuntu.com maverick-backports Release.gpg

Obj http://archive.canonical.com maverick Release.gpg

Obj http://archive.ubuntu.com natty Release

Des:3 http://ppa.launchpad.net natty Release.gpg [316 B]

Obj http://security.ubuntu.com natty-security Release

Obj http://ppa.launchpad.net natty Release

Obj http://mx.archive.ubuntu.com natty-backports Release.gpg

Obj http://archive.canonical.com natty Release

Obj http://mx.archive.ubuntu.com natty Release

Obj http://extras.ubuntu.com natty/main Sources

Obj http://security.ubuntu.com natty-security/restricted Sources

Des:4 http://ppa.launchpad.net natty Release [9766 B]

Obj http://mx.archive.ubuntu.com natty-updates Release

Obj http://archive.canonical.com maverick Release

Obj http://extras.ubuntu.com natty/main i386 Packages

Ign http://extras.ubuntu.com natty/main TranslationIndex

Obj http://security.ubuntu.com natty-security/main Sources

Obj http://security.ubuntu.com natty-security/multiverse Sources

Obj http://security.ubuntu.com natty-security/universe Sources

Obj http://security.ubuntu.com natty-security/main i386 Packages

Obj http://security.ubuntu.com natty-security/restricted i386 Packages

Des:5 http://ppa.launchpad.net natty Release [9768 B]

Obj http://mx.archive.ubuntu.com maverick-backports Release

Obj http://mx.archive.ubuntu.com natty-backports Release

Obj http://mx.archive.ubuntu.com natty/restricted Sources

Obj http://mx.archive.ubuntu.com natty/main Sources

Obj http://mx.archive.ubuntu.com natty/multiverse Sources

Obj http://mx.archive.ubuntu.com natty/universe Sources

Obj http://mx.archive.ubuntu.com natty/main i386 Packages

Obj http://archive.canonical.com natty/partner i386 Packages

Ign http://archive.canonical.com natty/partner TranslationIndex

Obj http://security.ubuntu.com natty-security/universe i386 Packages

Obj http://security.ubuntu.com natty-security/multiverse i386 Packages

Ign http://security.ubuntu.com natty-security/main TranslationIndex

Ign http://security.ubuntu.com natty-security/multiverse TranslationIndex

Ign http://security.ubuntu.com natty-security/restricted TranslationIndex

Ign http://security.ubuntu.com natty-security/universe TranslationIndex

Obj http://ppa.launchpad.net natty/main Sources

Obj http://ppa.launchpad.net natty/main i386 Packages

Ign http://ppa.launchpad.net natty/main TranslationIndex

Obj http://mx.archive.ubuntu.com natty/restricted i386 Packages

Obj http://mx.archive.ubuntu.com natty/universe i386 Packages

Obj http://mx.archive.ubuntu.com natty/multiverse i386 Packages

Obj http://archive.canonical.com maverick/partner Sources

Ign http://mx.archive.ubuntu.com natty/main TranslationIndex

Ign http://mx.archive.ubuntu.com natty/multiverse TranslationIndex

Ign http://mx.archive.ubuntu.com natty/restricted TranslationIndex

Ign http://mx.archive.ubuntu.com natty/universe TranslationIndex

Obj http://mx.archive.ubuntu.com natty-updates/restricted Sources

Obj http://mx.archive.ubuntu.com natty-updates/main Sources

Obj http://archive.ubuntu.com natty/multiverse Sources

Des:6 http://ppa.launchpad.net natty/main Sources [14 B]

Obj http://mx.archive.ubuntu.com natty-updates/multiverse Sources

Obj http://mx.archive.ubuntu.com natty-updates/universe Sources

Obj http://mx.archive.ubuntu.com natty-updates/main i386 Packages

Obj http://mx.archive.ubuntu.com natty-updates/restricted i386 Packages

Obj http://mx.archive.ubuntu.com natty-updates/universe i386 Packages

Obj http://mx.archive.ubuntu.com natty-updates/multiverse i386 Packages

Des:7 http://ppa.launchpad.net natty/main i386 Packages [14 B]

Ign http://ppa.launchpad.net natty/main TranslationIndex

Obj http://archive.ubuntu.com natty/universe Sources

Obj http://archive.ubuntu.com natty/multiverse i386 Packages

Obj http://archive.ubuntu.com natty/universe i386 Packages

Ign http://archive.ubuntu.com natty/multiverse TranslationIndex

Ign http://mx.archive.ubuntu.com natty-updates/main TranslationIndex

Ign http://mx.archive.ubuntu.com natty-updates/multiverse TranslationIndex

Ign http://mx.archive.ubuntu.com natty-updates/restricted TranslationIndex

Ign http://mx.archive.ubuntu.com natty-updates/universe TranslationIndex

Obj http://mx.archive.ubuntu.com maverick-backports/main Sources

Obj http://mx.archive.ubuntu.com maverick-backports/restricted Sources

Obj http://mx.archive.ubuntu.com maverick-backports/universe Sources

Obj http://mx.archive.ubuntu.com maverick-backports/multiverse Sources

Obj http://mx.archive.ubuntu.com maverick-backports/main i386 Packages

Des:8 http://ppa.launchpad.net natty/main Sources [5348 B]

Ign http://archive.ubuntu.com natty/universe TranslationIndex

Obj http://mx.archive.ubuntu.com maverick-backports/restricted i386 Packages

Des:9 http://ppa.launchpad.net natty/main i386 Packages [14.4 kB]

Obj http://mx.archive.ubuntu.com maverick-backports/universe i386 Packages

Obj http://mx.archive.ubuntu.com maverick-backports/multiverse i386 Packages

Ign http://mx.archive.ubuntu.com maverick-backports/main TranslationIndex

Ign http://mx.archive.ubuntu.com maverick-backports/multiverse TranslationIndex

Ign http://mx.archive.ubuntu.com maverick-backports/restricted TranslationIndex

Ign http://mx.archive.ubuntu.com maverick-backports/universe TranslationIndex

Ign http://ppa.launchpad.net natty/main TranslationIndex

Obj http://archive.ubuntu.com natty/multiverse Translation-es

Obj http://mx.archive.ubuntu.com natty-backports/restricted Sources

Obj http://mx.archive.ubuntu.com natty-backports/main Sources

Obj http://mx.archive.ubuntu.com natty-backports/multiverse Sources

Obj http://mx.archive.ubuntu.com natty-backports/universe Sources

Obj http://mx.archive.ubuntu.com natty-backports/restricted i386 Packages

Obj http://mx.archive.ubuntu.com natty-backports/main i386 Packages

Obj http://mx.archive.ubuntu.com natty-backports/multiverse i386 Packages

Obj http://mx.archive.ubuntu.com natty-backports/universe i386 Packages

Obj http://archive.ubuntu.com natty/universe Translation-es

Ign http://mx.archive.ubuntu.com natty-backports/main TranslationIndex

Ign http://mx.archive.ubuntu.com natty-backports/multiverse TranslationIndex

Ign http://mx.archive.ubuntu.com natty-backports/restricted TranslationIndex

Ign http://mx.archive.ubuntu.com natty-backports/universe TranslationIndex

Obj http://mx.archive.ubuntu.com natty/main Translation-es

Obj http://mx.archive.ubuntu.com natty/multiverse Translation-es

Obj http://mx.archive.ubuntu.com natty/restricted Translation-es

Obj http://mx.archive.ubuntu.com natty/universe Translation-es

Ign http://security.ubuntu.com natty-security/main Translation-es_MX

Ign http://security.ubuntu.com natty-security/main Translation-es

Ign http://security.ubuntu.com natty-security/main Translation-en

Ign http://ppa.launchpad.net natty/main Translation-es_MX

Ign http://ppa.launchpad.net natty/main Translation-es

Ign http://ppa.launchpad.net natty/main Translation-en

Ign http://security.ubuntu.com natty-security/multiverse Translation-es_MX

Ign http://security.ubuntu.com natty-security/multiverse Translation-es

Ign http://security.ubuntu.com natty-security/multiverse Translation-en

Ign http://security.ubuntu.com natty-security/restricted Translation-es_MX

Ign http://security.ubuntu.com natty-security/restricted Translation-es

Ign http://security.ubuntu.com natty-security/restricted Translation-en

Ign http://security.ubuntu.com natty-security/universe Translation-es_MX

Ign http://security.ubuntu.com natty-security/universe Translation-es

Ign http://security.ubuntu.com natty-security/universe Translation-en

Ign http://archive.canonical.com natty/partner Translation-es_MX

Ign http://ppa.launchpad.net natty/main Translation-es_MX

Ign http://ppa.launchpad.net natty/main Translation-es

Ign http://ppa.launchpad.net natty/main Translation-en

Ign http://ppa.launchpad.net natty/main Translation-es_MX

Ign http://extras.ubuntu.com natty/main Translation-es_MX

Ign http://archive.canonical.com natty/partner Translation-es

Ign http://ppa.launchpad.net natty/main Translation-es

Ign http://extras.ubuntu.com natty/main Translation-es

Ign http://archive.canonical.com natty/partner Translation-en

Ign http://ppa.launchpad.net natty/main Translation-en

Ign http://extras.ubuntu.com natty/main Translation-en

Ign http://archive.ubuntu.com natty/multiverse Translation-es_MX

Ign http://archive.ubuntu.com natty/multiverse Translation-en

Ign http://archive.ubuntu.com natty/universe Translation-es_MX

Ign http://archive.ubuntu.com natty/universe Translation-en

Ign http://mx.archive.ubuntu.com natty/main Translation-es_MX

Ign http://mx.archive.ubuntu.com natty/main Translation-en

Ign http://mx.archive.ubuntu.com natty/multiverse Translation-es_MX

Ign http://mx.archive.ubuntu.com natty/multiverse Translation-en

Ign http://mx.archive.ubuntu.com natty/restricted Translation-es_MX

Ign http://mx.archive.ubuntu.com natty/restricted Translation-en

Ign http://mx.archive.ubuntu.com natty/universe Translation-es_MX

Ign http://mx.archive.ubuntu.com natty/universe Translation-en

Ign http://mx.archive.ubuntu.com natty-updates/main Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-updates/main Translation-es

Ign http://mx.archive.ubuntu.com natty-updates/main Translation-en

Ign http://mx.archive.ubuntu.com natty-updates/multiverse Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-updates/multiverse Translation-es

Ign http://mx.archive.ubuntu.com natty-updates/multiverse Translation-en

Ign http://mx.archive.ubuntu.com natty-updates/restricted Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-updates/restricted Translation-es

Ign http://mx.archive.ubuntu.com natty-updates/restricted Translation-en

Ign http://mx.archive.ubuntu.com natty-updates/universe Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-updates/universe Translation-es

Ign http://mx.archive.ubuntu.com natty-updates/universe Translation-en

Ign http://mx.archive.ubuntu.com maverick-backports/main Translation-es_MX

Ign http://mx.archive.ubuntu.com maverick-backports/main Translation-es

Ign http://mx.archive.ubuntu.com maverick-backports/main Translation-en

Ign http://mx.archive.ubuntu.com maverick-backports/multiverse Translation-es_MX

Ign http://mx.archive.ubuntu.com maverick-backports/multiverse Translation-es

Ign http://mx.archive.ubuntu.com maverick-backports/multiverse Translation-en

Ign http://mx.archive.ubuntu.com maverick-backports/restricted Translation-es_MX

Ign http://mx.archive.ubuntu.com maverick-backports/restricted Translation-es

Ign http://mx.archive.ubuntu.com maverick-backports/restricted Translation-en

Ign http://mx.archive.ubuntu.com maverick-backports/universe Translation-es_MX

Ign http://mx.archive.ubuntu.com maverick-backports/universe Translation-es

Ign http://mx.archive.ubuntu.com maverick-backports/universe Translation-en

Ign http://mx.archive.ubuntu.com natty-backports/main Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-backports/main Translation-es

Ign http://mx.archive.ubuntu.com natty-backports/main Translation-en

Ign http://mx.archive.ubuntu.com natty-backports/multiverse Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-backports/multiverse Translation-es

Ign http://mx.archive.ubuntu.com natty-backports/multiverse Translation-en

Ign http://mx.archive.ubuntu.com natty-backports/restricted Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-backports/restricted Translation-es

Ign http://mx.archive.ubuntu.com natty-backports/restricted Translation-en

Ign http://mx.archive.ubuntu.com natty-backports/universe Translation-es_MX

Ign http://mx.archive.ubuntu.com natty-backports/universe Translation-es

Ign http://mx.archive.ubuntu.com natty-backports/universe Translation-en

Descargados 40.0 kB en 36seg. (1098 B/s)

Leyendo lista de paquetes... Hecho

Ahora tecleen:

sudo apt-get dist-upgrade

La terminal les aventará algo así como:

Leyendo lista de paquetes... Hecho

Creando árbol de dependencias

Leyendo la información de estado... Hecho

Calculando la actualización... Listo

Se actualizarán los siguientes paquetes:

abrowser firefox firefox-branding firefox-globalmenu firefox-gnome-support

firefox-locale-en firefox-locale-es ubufox xul-ext-bindwood xul-ext-ubufox

xul-ext-webfav

11 actualizados, 0 se instalarán, 0 para eliminar y 0 no actualizados.

Necesito descargar 16.4 MB de archivos.

Se liberarán 565 kB después de esta operación.

¿Desea continuar [S/n]?

(ustedes, por supuesto, le dan "S" (sin las comillas) y un enter)

La terminal seguirá así:

Des:1 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox-globalmenu i386 7.0+build2+nobinonly-0ubuntu0.11.04.1 [47.6 kB]

Des:2 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox i386 7.0+build2+nobinonly-0ubuntu0.11.04.1 [15.1 MB]

Des:3 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main abrowser i386 7.0+build2+nobinonly-0ubuntu0.11.04.1 [15.5 kB]

Des:4 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox-branding i386 7.0+build2+nobinonly-0ubuntu0.11.04.1 [15.5 kB]

Des:5 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox-gnome-support i386 7.0+build2+nobinonly-0ubuntu0.11.04.1 [15.9 kB]

Des:6 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox-locale-en all 7.0+build2+nobinonly-0ubuntu0.11.04.1 [384 kB]

Des:7 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main firefox-locale-es all 7.0+build2+nobinonly-0ubuntu0.11.04.1 [753 kB]

Des:8 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main xul-ext-ubufox all 0.9.2-0ubuntu0.11.04.1 [49.2 kB]

Des:9 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main ubufox all 0.9.2-0ubuntu0.11.04.1 [1208 B]

Des:10 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main xul-ext-bindwood all 1.99.0-0ubuntu1.2 [27.8 kB]

Des:11 http://ppa.launchpad.net/ubuntu-mozilla-security/ppa/ubuntu/ natty/main xul-ext-webfav all 1.17-0ubuntu5.2 [17.5 kB]

Descargados 16.4 MB en 2min. 25seg. (113 kB/s)

(Leyendo la base de datos ... 208811 ficheros o directorios instalados actualmente.)

Preparando para reemplazar firefox-globalmenu 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox-globalmenu_7.0+build2+nobinonly-0ubuntu0.11.04.1_i386.deb) ...

Desempaquetando el reemplazo de firefox-globalmenu ...

Preparando para reemplazar firefox 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox_7.0+build2+nobinonly-0ubuntu0.11.04.1_i386.deb) ...

Desempaquetando el reemplazo de firefox ...

Preparando para reemplazar abrowser 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../abrowser_7.0+build2+nobinonly-0ubuntu0.11.04.1_i386.deb) ...

Desempaquetando el reemplazo de abrowser ...

Preparando para reemplazar firefox-branding 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox-branding_7.0+build2+nobinonly-0ubuntu0.11.04.1_i386.deb) ...

Desempaquetando el reemplazo de firefox-branding ...

Preparando para reemplazar firefox-gnome-support 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox-gnome-support_7.0+build2+nobinonly-0ubuntu0.11.04.1_i386.deb) ...

Desempaquetando el reemplazo de firefox-gnome-support ...

Preparando para reemplazar firefox-locale-en 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox-locale-en_7.0+build2+nobinonly-0ubuntu0.11.04.1_all.deb) ...

Desempaquetando el reemplazo de firefox-locale-en ...

Preparando para reemplazar firefox-locale-es 6.0.2+build2+nobinonly-0ubuntu0.11.04.1 (usando .../firefox-locale-es_7.0+build2+nobinonly-0ubuntu0.11.04.1_all.deb) ...

Desempaquetando el reemplazo de firefox-locale-es ...

Preparando para reemplazar xul-ext-ubufox 0.9.1-0ubuntu0.11.04.1 (usando .../xul-ext-ubufox_0.9.2-0ubuntu0.11.04.1_all.deb) ...

Desempaquetando el reemplazo de xul-ext-ubufox ...

Preparando para reemplazar ubufox 0.9.1-0ubuntu0.11.04.1 (usando .../ubufox_0.9.2-0ubuntu0.11.04.1_all.deb) ...

Desempaquetando el reemplazo de ubufox ...

Preparando para reemplazar xul-ext-bindwood 1.99.0-0ubuntu1.1 (usando .../xul-ext-bindwood_1.99.0-0ubuntu1.2_all.deb) ...

Desempaquetando el reemplazo de xul-ext-bindwood ...

Preparando para reemplazar xul-ext-webfav 1.17-0ubuntu5.1 (usando .../xul-ext-webfav_1.17-0ubuntu5.2_all.deb) ...

Desempaquetando el reemplazo de xul-ext-webfav ...

Procesando disparadores para bamfdaemon ...

Rebuilding /usr/share/applications/bamf.index...

Procesando disparadores para desktop-file-utils ...

Procesando disparadores para python-gmenu ...

Rebuilding /usr/share/applications/desktop.es_MX.utf8.cache...

Procesando disparadores para man-db ...

Procesando disparadores para python-support ...

Configurando firefox (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Instalando una nueva versión del fichero de configuración /etc/apport/blacklist.d/firefox ...

Instalando una nueva versión del fichero de configuración /etc/apparmor.d/usr.bin.firefox ...

Please restart all running instances of firefox, or you will experience problems.

Configurando firefox-globalmenu (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando abrowser (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando firefox-branding (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando firefox-gnome-support (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando firefox-locale-en (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando firefox-locale-es (7.0+build2+nobinonly-0ubuntu0.11.04.1) ...

Configurando xul-ext-ubufox (0.9.2-0ubuntu0.11.04.1) ...

Configurando ubufox (0.9.2-0ubuntu0.11.04.1) ...

Configurando xul-ext-bindwood (1.99.0-0ubuntu1.2) ...

Configurando xul-ext-webfav (1.17-0ubuntu5.2) ...

Y después de esto, ¡Listo! Ya tienen el firefox 7 en su máquina Ubuntu

Espero que les sirva.

miguelángeltorresvera
nos duo turba sumus

HTML5 | primeros pasos (III)

2011-09-26T15:04:00.000-07:00

Sigo con las "novedades" (entre comillas, porque no son tan nuevas) de #HTML5 en lo referente a las etiquetas.

Antes, incrustar audio y video en HTML, era poco menos que un zafarrancho de "parches", plug-ins y un largo etcétera que es casi interminable. Es pensando en ello que el W3C introdujo estos elementos: <audio> y <video> que permiten incrustar multimedia en sitios y aplicaciones en formatos nativos, sin necesidad de pasar por Flash (un golpe severo a esta tecnología y su propietario, Adobe, fue el anuncio de Youtube de que abandonaría a Flash y se inclinaría por los formatos nativos incrustados en #HTML5 lo que, lógicamente, le dio un impulso bárbaro al nuevo código #HTML5 ) o QT. Los controles para estas etiquetas, serán como para cualquier formato nativo y permite, con facilidad (relativa, claro), hacer los enlaces sobre video, lo que en Flash, significaba un alto conocimiento de AS.

Sin embargo, como una deferencia y una manera de ser "inclusivos", se conserva la etiqueta <embed> para contenido incrustado que necesita plugins; este elemento que ya reconocen los navegadores, ahora, al formar parte del estándar, no generará conflicto con <object>.

Ahora, esta nueva revisión de HTML, adopta una etiqueta que (casualmente), Google usa en su aplicación de mapas (GoogleMaps): es la etiqueta <canvas> que permite generar gráficos al "dibujar" en su interior. Los que sepan de Flash, recordarán que es todo un arte crear aplicaciones de este tipo con cierta elegancia (los primitivos sistemas de dibujo, son relativamente fáciles). Ahora con <canvas> en #HTML5, la cosa se pone interesante.

En otra entrada, les platicaré más de lo que vaya descubriendo de HTML5

HTML5 | primeros pasos (II)

2011-09-26T13:16:00.000-07:00

Hablaba en la entrada anterior de las nuevas etiquetas en #HTML5 que sustituyen los bloques más comunes en los sitios web. Hay que enfatizar que, por ahora, este borrador prioriza las funciones SEO de los sitios y facilita la tarea de los buscadores, con el pretexto de "agilizar" y aumentar el tráfico en los sitios así construidos y, por tanto, sus posibles ganancias. Ahora me ocuparé de ellas:

<section></section> - Pensando en jerarquizar un sitio web (optimizando e integrando herramientas SEO a la estructura), estas etiquetas prepresentan una "sección general" dentro de un documento o aplicación (algo así como capitular un libro impreso). Como la idea de capítulo, podemos tener subsecciones en cada una de éstas secciones (ya mostraré cómo). Dicen que si se estructura correctamente con h1-h6 (los entendido sabrán el argot. Los que no lo sepan, pregunte), para jerarquizar de manera detallada nuestro sitio y favoreciendo la tarea de los robots de los buscadores, para un mejor posicionamiento. Es decir, como les decía, se favorecen e intergan las herramientas SEO, de manera ordenada.

<header></header> - Si ustedes han trabajado con CSS, sabrán que casi todo mundo, creaba un elemento "#header" en donde se colocaba la "cabeza" del documento o de la aplicación, desde donde se daba la navegación fundamental (en términos de periódicos, blogs o revistas, era el "cabezal"). Es decir, los elementos que nos ayuden a ver todo el sitio o a utilizar la aplicación, estarán contenidos en esta etiqueta <header></header>.

<nav></nav> - En CSS, en muchos sitios, encontrábamos un elemento "#barnav" donde sen anidaban los enlaces escenciales del sitio, sus bloques principales de navegación. Para eso, #HTML5 nos da <nav></nav>.

<article></article> - Este elemento (siguiendo con la estructura jerarquizada del sitio), representa un componente "autónomo" en sitio web, de manera que pueda reutilizarse y repetirse, dependiendo de la intención del editor web. Este elemento es fundamental en sitios de noticias (periódicos, revistas, salas de prensa o blog) que necesitan elementos independientes del contenido general. Así, el anidamiento de elementos <article></article> son interpretados como interdependientes al nodo "madre". Es decir, si en un apartado de la revista "X", tenemos un "ojillo" con información extra, estos "ojilllos" se podrían colocar dentro de los marcadores <article></article>.

<aside></aside> - Imaginen una revista donde leen un reportaje sobre el Apollo XI. En algún lugar, el editor quiere hacer un apartado sobre materiales para construcción de naves espaciales, que se publicita en la revista. Entonces, su correlato en #HTML5 es esta etiqueta. Como ven, el contenido es "independiente", pero está "tangencialmente" relacionado con el tema de la sección. He aquí, una etiqueta más, enfocada al SEO.

<footer></footer> - Representa el pié de una sección o de un site o de una subsección del site y es otro de estos elementos enfocados al SEO, integrados a #HTML5.

HTML5 | primeros pasos (I)

2011-09-26T12:06:00.000-07:00

El HTML5 #dicen, es la quinta revisión (y es, hasta ahora, sólo un borrador) del lenguaje de marcado “básico” de la World Wide Web, el HTML.

Ante el avance del llamado, "multimedia", el consorcio 3w pretende, con esta nueva revisión, adaptar el lenguaje de marcado a estas tecnologías, además de remplazar al actual (X)HTML,con la corrección de problemas de desarrollo de web semántico, así como el "rediseño" del código.
El principal agregado a esta revisión, es, desde mi particular punto de vista, la "semántica" y accesibilidad propias del movimiento (añejo ya, por momentos) de la web 2.0, siguiendo la tendencia de los sitios más populares del momento (facebook, tw, Google+etc), donde el sitio es más un "conjunto de aplicaciones en nube" y menos un documento de información.
Desde que comenzó el movimiento "semántico" (hace 10 años, más o menos), el uso de "DIV's" en el diseño de los sitios, se hizo en bloques y propició una mayor especialización y estructuración enfocada, casi, a producción en serie.
#HTML5 brinda elementos que perfeccionan esta estructuración, estableciendo qué es cada sección, eliminando así DIV's que, de tan utilizados, se "sentían" como innecesarios. Este cambio semántica web, trae coherencia e inteligibilidad a internet y sobre todo (¡qué casualidad!), haciendo más fácil la tarea de los buscadores y aplicaciones basadas en protocolos web (como muchas de las apps de #apple ).
Por el momento, es la primera visión de este pobre venadito en el cerro de internet.

¿En qué residen los juicios?

2011-09-23T11:13:00.000-07:00

Pasa como siempre, Antorcha Campesina se reúne como en secreto, se comienzan a ver señoras de rebozo y señores de sombrero. Unos minutos después, alguien, alguno, lanza una consigna y todas y todos se bajan de las banquetas (un acto osado, si se le ve bien, donde arriesgan la vida), y comienza la marcha.
En twitter (tuirer, dicen los nuevos gurús digitales, dueños de la sabiduría al término de un curso dictado por otro gurú en algún hotel caro de la ciudad de México, o Monterrey), comienzas las invectivas:

@periodista1 Un verdadero caos provoca Antorcha Campesina
@periodista2 Caos y pánico, provoca marcha de simpatizantes de Antorcha Campesina
@ciudadano1 una molestia, con estos latosos de Antorcha
@ciudadano2 por qué no los confinan a un "manifestódromo"

Es decir que, lo que menos importa, son los motivos. Porque podría ser un grupo de madres inconformes por una directora de escuela, lo mismo que un grupo de ancianos por sus derechos humanos... para la mayoría de los ciudadanos, son solo "una molestia".

Pero, ¡ah!, si es una marcha de blanco encabezada por los líderes del PRI, entonces es una manifestación ciudadana que tiene todo el derecho del mundo de interrumpir el tráfico, de crear un embotellamiento de los mil diablos, porque, es una manifestación "legítima".

¿En qué residen los juicios?

sólo por no dejar

2011-09-22T11:06:00.000-07:00

Sin mucho qué decir. Sólo lo que se tenga qué decir, comienzo de nuevo... Saludos, mundo.