Marcos en HTML

October 20th, 2006

Con las frameset es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas.
 

En cada frame se nos permite:
Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma un hiperenlace puede tener como destino un documento y la frame en el que se mostrará.
 

Tendrán asociado un nombre, que las distinguirán del resto de las frames de la pantalla y permitirá usarlo en los hiperenlaces.


 En el caso que se cambie el tamaño de la ventana, se podrá determinar si la frame se ajusta a este tamaño o mantiene su tamaño intacto.      Esto permite crear nuevos tipos de documentos, en los que, por ejemplo, se mantendrá una región estática (lista de enlaces, barra de botones, formulario) y otra zona dinámica en la que se mostrará el resultado. De esta forma una de las principales utilidades de las frames es la creación de páginas con un índice (por ejemplo un manual) o una cabecera estática, consiguiendo así una mejora en la navegación al poder acceder al índice de una manera más rápida y efectiva.
 

El uso de las frames es útil para cierto tipo de documentos, pero puede llegar a dificultar la navegación, sobre todo cuando se está iniciando en el mundo de la creación de sitios web, dentro de un documento con frames no tendrán utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarán fuera del documento con frames, además estarían de más, ya que con seleccionar el destino en el Menu, basta para ver el contenido.
 

No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por el Netscape 2 ó superior y el Internet Explorer 3 o superior.
 

Por tanto, en este caso, si se quiere que el documento sea accesible por gran cantidad de usuarios se debe crear un documento con frames y otro sin ellas, usando la etiqueta NOFRAMES, dentro de la cual se incorporarán nuevamente los códigos, pero esta vez como Tabla.
 

Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso la etiqueta BODY, se desplaza hacia abajo. Su estructura es la siguiente:

< HTML >
< HEAD >
Definiciones de la cabecera (title, metas)
< / HEAD >
< FRAMESET >
Definición de las frames que forman el documento y de los fichero que incluye cada una.
< NOFRAMES >
< BODY >
Instrucciones HTML que se mostrará en los navegadores que no soporten frames.
< / BODY >
< / NOFRAMES >
< / FRAMESET >
< / HTML >

Dentro de la etiqueta NOFRAMES se podrá incluir una explicación de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versión del documento que se muestre sin necesidad de frames. 

ROWS:
Se definirá separado por comas el tamaño de cada una de las frames. De esta forma se dividirá la pantalla de forma horizontal, según la dimensión definida para cada una de las filas horizontales.
El tamaño de la frame, puede expresarse de las siguientes formas:
Ø      En valor absoluto, que indicará el tamaño en puntos de la pantalla. En este caso si todas las frames se indican de este modo, los valores se ajustarán para que las frames ocupen la totalidad del espacio de la ventana del navegador, guardando siempre la proporción con la que se definen las frames, con sus valores fijos, es decir, si la pagina está diseñada para visualizarse en una resolución 800 * 600, y el visitante tiene 1024 * 768, por ejemplo, éste último no visualizará correctamente nuestra página.
Ø      En tanto por ciento sobre el tamaño de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarán para que coincidan con el tamaño de la ventana, en independencia de la resolución de pantalla del visitante. Se podrá combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje.
De forma relativa con el símbolo (*) que indica el tamaño restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupará dos tercios del espacio restante y la segunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores.

COLS:
Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirán las frames de forma vertical.

URL:
Como su nombre indica, especifica el documento HTML o fichero que se mostrará en la frame definida. Si no se especifica documento alguno se mostrará la frame vacía.
NAME:
Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento. Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.
MARGINWIDTH:
Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los márgenes al mismo tamaño, si se especifica se valor será en puntos de la pantalla.
MARGINHEIGHT:
Igual que en el caso anterior pero para el alto de los márgenes. Lo normal es no especificar ninguno de estos dos atributos.
SCROLLING:
Indica si la frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame (está en dependencia de la resolución de pantalla del internauta), si es necesaria. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.
NORESIZE:
Indica que la frame no debe ser variada de tamaño por el usuario, se puede variar el tamaño de una frame situando el cursor del ratón encima y arrastrando en la dirección deseada (con el editor que utilicemos, o bien con el atributo correspondiente). Con este atributo el usuario no podrá cambiar el tamaño de la frame en ningún caso. Por defecto todas las frames pueden variar su tamaño.

Plantillas para paginas web

October 14th, 2006

Muchas veces por la premura que tenemos para la realizacion de un proyecto web, necesitamos de ideas frescas de diseño.

Template Monster te ofrece una amplia gama de plantillas para paginas web, ya sea para que puedas ver las nuevas tendencias en diseño de paginas web o porque no?, por si deseas comparar una de las plantillas.

Las plantillas de paginas web te pueden ser muy utiles para armar bocetos para tus clientes, lo que a veces resulta muy comodo para refrescar nuestras ideas conceptuales de diseño.

Template Monster es la mejor forma de generar ingresos en tu web, ya que posee un sistema de referidos por el cual te paga por cada suscripcion que se realice desde un enlace desde tu sitio web.

Adobe Flash Player 9 - Descarga

October 12th, 2006

Este enlace te servira si deseas descargar el Adobe Flash Player 9, si, leístes bien, Macromedia fue absorbido a mediados del año pasado por Adobe, asi que la noticia no es nueva.

presiona aqui para instalar el Adobe Flash Player 9 en tu pc.

Ayuda a mantener gratuito este sitio, haz clic en los anunciantes.

Insertar imagenes en HTML

October 10th, 2006

De poco nos serviria una pagina web cuyo contenido sea puro texto, necesitamos incluirle imagenes para que la pagina sea llamativa y no aburir al visitante.

En este apartado aprenderemos a insertar una imagen desde el bloc de notas utilizando el codigo HTML.

La etiqueta para introducir una imagen es IMG y sus atributos permiten controlar las dimensiones de la imagen, su origen, el borde y algun comentario que deseemos incluir.

La sintaxis quedara de la siguiente forma: < img src="ruta_de_la_imagen" mce_src="ruta_de_la_imagen" border="0" align="left / center / right" valign="top / bottom / middle / absmiddle" alt="Comentario corto para la imagen" longdesc="Descripcion larga de la imagen" />

La etiqueta de imagen no tiene etiqueta de cierre por lo que deberemos cerrarla en el lugar (agregar un espacio el simbolo / ) antes de poner el simbolo mayor que ( > ).

Los atributos:

src: como valor incluiremos la ruta de la imagen.
Es preferible que las imagenes se encuentren en una carpeta un nivel inferior dentro de la carpeta en la cual tenemos los documentos HTML, ya que esto facilitara al navegador, y a nosotros mismos la busqueda de la imagen.

border: el valor es un numero natural.
Por defecto cuando le incluimos un vinculo a una imagen se le agrega a esta, un molesto recuadro de color azul, para evitar ese recuadro introduciremos el valor de cero (0).

align: es la alineacion horizontal.
Cuando queremos acompañar un parrafo de una imagen relacionada al texto, intriduciremos left como valor de align., esto hara que la imagen se posicione a la izquierda del texto.

valign: Es la alineacion vertical.
sus valores ubican a la imagen en esa posicion con respecto al texto.

alt: Comentario de las imagenes
seguramente nos hemos topado con sitios web que al pasar el cursor por encima aparece un cuadrito de color amarillo y dentro de el un texto. Pues ese texto se lo incluimos con el atributo alt.

longdesc: Descripcion larga de la imagen
parecido al atributo alt, sin embargo este no esta visible para el visitante, solo para los buscadores, no debemos exceder los 250 caracteres.

valores de códigos de tecla - Flash - funcion keyPress

October 7th, 2006

Al momento de querer agregar ineractividad a nuestra animacion, puede servir para realizar un juego en Flash, y deseemos agregar interactividad a nuestro juego, seguramente vamos a requerir que cuando se presione uns tecla cualquier se ejecute alguna accion o Clip de Pelicula, Flash trae algunas de las teclas incluidas, pero no todas, por ejemplo no tiene por defecto el valor de la tecla 1, 2 , 3, etc, del teclado numerico ni las teclas del teclado de funciones.

Aqui te presento el valor de cada una de esas teclas, divididos por grupos.

1. Letras de la A - Z y numeros del 0 - 9.
(ver letras de la a-z y numeros del 0-9)

En la tabla siguiente se enumeran las teclas de un teclado estándar para las letras de la A a la Z y los números del 0 al 9, con los valores correspondientes del código de tecla usados para identificar las teclas en ActionScript.

2. Teclas del Teclado Numerico.
(ver teclado numerico)

En la tabla siguiente se enumeran las teclas de un teclado numérico con los valores correspondientes del código de tecla usados para identificar las teclas en ActionScript.

3. Teclado de Funciones.
(ver teclado de funciones)

En la tabla siguiente se enumeran las teclas de función de un teclado estándar con los valores correspondientes del código de tecla usados para identificar las teclas en ActionScript

4. Otras Teclas.
(ver otras teclas)

En la tabla siguiente se enumeran las teclas de un teclado estándar que no son letras, números, teclas del teclado numérico ni teclas de función, con los valores correspondientes del código de tecla usados para identificar las teclas en ActionScript.

Si necesitas conocer el valor ascii de una tecla, copia y pega el siguiente codigo dentro del Panel de Acciones:

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
    trace(”DOWN -> Code: ” + Key.getCode() + “\tACSII: ” + Key.getAscii() + “\tKey: ” + chr(Key.getAscii()));
};
Key.addListener(keyListener);

Cuando presiones CTRL+ENTER se visualizará una pelicula vacia, basta con que presiones cualquier tecla y te aparecera en un cuadro de dialogo adicional el valor de su codigo y su codigo ASCII.

Listas Anidadas en HTML

October 6th, 2006

Antes de empezar con este tema te recomiendo leer Listas en HTML, para una mejor comprension de este tema.

Este tema lo vamos a ilustrar con un sencillo ejemplo:

Para mejorar tu presencia en Internet necesitas:

     

  1. Promocionar tu sitio Web.     
     

  1. Clasificados
  2. Foros
  3. Blogs   
  4. Radio
  5. TV
  • Atraer trafico hacia tu sitio web.     
    1.  

    2. Intercambio de enlaces.
       
       

    1. No hacer SPAM
    2. intercambio con sitios de tematica similar. 
       

    1. invitar al webmaster a realizar el intercambio de enlaces.
  • Promoverlo en la papeleria publicitaria de tu empresa.
     
    1.  

    2. Tarjetas de presentacion
    3. broshures
    4. volantes
    5. Flyers   

    Haz clic aqui para ver el codigo de este ejempo.

    Como se aprecia en el codigo lo unico que debemos hacer es no cerrar la lista principal sino hasta el fin de la lista.

    Te recomiendo que veas el codigo de este ejemplo.

     

    Listas en HTML

    October 5th, 2006

    En un editor de textos como Microsoft Word podemos ordenar nuestros elementos con Numeracion y Viñetas, esta opcion en html esta disponible y se llaman Listas.

     Las listas son de 3 tipos:

    1. Listas ordenadas
    2. Listas Desordenadas
    3. Listas de Definicion.

    Listas Ordenadas.

    Se llaman ordenadas porque tienen un orden secuencial, en Word las conocemos como Numeracion, cuando digo secuencial me refiero a que tienen un orden de menor a mayor, por ejemplo la forma en que mencioné los tipos de listas en este mismo documento.

    Sintaxis:

    < ol>

    < li >elemento 1< /li >
    < li >elemento 1< /li >
    < li >elemento 1< /li >
    Se visualizaría asi:

    1. elemento 1
    2. elemento 2
    3. elemento 3

    Pero ¿De donde salen esos números?.

    Bien, analicemos la sintaxis:

    < ol >, corresponden a las siglas de Ordened List, y abarca todas las listas numeradas que conozcamos.

    < li >, Corresponde a la etiqueta que inserta los elementos individuales de la lista, en otras palabras, es la etiqueta que hace posible el cambio de 1 a 2 de 2 a 3 y asi sucesivamente.

    OL no es una etiqueta que no requiera atributos, tiene dos atributos:

    type: para definir el tipo de numeracion a insertar, sus posibles valores son; 1, a, A, i, I. por defecto es 1.

    start, permite empezar la numeración en un rango distinto a la secuencia automatica que el codigo HTML introduce.

    ¿Como asi?

    Realicemos el siguiente ejemplo para ver como funciona:

    < ol type="1" start="1">

    < lh >Esta es mi lista de ejemplo< /lh>

    < li >Este es el primer elemento de la lista< /li>

    < li >Este es el segundo elemento de la lista< /li>

    < li >Este es el tercer elemento de la lista< /li>

    < /ol>

    El mismo se visualizaria asi:

      Esta es mi lista de ejemplo   

    1. Este es el primer elemento de la lista
    2. Este es el segundo elemento de la lista
    3. Este es el tercer elemento de la lista

    Si observas bien en el codigo, introducimos un elemento nuevo LH, LH define un encabezado de Lista, es un elemento mas de la lista solo que sin numero.

    Practica el codigo,cambia en type por letra a y A (minuscula y mayuscula), i (minuscula), I (mayuscula) y el start cambialo por cualquier numero mayor que cero (0).

    Listas desordenadas

    La sintaxis es basicamente la misma que la lista ordenada, cambian unicamente dos cosas:

    1. Las Listas desordenadas no tienen el atributo start, basicamente porque no lo necesitan, esto se debe a que, com su nombre lo indica, no requieren de un orden estricto, en Word lo conocemos como Viñetas.

    Sintaxis

    < ul type="circle" >
    < li >Primera viñeta< /li >
    < li >Segunda viñeta< /li >
    < li >Tercera viñeta< /li >
    < /ul>

    Se visualizaria asi:

    • Primera viñeta
    • Segunda viñeta
    • Tercera viñeta

    UL: Proviene de las siglas Unordened List, su atributo type podemos insertar los valores (dentro de comillas), circle y square.

    LI: Al igual que en las listas ordenadas, cada LI corresponde a un nuevo elemento de la lista.

    Listas de Definicion:

    Las usaremos cuando necesitemos introducir un glosario de Terminos, por ejemplo:

    Posicionamiento en Buscadores
    Conjunto de tecnicas SEO, para ubicar determinado dominio en las primeras posiciones de los buscadores.
    HTML
    No es un lenguaje de Programacion, sino un lenguaje de marcas, conocido tambien como lenguaje interpretado, esto quiere decir que necesita de un navegador para poder visualizar su contenido. El HTML es el lenguaje nativo de las paginas web
    Navegador
    es un Software que permite visualizar el contenido de una pagina web en la red de redes… Internet.

    dl: Son las siglas de Definition List. Esta etiqueta define el tipo de lista que se va a usar.

    dt: Es el termino del glosario que usaremos.

    dd: es la definicion propiamente dicha.

    La lista de definicion tiene la particularidad que requiere de un termino y una definicion, el termino es de obligatorio cierre, no asi la definicion que es de cierre opcional.

     

    El parrafo en HTML

    October 3rd, 2006

    En HTML la etiqueta para introducir un parrafo es < p > y su etiqueta de cierre < /p >.

     

    Cuando escribimos en el modo de Diseño en Dreamweaver en la parte del codigo por cada “enter” que presionamos de teclado, se agrega un < p >.

    Uno de los pequeños problemitas que tenemos en el block de notas a la hora de agregar contenido, es que no importa cuantas veces presionemos “Enter”, todo el texto se mostrara com un solo y unico bloque, lo que hara que perdamos por completo la estetica.

     

    Para resolver este inconveniente utilizaremos la etiqueta < br >
    , la cual colocaremos en el lugar exacto en el cual queramos insertar un salto de linea.

    Por ejemplo:

    mi nombre es Walter < br  / >mi sitio es Soluciones SEO < br / > Resido en Nicaragua.

    Se visualizaria asi:

    Mi nombre es Walter
    Mi sitio es Soluciones SEO
    Resido en Nicaragua.

    Nuestra Primera Pagina HTML

    October 2nd, 2006

    En la barra de herramientas del documento, se nos muestran 3 pestañas “Codigo, Dividir, Diseño”, ahora explicaremos cada una de ellas.

    Codigo:
    Nos muestra el Codigo de nuestra pagina web, en este modo podemos editar nuestra pagina web desde el puro codigo HTML, para ello tenemos que familiarizarnos con el lenguaje HTML.

    Dividir:
    Nos divide nuestra pantalla, de manera que nos muestra en el nivel superior (generalmente) el codigo de nuestra pagina y en el nivel inferior el Diseño o vista previa de los cambios efectuados en el codigo.

    Diseño:
    Este modo se usa cuando no queremos codificar en HTML, y funciona a manera de WYSIWYG, como un editor comun de texto al estilo Word.

    El lenguaje HTML.

    Vamos a familiarizarnos un poco con el lenguaje HTML, pero antes hay que decir que HTML no es un lenguaje de programacion sino un lenguaje de marcas, esto quiere decir que cualquier error que comentamos en la sintaxis no nos dañará la computadora en ninguna de sus partes (Software o Hardware), sino que no nos presentará el resultado final de la manera que nosotros esperabamos.

    Es cierto que no es lenguaje de Prgramacion pero tiene una sintaxis que debemos respetar a cabalidad.

    Todo lo que se encuentre dentro de los simbolos “< " y ">” se llama etiqueta, las etiquetas le indican al navegador que eso es una orden y tiene un significado para el, Ejemplo < body >.

    A continuacion la estructura basica de una pagina web:

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    < html>
    < head>
    < title>Documento sin título< / title>
    < meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    < body >
    < /body >
    < / html>

    Interfaz de Dreamweaver

    October 2nd, 2006

    En este tema conoceremos la interfaz de Dreamweaver MX 2004.

    En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo de paneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse (circulos verdes y rojos) y acoplarse o desacoplarse con otros grupos de paneles.

    Captura de pantalla de la Interfaz de Dreamweaver

    Los grupos de paneles (pueden cambiar su posicion izquierda a derecha dependiendo del espacio de trabajo que definimos a la hora de instalacion), también se pueden acoplar a la ventana de aplicación integrada (sólo en Windows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.

    El espacio mas grande de nuestra pantalla es ocupada por la pantalla de Bienvenida, la cual esta dividida en 3 columnas; la columna izquierda nues presenta una lista de los 10 documentos creados o editados más recientemente (Documentos Recientes); la columna central nos presenta las opciones de documentos que podemos crear con Dreamweaver, en estos momentos trabajaremos unicamente con documentos HTML; y por ultimo la columna derecha nos presenta opciones para crear documentos a partir de plantillas prediseñadas (no lo usaremos).

    Pantalla de bienvenida de Dreamweaver 

    Una vez que demos clic en HTML (observa la flecha en la imagen superior), tendremos nuestro documento de la siguiente manera: