Dakoo » desarrollo web http://www.dakoo.cl ¿Te gusta la web? Mon, 07 Jun 2010 13:40:17 +0000 en hourly 1 http://wordpress.org/?v=3.0 HTML 5 – nav http://www.dakoo.cl/html-5-nav/ http://www.dakoo.cl/html-5-nav/#comments Thu, 03 Jun 2010 03:41:33 +0000 admin http://www.dakoo.cl/?p=159 Al igual que nuestro anterior post donde vimos el tag section en esta ocasión nos centraremos en el tag nav. El objetivo de este elemento al igual que section es describir de forma más semántica la página, con esto se logra una estructura más ordenada y quizás en el futuro los buscadores puedan tomarlos en cuenta para la Web semántica.
Este tag se utiliza para introducir los menús de navegación del sitio, esto generalmente se hacía con:

PLAIN TEXT
HTML:

Ahora al introducir este elemento como dijimos anteriormente mejora la forma semántica del sitio, como se ve en este ejemplo.

PLAIN TEXT
HTML:
  1. <nav>
  3. <li><a href="#l">Inicio</a></li>
  4. <li><a href="#">Acerca de</a></li>
  5. <li><a href="#">Contacto</a></li>
  6. </ul>
  7. </nav>

Creo que no hay mucho que hablar sobre este tag ya que es simple su objetivo

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/html-5-nav/feed/ 0 HTML 5 – section http://www.dakoo.cl/html-5-section/ http://www.dakoo.cl/html-5-section/#comments Wed, 02 Jun 2010 04:26:23 +0000 admin http://www.dakoo.cl/?p=154 Hoy comenzamos con la revisión de la especificación html 5 y en esta ocasión nos centraremos en el tag section.

Este elemento se utiliza para darle una nueva estructura al código, por ejemplo en este código se ve una estructura de html 5 con varios nuevos elementos

PLAIN TEXT
HTML:
  1. <header>
  2.   <p>Cabecera</p>
  3. </header>
  4. <nav>
  5.   <p>Menu de navegacion</p>
  6. </nav>
  7. <section>
  8.   <p>Seccion</p>
  9.     <article>Articulo</article>
  10. </section>
  11. <footer>
  12.   <p>Pie de pagina</p>
  13. </footer>

Si nos damos cuenta la estructura es más fácil de entender ya que los nuevos elementos le dan una estructura definida y una forma que al solo leer los elementos involucrados se saben las partes que están dentro del sitio.
En cuanto al tag section viene unido a acción de ordenar semánticamente el código, ojo que no viene a sustituir los div, ya que si lo que se busca es dar estilos al código para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles.
En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a traducir.

  • No use section cuando quieras utilizarlo para dar estilos o ejecutar scripting
  • No lo use si los tag nav, articles o aside es más apropiado
  • No lo uses si a continuación de abrir la etiqueta no viene un título

En resumen un interesantenuevo tag con el que se pueden construir sitios más semanticamente correctos.

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/html-5-section/feed/ 1 Encontrar ids repetidos en html http://www.dakoo.cl/encontrar-ids-repetidos-en-html/ http://www.dakoo.cl/encontrar-ids-repetidos-en-html/#comments Sat, 20 Mar 2010 18:44:46 +0000 admin http://www.dakoo.cl/?p=128 En muchas oportunidades al escribir html nisiquiera podemos ver el resultado final de nuestros trabajos, por ejemplo si trabajas con trozos de html que al final se unen con códigos de otros desarrolladores y muchas veces no tenemos idea de los nombres que les pusieron a los tag html. Esto se complica más aún cuando tenemos que realizar algo con javascript sobre estos elementos que se han creado, por lo tanto, nuestros scripts no funcionarán.
A mí en mi trabajo me ocurre con mucha frecuencia así que escribí un pequeño script en js que te dá un alert con un resumen del estado de ids de tu html, para esto solo linkea esta dirección en tu html y al recargar la página te dará el resultado del análisis.

PLAIN TEXT
JavaScript:
  1. <script src="http://www.dakoo.cl/archivos/utilidades/verificador.js" type="text/javascript"></script>

En los próximos días linkearé el source por si quieren verlo

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/encontrar-ids-repetidos-en-html/feed/ 1 Shell de Mootools http://www.dakoo.cl/shell-de-mootools/ http://www.dakoo.cl/shell-de-mootools/#comments Tue, 09 Mar 2010 00:49:51 +0000 admin http://www.dakoo.cl/?p=98 Hoy Mootools nuevamente me ha sorprendido, debo reconocer que tengo un cierto "amor" por este framework :P . Estoy hablando de una shell que te permite ir probando tus scripts antes de subirlos o solamente para testear.
Si quieres probar esta maravilla entra aquí

saludos tuto

]]> http://www.dakoo.cl/shell-de-mootools/feed/ 0 Algunas cosas indispensables para comenzar tu desarrollo web …Libres, PARTE I –Editores de texto– http://www.dakoo.cl/cosas-indispensables-para-comenzar-tu-desarrollo-web-libres-parte-i-editores-de-texto/ http://www.dakoo.cl/cosas-indispensables-para-comenzar-tu-desarrollo-web-libres-parte-i-editores-de-texto/#comments Sun, 16 Aug 2009 23:46:17 +0000 tuto http://dakoo.cl/?p=40 Bueno, muchos discreparán conmigo de las cosas que utilizan para llevar a cabos sus proyectos web, pero no está mal como un comienzo, así que la lista que aquí voy a comentar es la que en particular utilizo para gran parte de mis proyectos. En este primer post veremos los editores de texto.
Una observación es que yo no soy diseñador, yo desarrollo más del lado de la programación, soy de los que cree "pastelero a tus pasteles", así que seguramente aquí me faltarán una serie de otras herramientas que seguramente existen pero listaré las que son más de mi agrado.

Editores de código

NOTEPAD++

http://notepad-plus.sourceforge.net/commun/images/cameleon.jpg

El clásico editor de windows "upgradeado" un millón de veces :P . Realmente es un gran editor, el soporte de una lista interminable de lenguajes te permite trabajar en muchos archivos y de diferentes cosas ( por ejemplo, html, css y js) al mismo tiempo, yo sé que esto lo puedes lograr con una serie de otros programas, pero sinceramente en ningún otro he visto tanto soporte de diferentes lenguajes y en tan poco peso( Kb). Su manejo de tags es otra gracia, ya que en lo personal no me gusta los editores que te autocompletan los tags de html por ejemplo, para mi es un poco incomodo, en cambio aca lo que realiza notepad++ es ir remarcando el tags que estas cerrando al momento que lo vas escribiendo. Las sugerencias por parte de los editores a lo que vamos escribiendo también es diferenciador acá, ya que la opción está, pero solo saldrá cuando nosotros queramos ya que combinando la tecla Crtl+Barra espaciadora te aparecerá lo que Notepad++ te sugiere, esto lo encuentro super útil ya que a veces el proceso de abrir la sugerencia por parte de otros editores hace que se produscan lags al momento de escribir. Trae un buscador que permite realizar estas búsquedas en archivos, por ejemplo le damos una palabra y una carpeta en donde buscar y nos dará todos los resultados encontrados, muy buena opción. El resto de las opciones les toca a ustedes encontrarlas, son muchas y se necesitaría un post completo para explicarlas todas, lo importante es que es muy bueno y totalmente recomendable.

Geany

http://www.geany.org/images/geany.png

Este editor lo utilizo cuando uso Linux( si lo reconosco, a veces uso windows), me gusta al igual que Notepad++ porque es muy liviano y puedes realizar muchas cosas. Por ejemplo algunos de los lenguajes soportados son C, Java, JavaScript, PHP, HTML, CSS, Python, Perl, Ruby, Pascal y Haskell (según Wikipedia).  Tiene características muy parecidas a Notepad++, pero la diferencia es que al estar hecho en GTK2 tiene versiones en linux y windows. Soporta projectos y tiene una terminal incluida, muy bueno cuando quieres ir compilando de inmediato.

VIM

Vim logo

Hablar de Vim es hablar de un grande entre los grandes,  sucesor del editor de los sistemas Unix VI, tiene todo lo que un programador necesita y de forma rápida y optimizada. Al principio un poco complicado de utilizar, a medida que se va tomando "ritmo" el potencial crece y crece, sorprende  por la gran cantidad de funcionalidades que posee y de lo sencilla que es su manera de editar los textos. A diferencia de los anteriores editores Vim se utiliza en una consola de comandos, teniendo que realizar la mayoría de las opciones mediante la combinación de teclas. La posibilidad de poder formatear el texto mediante expresiones regulares es muy potente y se pueden obtener resultados sorprendentes con unas pocas intrucciones. Estas son solo algunas características, se podrían escribir 1000 posts para eso, como conclusión se podría decir que si no tienes mucha experticia en el manejo de consolas de comandos, primero prueba uno de los editores anteriores, pero sí aún te gustan los desafíos adelante, totalmente recomendado.

Sin duda existen mas de 1 millón de editores más que podrían utilizar( por ejemplo se me viene Emacs a la cabeza), pero con cualquiera de estos tres puedes comenzar sin problemas, si tienes algún otro que te guste anótalo en los comentarios( Recuerda que deben ser libres :D ).

En el próximo post veremos editores de imágenes libres.

Espero les haya servido

Saludos tuto

]]> http://www.dakoo.cl/cosas-indispensables-para-comenzar-tu-desarrollo-web-libres-parte-i-editores-de-texto/feed/ 3