Web Blog D_sign» HTML

Como hacer un menu desplegable con JQuery

jluisfg — Wed, 07 Dec 2011 01:32:19 +0000

Aquí les dejo el tutorial mas reciente sobre como hace un menu dropdown o desplegable utilizando la libreria de Javascript JQuery.

Descarga aquí los archivos

HTML desde cero

jluisfg — Wed, 17 Aug 2011 18:32:56 +0000

En 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 (), para cerrar la etiqueta se utiliza la misma etiqueta pero escribiendo una diagonal antes del nombre de la etiqueta ().

Sabiendo esto podemos ver la estructura clásica de un archivo HTML.

    Mi documento           Aquí va nuestro contenido

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 contiene a la etiqueta y la etiqueta contiene todo lo que despliegan los navegadores. Todo lo contenido en la etiqueta 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

y se cierra

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:

Este es mi primer parrafo en HTML!

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 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í:

Visita mi sitio

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.

Visita mi sitio

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:

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

, 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

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í:

Celda	Celda
Celda	Celda

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).

De Photoshop a HTML: Tips y Trucos

jluisfg — Mon, 27 Jun 2011 23:38:46 +0000

Ultimamente han salido a la luz muchos servicios para la conversión de un archivo PSD a un sitio completamente funcional en HTML, inclusive implementan diversas plataformas como WordPress, Drupal o Magento. Todo desde un archivo PSD.

El propósito de este post es darles unos tips para pasar de photoshop a html sus proyectos.

1. No todo debe ser un jpg!

Muchas veces cometemos este error. No todo lo que hemos diseñado debe convertirse en una foto al pasarlo a html, esto afecta primero que nada en el SEO pues Google no considera las imagenes como información como tal.

Un logo por supuesto que debe ser una imagen, pero el texto de introducción a tu sitio muy bien puedes introducirlo como debe ser en un párrafo.

Este punto quiere decir basicamente…elige bien los elementos que necesitas que sean gráficos y los elementos que no se necesitan.

2. Gradientes y fondos.

Si estas en tus primeros pasos haciendo una pagina web de photoshop hay una cosa que debes considerar primero. Planea bien como vas a manejar los colores de fondo, gradientes, etc. Elige bien que parte requieres exportar de Photoshop, si solo estas trabajando con un color de fondo volvemos al punto 1, no necesitas exportar ninguna imagen.

Si diseñaste un gradiente muy bonito que te gustaría se viera idéntico al mudar tu psd a web, lo conveniente es exportar solo una pequeña franja que despues mediante CSS podrás hacer que se repita y quede igual.

Ahora si el caso es que has diseñado una textura que te gustaría mantener, debe ser ahora muy específico y exacto planeando como puedes optimizar tu imagen. Es decir, la mayoría de las texturas se repiten pero tienen diferentes mediad. Lo que tienes que asegurarte es seleccionar muy bien el tamaño de la textura para que al repetirla usando CSS no se vea mal o distorsionada.

3. Bordes

Muchos diseñadores gráficos están acostumbrados a poner bordes en todo lo que se puede (no que sea una mala costumbre). Si esta es de tus primeras pasando de psd a web entonces debes tener presente como serán tus bordes.

Si los bordes que estas utilizando son solo de color, entonces por medio de CSS podrás crearlos sin ningún problema. Si tus bordes son irregulares o diferentes a lo “normal” sin duda debes considerarlos para le paso siguiente.

4. Herramienta Slice

El primer paso fue maquetar una web obviamente. El segundo paso consiste en todos los anteriores, la planeación de como vamos a exportar desde Photoshop a HTML.

Para este paso debes conocer una herramienta que se convertirá en tu mejor amiga para pasar de psd a html tus próximos proyectos.

La herramienta slice te permite seleccionar partes de tu archivo PSD, sobre-poniendo una capa cyan. Estas rectangulos de selección indican los elementos que mas tarde vas a exportar.

Al hacer una selección puedes dar doble clic sobre ella y una ventana donde puedes elegir el nombre que tendrá esa parte gráfica una vez que la exportes.

El proceso de pasar de PSD a HTML consiste en repetir estos pasos una y otra vez. Despues de tener todos tus elementos seleccionados ahora vamos al menu File y selecciona la opción Save for Web and Devices.

Esta opción nos da varias opciones de optimización para nuestras imagenes que si no conoces es mejor dejar tal cual están, Photoshop hace un muy buen trabajo en la optimización de las fotos para web así que no debes preocuparte por el tamaño. Lo único que debes elegir es el tipo de archivo que quieres exportar. Puedes elegir entre JPG, PNG-8, PNG-24 y WBMP, después eliges la opción salvar y en la siguiente ventana antes de elegir donde se guarden tus archivos en la parte inferior es recomendable elegir la opción “All User Slices”.

Ahora ya tienes los elementos gráficos para pasar tu web de Photoshop a HTML. Por supuesto ahora es recomendable que tengas conocimientos de HTML para poder integrar todo en tu sitio web.

Si no es así te recomiendo darte una vuelta por todos mis artículos sobre Dreamweaver, HTML y CSS.

Photoshop a html – Top servicios

jluisfg — Wed, 22 Jun 2011 00:50:24 +0000

Aquí algunos de los mejores servicios que he encontrado que se especializan en pasar de photoshop a html. Si eres diseñador y tienes clientes que te han pedido sitios web pero no puedes realizarlos este servicio te viene a solucionar la vida, yo lo he utilizado en un par de ocasiones y me ha salvado la vida ya varias veces.

Aquí los que yo considero mejor en cuanto a calidad del servicio, calidad del producto final y precio.

Estos son algunos de los servicios mas populares de conversión mas conocida como PSD to HTML.

Centrar con CSS

jluisfg — Sat, 26 Mar 2011 01:27:22 +0000

Si estas empezando en el mundo del CSS puede parecer que centrar tu página sea algo muy complicado, pero despues de leer este post y hacerlo un par de ocasiones se volvera parte de tu rutína.

Centrar en CSS es muy fácil, simplemente se hace utilizando la propiedad margin.

Imaginemos que tenemos una < div > con la clase .contenedor ; lo haríamos de la siguiente manera:

.contenedor{
   width: 960px;
   margin: 0 auto;
}

Con esta sencilla propiedad nuestra página esta centrada con CSS.

Centrar imágenes CSS

Esto es una tarea un poco mas complicada, ya que no se puede directamente alinear al centro una imagen con CSS. Para esto a veces utilizamos mejor una < div > y le asignamos un estilo como el siguiente:

< div style=" text-align: center;">  < /div >

Es un poco decepcionante que no podamos centrar imagenes con CSS directamente, pero esperemos que en un futuro se adapte.

Boton con CSS

jluisfg — Sat, 26 Mar 2011 00:56:14 +0000

En este post abarcaremos como realizar botones con css. Descgraciadamente algunos de los efectos que utilicemos para hacer botones en css no tendrán el mismo efecto en Internet Explorer, dado a el poco soporte de CSS3.

Primero necesitamos crear un simple vinculo en HTML con una clase para poder asignar mejores estilos en css. Utilizando la etiqueta < a > con la clase .boton .

Ahora necesitamos crear el primero de los estilos para cuando el boton se encuentre sin presionar.

/* Estilos para el boton*/
a.boton{
  background: #333;
  color: #FFF;
  padding: 7px 15px;
  text-decoration: none;
  font-size: 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Con estos estilos tendremos un botón en su estado inicial casi completo. Ahora lo único que nos falta es el estado para cuando el cursor se encuentre encima del botón, este estado es llamado hover.

Usaremos los siguientes estilos:

a.boton:hover{
   background: #BBCF1B;
   color: #798709;
   border-bottom:  solid thin #798709;
   border-top: solid thin #D7E750;
}

Con estos estilos tenemos un botón funcional. Algo que me gustaría resaltar, es el uso de dos bordes en el estado hover; esto es para dar cierto sentido de relieve al usuario, utilizando un color oscuro en el borde inferior y un color claro en el borde superior.

Espero que les haya servido este pequeño para realizar un boton con css.

Compartan sus botones

Freebie – One Page Portfolio HTML Theme

jluisfg — Mon, 20 Sep 2010 22:24:32 +0000

Con un poco de tiempo libre quedo lista un nuevo HTML Theme , aprovechenlo y denle un buen uso

One Page Portfolio

Preview | Descargar

Aprovechenlo!

Nueva Sección – Temas gratis!

jluisfg — Thu, 04 Feb 2010 20:14:40 +0000

El dia de hoy liberamos una nueva sección con el animo de apoyar y brindar algo a ustedes que nos siguen. En esta nueva sección de HTML Templates estaremos posteando de manera semanal uno o dos templates para ustedes. Estos temas son libres, pero los hemos hecho con la intención de que los puedan descargar y ver las técnicas que hemos utilizado, de cualquier manera los pueden utilizar comercialmente únicamente respetando los créditos respectivos. Esperamos ser de gran ayuda y esperamos que nos comenten lo que vayan pensando por aqui o por el twitter @yadahcl.

Tambien pueden mandarnos su lista de deseos, esto quiere decir si tienen alguna sugerencia de template que realizar (negocio, despacho creativo, deportes, etc). Ustedes digan.

Seguiremos buscando la manera de liberar mas y mejores freebies para ustedes. Gracias!

Menu Horizontal en HTML con listas y CSS

jluisfg — Mon, 28 Dec 2009 22:36:38 +0000

Existen diferentes maneras de crear un menu en HTML con o sin ayuda de Hojas de estilo. En este caso abarcaremos como hacer un menu horizontal con listas.

Utilizando estilos CSS podemos remover la imagen que indica la lista y podemos ubicar de manera horizontal cada elemento de la lista, para asi tener como resultado un menu. Los estilos que usaremos son:

float – permite sacar a un elemento del flujo del documento, y posicionarlo a la izquierda o derecha de otros elementos. En el caso de la lista ubicara cada inciso de la lista a la derecha del anterior.
padding - permite agregar un relleno a cada elemento de manera que no queden encimados los elementos.
list-style-type - esta propiedad nos permite cambiar la imagen de la lista o en este caso para el menu, removerla.

Utilizaremos estilos compuestos, los cuales sirven para establecer estilos especificos. Por ejemplo: si contamos con una etiqueta div de clase “estilo1″ y dentro de esta etiqueta tenemos un enlace (o etiqueta a), entonces la regla de CSS seria estilo1 a es muy importante el espacio entre cada clase y etiqueta. Los estilos compuestos no tienen limite, pueden in de un simple estilo compuesto de una clase y una etiqueta, hasta tener un estilo asi (#container .estilo1 table .estilo3 li). El cual nos hablaria de un elemento de tipo lista dentro de una tabla con una clase llamada estilo 3 dentro de una division con una id container y una clase estilo1. Por revuelto que esto pueda sonar es importante que sea comprendido este concepto para continuar con el menu horizontal.

Para las personas que utilizan Dreamweaver, al momento de crear un estilo compuesto Dreamweaver nos da una muy sencilla explicación del estilo que estamos creando, lo cual los ayudara a no perderse en el proceso.

Para efecto de este tutorial, crearemos una división con un id menu y crearemos una lista dentro de esta division.

El propósito sera crear un estilo para las listas de la etiqueta menu, que de la propieda de flotar hacia la izquierda, de manera que se ubiquen una despues de la otra de manera horizontal.

Para esto usaremos un estilo compuesto #menu li . Podría ser #menu ul li, pero recordemos que queremos dar las propiedades a cada elemento de la lista (li) y no a la lista entera (ul).

El código en CSS sería el siguiente.

Podemos ver que nuestra lista “desaparecio” a los ojos del usuario, sin embargo, podemos mejorarla agregando mas estilos.

Cuando agreguemos un vinculo, notaremos que desaparece parte del estilo que hemos creado, esto se debe a los estilos por default de la etiqueta a que indica un enlace. Para solucionar este problema debemos crear una nueva regla de estilo compuesto para el menu, menu li a:

Con este estilo hemos terminado nuestro menu horizontal.