Como hacer un menu desplegable con JQuery
Creado en CSS, HTML, JQuery el dic 06Aquí les dejo el tutorial mas reciente sobre como hace un menu dropdown o desplegable utilizando la libreria de Javascript JQuery.
HTML desde cero
Creado en Dreamweaver, HTML el ago 17En este post encontraras un poco de ayuda para dar tus primeros pasos en el mundo del HTML. Si lo que quieres es empezar a diseñar tus paginas web y aprender html desde cero, aquí te tratare de dar las bases para que puedas seguir aprendiendo.
Que veremos en este post
- Estructura de un archivo HTML
- Tu primero archivo en HTML
- Uso de parrafos y estilos
- Uso de links
- Insertar Imagenes
- Tablas
- Tu primera página web
Estructura de un arvhico HTML
No te espantes todavía, tal vez pienses que para crear una página web necesitas saber “programar” como muchos lo dicen. Tenemos que aclarar este punto antes que nada, diseñar páginas web en html no nos hace programadores; HTML es un lenguaje de marcado, a lo que me refiero con esto es que los navegadores como Google Chrome, Safari, Internet Explorer (el patito feo), etc interpretan este lenguaje de “marcado” y crean los elementos en pantalla. Esto no quiere decir que HTML sea un lenguaje de “programación”, es simplemente un lenguaje para crear estructuras.
Me desvié un poco del tema, volviendo a lo importante. La estructura de un archivo HTML esta basada en etiquetas, las etiquetas son pequeños textos que se abren y se cierran (huh?). Para “abrir” una etiqueta se utilizan los corchetes y el nombre de la etiqueta (<miEtiqueta>), para cerrar la etiqueta se utiliza la misma etiqueta pero escribiendo una diagonal antes del nombre de la etiqueta (</miEtiqueta>).
Sabiendo esto podemos ver la estructura clásica de un archivo HTML.
<DOCTYPE> <html> <head> <meta /> <title>Mi documento</title> </head> <body> Aquí va nuestro contenido </body> </html>Se que puede resultar un poco intimidante ver todo este código pero la mayoría de los editores de código pondrán todo este código de inicio para que empecemos a meter nuestro contenido. Sin embargo, es bueno saber como esta hecho nuestro documento.
Como podemos ver una etiqueta puede contener a otra, y asi sucesivamente. La etiqueta <html> contiene a la etiqueta <body> y la etiqueta <body> contiene todo lo que despliegan los navegadores. Todo lo contenido en la etiqueta <head> también es muy importante ya que aquí se contienen elementos como el titulo, las metatags (etiqueta meta) y muchas veces Javascripts.
Tu primer archivo HTML
Ahora si, después de conocer la estructura veamos como agregar un simple párrafo a nuestro documento en html.
La etiqueta para incluir parrafos es la etiqueta <p> y se cierra </p> como dijimos anteriormente. Esta etiqueta tiene muchos atributos que podemos utilizar para personalizar nuestro párrafo recien creado. Los atributos en HTML se definen dentro de la etiqueta de apertura. Veamos en el caso de nuestro etiqueta de parrafo como sería:
<p align="center">Este es mi primer parrafo en HTML!</p> Así de fácil y sencillo tenemos nuestro primer parrafo. Prueba tu archivo en tu navegador y veras que tu parrafo se encuentra perfectamente centrado en la página.
Otros atributos para nuestra etiqueta de parrafo son: id, class, title, dir y lang. Para ver un listado completo ve aquí.
Uso de links
Que sería de un archivo html sin vinculos. Le etiqueta que nos permite agregar un vinculo en HTML es <a> y tiene 2 atributos muy importantes, el primero es la url del vinculo que queremos y el segundo es un titulo que ayuda a los navegadores a indexar los enlaces entre sitios web. Entonces nuestro vinculo o link quedaría así:
<a href="http://www.yadahcl.com" title="Despacho de Diseño y Desarrollo Web">Visita mi sitio</a>Así de fácil, otra vez vemos que el código no debe intimidarte. Otro atributo que podemos darle a nuestro vinculo y uno muy importante a decir verdad es “target”, este atributo lo que hace es muy sencillo: define en donde queremos que se abre el vínculo. Por default todos los vinculos se abren en la misma ventana donde nos encontramos, pero si que tal si no quisieramos que el usuario se fuera de nuestra página cuando da clic en otro vinculo? Para esto le damos el atributo “_blank” y quedaría de la siguiente manera.
<a href="http://www.yadahcl.com" title="Despacho de Diseño y Desarrollo Web" target="_blank">Visita mi sitio</a>Como insertar imagenes en HTML
¿Que sería de la WWW sin imagenes? Solo sería un espacio lleno de información y colores planos. Para eso existe una etiqueta que te salvará la vida para agregar imagenes a tus sitios web. La etiqueta img es la encargada de desplegar las imagenes en nuestro contenido html. Recibe como la mayoría de las etiquetas atributos. Existen muchos atributos, pero 2 son básicos para una sintaxis correcta. Estos 2 atributos son: src y alt. src viene de source y lo que hace es indicar la url donde se encuentra nuestra imagen, alt indica un texto alterno que ayuda a la gente que no puede desplegar las imagenes para saber que debe haber ahi.
Suena a mucha información, pero al ver el ejemplo verás que sencillo es:
<img src"http://google.com/imagen.jpg" alt="Google Logo" /> Algo diferente vemos aquí, la etiqueta img como muchas otras que conocerás poco a poco es una etiqueta que se cierra dentro de la misma etiqueta que se abre. Para cerrar una etiqueta en la misma que se abre simplemente agregamos la diagonal antes del corchete que cierra.
Es muy importante tener la dirección correcta de la imagen para que se pueda desplegar correctamente.
Tablas en HTML (Sitios web a la antigüita)
Sin duda las tablas ya no se usan como antes, tratare de explicar este punto. Todos los sitios web en el pasado eran hechos con tablas y nada mas que tablas, ya que eran lo único que se conocía y lo mas fácil para realizar una página web. Hoy en día y con la evolución que ha tenido el internet, los sitios web se realizan con etiquetas llamadas <div>, estas etiquetas nos dan mas libertad a los diseñadores y desarrolladores web de manipular el código y tener un mejor resultado. Sin embargo no te desiluciones y pienses “Entonces para que me sirve esto?”, claro que te sirve! Todos debemos saber las bases de lo que hacemos, y aunque las tablas ya no son lo mejor para hacer una página web aun se utilizan para desplegar información tabular y datos.
La etiqueta <table> tiene muchos parametros y atributos que definir, ademas la estructura es muy importante. Primero debemos abrir la etiqueta table como es de esperarse, pero es muy importante definir cada renglon cuando estamos escribiendo el código y dentro de cada renglón debemos definir cada celda. Una tabla de 2 columnas y 2 renglones quedaría así:
<table width="300" cellspacing="0" cellpading="10"> <tr> <td>Celda </td> <td>Celda </td> </tr> <tr> <td>Celda </td> <td>Celda </td> </tr> </table> Sencillo no? OK, se que si lo ves por primera vez puede ser un poco intimidante ver tanto código. Pero si nos detenemos un poco y lo razonamos no es nada complicado. Una tabla contiene renglones y los renglones contienen celdas, así de fácil y sencillo.
Ahora, la etiqueta table necesita parametros especiales para “funcionar”. El primero y el mas importante es width que define el ancho que tendrá nuestra tabla. Se puede expresar en porcentaje o en pixeles, si es un porcentaje escribimos width=”70%” y si es en pixeles solo ponemos el numero de pixeles.
Otro atributo importante es cellspacing y cellpadding, ambos se expresan en pixels poniendo solo el numero. Cellspacing corresponde al espacio entre una celda y otra. Cellpadding sin embargo funciona como un “rellendo” a la celda. Es decir, si nuestra celda mide 200 pixeles de ancho y nosotros agregamos un cellpadding de 10, la celda realmente medira 220 pixeles.
¿Porque 220 si solo le agreamos 10 pixeles? Es muy fácil, el padding en html y css funciona de la siguiente manera: Cuando un usuario agrega un padding o en este caso cellpadding se agrega el “relleno” a cada uno de los lados del elemento. En este caso de lado izquierdo, derecho, arriba y abajo de la celda. El padding ayuda mucho para que nuestros elementos dentro de la celda no se vean “apretados”.
Tu primera página en HTML
Muy bien, has llegado al final de este pequeño camino. Ahora trata de hacer algo con lo que aprendiste, es muy fácil aquí te doy unos tips sobre como hacerlo: Crear una tabla con la estructura de tu página web, agrega imagenes y vinculos y dale forma hasta que te guste.
Espero te haya servido este pequeño, muy pequeño tutorial sobre las bases de código HTML. Si te gusto dale “Me gusta” o “+1″ o “Tweet” dependiendo de tus preferencias (o todas).
Como agregar el botón de Google Plus a WordPress
Creado en Google Plus el ago 11Hemos llegado a una era en el internet que es completamente necesario que nuestro sitio web tenga pequeños botones sociales que permitan a los usuarios “recomendar” nuestra página.
Si ya conoces WordPress y has desarrollado Templates de WordPress desde hace tiempo, este proceso te será muy rápido y sencillo.
Para poder agregar el botón +1 de la nueva red Google Plus a nuestra plantilla de WordPress hay que seguir los siguientes pasos:
1. Localizar el loop.
2. Dentro del loop, justo donde queremos que vaya nuestro botón +1 debemos copiar el siguiente código.
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Así de fácil y sencillo tendrán su botón de +1 en su blog.
Dentro de la segunda línea pueden intercambiar el valor “size” por los siguientes valores: small, medium y tall. Si removemos la variable se coloca el tamaño estandar.
Themes para WordPress
Creado en Wordpress el jul 25Estos son solo algunos de los mejores temas para WordPress que he encontrado en esta semana. Todos ellos son Temas Premium para WordPress. En unos dias esperen un post de puros Temas gratuitos!
Chameleon por Elegant Themes
Aim por Templatic
Sealight por Woothemes
Como entrar a Google Plus
Creado en Google Plus el jul 13Si estas leyendo este post seguramente has escuchado del fenomeno que el gigante del internet ha lanzado para combatir en una era que gira alrededor de las redes sociales.
Esta semana se dieron a conocer reportes no oficiales que informaban que Google Plus ha alcanzado los 50 millones de usuarios! No tengo los datos exactamente sobre el crecimiento de Facebook en sus primeros meses pero creo que no fue de 50 millones de usuarios registrados en 2 semanas.
Sin duda el gigante Google será el único que podrá traer un poco de competencia a Facebook
Como entrar a Google Plus
Muchisimas marcas y personas se han aprovechado de que en la primera semana Google+ fue una beta privada a la que pocos pudimos entrar, en esta beta nos daban oportunidad de enviar invitaciones, pero con esto no era seguro que el usuario que la recibiera iba a poder entrar a GPlus.
Sin embargo ahora Google ha dejado que todos los usuarios que tengan una cuenta de Google (no solo Gmail) puedan tener su perfil de Google+. Así que no sigas pidiendo invitaciones y entra con tu cuenta de Google a la siguiente url.
Google Plus
Actualización: Google me ha dado un enlace para dar invitaciones de manera mas fácil. Si no han recibido invitación a Google+ hagan clic en este link. *Se estan terminando mis invitaciones por este link, si la usas te agredeceremos todos que compartas tu link en los comentarios así mas gente podrá entrar. El link para invitar a gente lo encuentras en la barra lateral de Google Plus, comparte tu link en el área de comentarios!
Y no dejen seguirme aqui mi perfil:
gplus.to/jluisfg o en Twitter 
