Desarrollo de Paginas Web

Como hacer un menu desplegable en Dreamweaver

noreply@blogger.com (Anonymous) — Mon, 26 Mar 2012 09:19:00 -0700

Menú desplegable

Subscribe to Desarrollo de Paginas Web by Email

Hola hoy aprenderemos hacer un menú con opciones desplegables en dreamweaver y colocaremos un par de opciones. A continuación les mostrare como hacerlo.

Lo primero una vez en el dreamweaver podemos irnos la opción de insertar una vez ahí buscamos la opción Spry donde encontraremos una serie de ítem nosotros utilizaremos la opción que dice Barra de menús de Spry.

Otra manera de insertar en menú desplegable en dreamweaver es ir a la opción que aparece en la parte superior de la venta y escoger el modo clásico. Entramos a la pestaña de Spry y escogemos el menú.

Una vez ahí damos clic en la opción de Barra de menús desplegables nos aparecerá una ventana donde nos pregunta cómo queremos el menú horizontal o vertical nosotros trabajaremos con el menú horizontal, escoges este y le damos clic en aceptar.

Nos creara un menú en la parte de diseño y añadirá una seria de línea de código y nos dirá que necesita unos archivos auxiliares le damos aceptar. En en sitio nos creara una capeta llamada SpryAssets donde podemos encontrar los archivos javascript, css y las imágenes que crea automáticamente al agragar el menú.

Podemos ver el menú creado en el explorador presionando F12 y podemos notar que las opciones que nos muestra son las que pone por defecto lo siguiente será modificar estas opciones desde el código HTML. Cada elemento del menú posee sub-elemento podemos crear cualquier tipo de opciones y darles un link de referencia o una acción eso depende para el uso que le queramos dar.

Cada ítem del menú está conformado por las etiquetas <li></li> y las otra es <ul></ul> que son las q contienen nuestra opciones, una vez sabiendo esto podemos modificar nuestro menú desde el código HTML de la siguiente manera.

Como se puede apreciar en la imagen anterior hemos modificado el código del menú y colocado nuestras propias opciones, ahora podemos ver cómo funciona mirándolo en el explorador y podemos ver que todas las opciones que hemos creado aparecen tal y cual lo hemos hecho desde el dreamweaver.

Si bien es cierto talvez no sea muy agradable a la vista pero si funciona pero podemos modificar su diseño gracias al archivo que se crea al momento de crear el menú, desde este css podemos modificar tanto el tamaño de la letra, el color, la fuente, los botones del menú y todo lo que quieran. Haremos unas pequeñas modificaciones al menú atreves del css que se encuentra por default en la carpeta SpryAssets.

Aquí ya estamos editando el css del menú y lo primero que haremos es lo ir esta parte del código y modificar lo siguiente:

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

position: relative;

text-align:center;

cursor: pointer;

width:8em;

float:left;

border: groove; /*le colocamos borde a los botones */

color:#999; /*le colocamos color al borde de los botones */

}

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

position: relative;

text-align:center; /*centramos el texto del menú en los botones */

cursor: pointer;

width: 8em;

float: left;

}

ul.MenuBarHorizontal a

{

display:block;

cursor: pointer;

background-color:#0CF;

padding: 0.5em 0.75em;

color:#9C9; /*cambiamos el color de los botones */

text-decoration: none;

}

ul.MenuBarHorizontal a

{

display:block;

cursor: pointer;

background-color:#0CF;

padding: 0.5em 0.75em;

color:#FFF; /*cambiamos el color de las letras cuando no están seleccionadas */

text-decoration: none;

}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

background-color:#666; /*cambiamos el color de los botones cuando tienen el foco*/

color:#693;

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color:#666; /*cambiamos el color de los botones cuando tienen el foco*/

color:#693;

}

Una vez terminado de modificar el código del css obtendremos un menú parecido a esto:

Esto solo es un ejemplo de lo q pueden hacer Uds. pueden hacer sus propias imágenes para los botones, personalizar el menú a su gusto.

Gracias.

HTML5

noreply@blogger.com (Anonymous) — Wed, 21 Mar 2012 09:56:00 -0700

HTML5

HTML5 es la actualización de HTML, el lenguaje en el que es creada la web. HTML5 también es un
termino de marketing para agrupar las nuevas tecnologías de desarrollo de aplicaciones web: HTML5,
CSS3 y nuevas capacidades de Javascript.

Nuevas etiquetas de HTML5

HTML4 y HTML5 son 100% compatibles entre sí. Todo el código que tienes en HTML normal seguirá

funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo único que tienes que hacer es

colocar este DOCTYPE4 antes de la etiqueta <html>:

<!DOCTYPE html>

<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.

<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.

<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.

<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.

<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.

<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.

<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.
Atención <div> no está muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

Ejemplo de blog hecho con HTML5

<header>
<hgroup>
<h1>El blog de Roberto Garcia</h1>
<h2>Este es el blog de Mejorando la web</h2>
</hgroup>
</header>
<nav>
Aquí va la botonera de navegación
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter,
facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, amenazas de copyright, etc.
</footer>

Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:

<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.

<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.

<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.

<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.

Lo básico para usar CSS

noreply@blogger.com (Anonymous) — Wed, 7 Mar 2012 18:52:00 -0800

Introducción a

CSS

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Funcionamiento básico de CSS

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

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

<head>

<title>Ejemplo de estilos con CSS</title>

<style type="text/css">

h1 { color: red; font-family: Arial; font-size: large; }

p { color: gray; font-family: Verdana; font-size: medium; }

</style>

</head>

<body>

<h1>Titular de la página</h1>

<p>Un párrafo de texto no muy largo.</p>

</body>

</html>

Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas

HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

1) Se crea un archivo de texto y se le añade solamente el siguiente contenido: p { color: black; font-family: Verdana; }

2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atención a que el archivo tenga extensión .css y no .txt

3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:

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

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

<head>

<title>Ejemplo de estilos CSS en un archivo externo</title>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo

CSS:

▪ rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor

stylesheet

▪ type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css

▪ href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

▪ Media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.

Anchura y altura

La propiedad CSS que controla la anchura de los elementos se denomina width.

La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

...

</div>

CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width, que se verán más adelante.

La propiedad CSS que controla la altura de los elementos se denomina height.

Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:

#cabecera { height: 60px; }

...

</div>

CSS define otras dos propiedades relacionadas con la altura de los elementos:

min-height y max-height, que se verán más adelante.

Podemos definir varios elementos dentro de un CSS y una vez enlazado al documento HTML y los podemos identificar de 2 formas en un elemento ya sea por “id” o por “class” dependiendo de cómo lo hemos declarado en el archivo externo un pequeño ejemplo es:

Para usarlo como “id” en el documento HTML:

#cuerpo{

…

}

Para usarlo como “class” en el documento HTML:

.cuerpo{

…

}

Esto es lo más básico de un CSS y de ahí depende de uds como diseñar una página con hojas de estilo.

noreply@blogger.com (Anonymous) — Wed, 7 Mar 2012 16:50:00 -0800

Introducción a

JavaScript

Portales Web

Vamos a empezar por describir que es JavaScript, JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.

Para integra código JavaScript en documento XHTML se hace con la etiqueta <script> que se pude incluir en cualquier parte del documento pero es aconsejable hacerlo dentro de la etiqueta <head>. Existen 2 formas para integrar código JavaScript en documento XHTML a continuación se presentan como hacerlo.

Incluir el código JavaScript en un documento XHTML

Un ejemplo claro seria en siguiente:

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

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

<head>

<title>Ejemplo de código JavaScript en el propio documento</title>

<script type="text/javascript">alert("Un mensaje de prueba");</script>

</head>

<body>

<p>Un párrafo de texto.</p>

</body>

</html>

En este ejemplo se integra el código JavaScript dentro del documento XHTML pero este método no se los recomiendo hay satura mucho el documento y es poco profesional.

Definir el código JavaScript en un archivo externo

Se pude hacer todo un archivo externo y solo llamar al documento con extensión (.js) dentro del XTHML con la etiqueta <script> ya mencionada.

Pero veamos un ejemplo más claro:

Archivo código.js

alert("Un mensaje de prueba");

Documento XHTML

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

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

<head>

<title>Ejemplo de código JavaScript en el propio documento</title>

<script type="text/javascript" src="/js/codigo.js"></script>

</head>

<body>

De esta manera podemos hacer todo el código JavaScript dentro del archivo externo y reutilizarlo en otro documento XHTML y haciendo más ligero el contenido del mismo, esta manera de utilizar documentos con extensión (.js) es mucho más profesional y al momento de programar todo está en orden.

Otra de las grandes utilidades de usar JavaScript es incluirlo en los elementos de XHTML veamos este pequeño ejemplo:

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

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

<head>

<title>Ejemplo de código JavaScript en el propio documento</title>

</head>

<body>

</html>

Se incluye en los eventos de los elementos de un documento XHTML como se muestra en el ejemplo anterior.

Lo básico de JavaScript

Empecemos con lo interesante y es con la programación básica de JavaScript que son las bases para el uso de este lenguaje.

El uso de variable es indispensable y en JavaScript no es la excepción y estas se declaran de la siguiente manera:

Ejemplo para declarar variables en JavaScript:

Var x;

Var y;

En JavaScript no hace referencia al tipo de variable al momento de declararla esto es muy importante.

También cabe mencionar el uso de los arreglos que son prácticamente variables que alojan más información o datos que una variable normal un ejemplo seria:

Ejemplo de un array:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado",

"Domingo"];

También cabe mencionar las estructuras de control de flujo que son las del tipo “si se cumple esta condición, hazlo; si no se cumple haz esto otro”.

· Estructura if:

if(condicion) {

...

}

· Estructura if…else:

if(condicion) {

...

}

else {

...

}

· Estructura for:

var veces = 0;

if(veces < 4) {

alert("Mensaje");

veces++;

}

· Estructura while:

while(condicion) {

...

}

· Estructura do…while:

do {

...

} while(condicion);

· Estructura switch

switch(variable) {

case valor_1:

...

break;

case valor_2:

...

break;

...

case valor_n:

...

break;

default:

...

break;

}

Como se puede apreciar en los ejemplos anteriores se pueden usar estas estructuras para crear diferentes aplicaciones y usar esto de acuerdo a lo que se necesite pero esto solo es lo básico vamos a ver cómo usar cosas más complejas en JavaScript a continuación.

Otras de las cosas que son de gran utilidad a la hora de programar en cualquier lenguaje son las funciones y JavaScript tiene ya predefinida como utilizar las funciones.

function nombre_funcion() {

...

}

Así declara las funciones de JavaScript y el nombre de la función se utiliza para llamar a esa función cuando sea necesario.

Talvez una de las cosas más importantes se JavaScript sea el uso del DOM o Document Object Model es una de las innovaciones que más ha influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más complejas.

Esto es a lo que se la llama un árbol de nodos:

Un punto muy importante es saber cómo acceder a los nodos y se puede hacer esto mediante las funciones que proporcionan DOM, existen muchas pero solo mencionare algunas.

Ejemplo de funciones de DOM:

getElementsByTagName()

getElementsByName()

getElementById()

Se pueden acceder a los nodos de un documento XHTML con estas funciones a continuación les mostrare con ejemplos claros como su pueden usar.

El siguiente ejemplo muestra cómo obtener todos los párrafos de una página XHTML:

var parrafos = document.getElementsByTagName("p");

En el siguiente ejemplo, se obtiene directamente el único párrafo con el nombre indicado:

var parrafoEspecial = document.getElementsByName("especial");

En el siguiente ejemplo, se obtiene directamente el valor del elemento mediante el id:

var cabecera = document.getElementById("cabecera");

Hay muchas maneras utilizar estas funciones que nos brinda DOM y que mejor que conocer más de estas que con ejemplos, les mostrare los diversos usos que le podemos dar.

El siguiente ejemplo obtiene de forma directa la dirección a la que enlaza el enlace:

var enlace = document.getElementById("enlace");

alert(enlace.href); // muestra http://www...com

//documento XHTML

<a id="enlace" href="http://www...com">Enlace</a>

El siguiente ejemplo obtiene el valor de la propiedad margin de la imagen:

var imagen = document.getElementById("imagen");

alert(imagen.style.margin);

//documento XHTML

Manejadores de eventos

Las funciones o código JavaScript que se definen para cada evento se denominan

"manejador de eventos" y como JavaScript es un lenguaje muy flexible, existen varias formas diferentes de indicar los manejadores:

▪ Manejadores como atributos de los elementos XHTML.

▪ Manejadores como funciones JavaScript externas.

▪ Manejadores "semánticos".

De los 3 mencionados anteriormente yo personalmente aconsejo el uso de los manejadores semánticos pero igual es al gusto del programador, explicare el uso de los 3:

· Manejadores de eventos como atributos XHTML

Se trata del método más sencillo y a la vez menos profesional de indicar el código

JavaScript que se debe ejecutar cuando se produzca un evento. En este caso, el código se incluye en un atributo del propio elemento XHTML. En el siguiente ejemplo, se quiere mostrar un mensaje cuando el usuario pinche con el ratón sobre un botón:

<input type="button" value="Pinchame y verás" onclick="alert('Gracias por

pinchar');" />

· Manejadores de eventos y variable this

JavaScript define una variable especial llamada this que se crea automáticamente y que se emplea en algunas técnicas avanzadas de programación.

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';"

onmouseout="this.style.borderColor='silver';">

Sección de contenidos...

</div>

· Manejadores de eventos como funciones externas

La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es recomendable para los casos más sencillos.

function muestraMensaje() {

alert('Gracias por pinchar');

}

//documento XHTML

· Manejadores de eventos semánticos

Los métodos que se han visto para añadir manejadores de eventos (como atributos

XHTML y como funciones externas) tienen un grave inconveniente: "ensucian" el código

XHTML de la página.

Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y aplicaciones web es la separación de los contenidos (XHTML) y su aspecto o presentación (CSS). Siempre que sea posible, también se recomienda separar los contenidos (XHTML) y su comportamiento o programación (JavaScript).

Así, el siguiente ejemplo:

<input id="pinchable" type="button" value="Pinchame y verás"

onclick="alert('Gracias por pinchar');" />

Se puede transformar en:

// Función externa

function muestraMensaje() {

alert('Gracias por pinchar');

}

// Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje;

// Elemento XHTML

La técnica de los manejadores semánticos consiste en:

1. Asignar un identificador único al elemento XHTML mediante el atributo id.

2. Crear una función de JavaScript encargada de manejar el evento.

3. Asignar la función externa al evento correspondiente en el elemento deseado.