domingo, 14 de marzo de 2010

HTML

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores).

Dreamweaver

Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.


Un hiperenlace (también llamado enlace, vínculo, o hipervínculo) es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Combinado con una red de datos y un protocolo de acceso, un hiperenlace permite acceder al recurso referenciado en diferentes formas, como visitarlo con un agente de navegación, mostrarlo como parte del documento referenciador o guardarlo localmente.

En la actualidad los hiperenlaces afectan al Posicionamiento en buscadores de los sitios web desde que Google insertó ésta variable en su algoritmo años atrás.

La idea de Google fue: "Un hiperenlace es un voto hacia una página, yo lo doy por que considero que dicha página es relevante para la temática, entónces los vínculos son un factor importante a la hora de rankear páginas" y desde ese momento en adelante el concepto de SEO (posicionamiento web) ha cambiado drásticamente pues el control del posicionamiento de las páginas quedó fuera

de las manos de los webmasters y se dejó en las manos de cualquier persona que considere el recurso importante.

Los hiperenlaces son parte fundamental de la arquitectura de la World Wide Web, pero el concepto no se limita al HTML o a la Web. Casi cualquier medio electrónico puede emplear alguna forma de hiperenlace.

Configuración de un sitio de Dreamweaver nuevo

Crear o editar un sitio web sin conexión a Internet

http://www.aulaclic.es/dreamweaver8/comunes/camera.gif

http://www.aulaclic.es/dreamweaver8/graficos/menu_sitio.gifUna vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....

Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio.

http://www.aulaclic.es/dreamweaver8/graficos/sitio1.gifEn el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio.


http://www.aulaclic.es/dreamweaver8/graficos/sitio2.gif

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categoría Datos locales.

Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.

Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.

Estas tres características son las imprescindibles para definir un sitio local.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Abrir un sitio web

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

http://www.aulaclic.es/dreamweaver8/graficos/desple_sitios.gifTambién podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

Formato de sitio

Elementos de formulario

Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifCampo de texto y Área de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.

También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.

A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.

Principio del formulario

Final del formulario

Principio del formulario

Final del formulario

Principio del formulario

Final del formulario

A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifBotón

Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

Principio del formulario

Final del formulario

También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector de propiedades.

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifCasilla de verificación

Es un cuadrito que se puede activar o desactivar.

Principio del formulario

Deseo recibir información

Final del formulario

Puede asignársele el Estado inicial como Activado o como Desactivado.

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifBotón de opción

Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.

Principio del formulario

Superman

Spiderman

Final del formulario

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifLista/Menú

Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.

Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.

Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.

http://www.aulaclic.es/dreamweaver8/comunes/orangeball.gifEtiqueta

Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.

martes, 19 de enero de 2010

Tarea

Browser

Un navegador o navegador web (del inglés, web browser) es un programa que permite visualizar la información que contiene una página web (ya esté esta alojada en un servidor dentro de la World Wide Web o en uno local).

El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

Navegación Off-Line

Son programas para navegar sin estar conectados a internet.

Editores: es una aplicación diseñada con el fin de facilitar la creación de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM.

Editores HTML:programas que nos pueden ayudar a la hora de construir una página web.
Los editores de HTML pueden ser de dos tipos, como veremos, unos permiten codificar las páginas utilizando el propio lenguaje HTML, a base de etiquetas y otros nos permiten diseñar una página web, como si estuviésemos escribiendo con un editor de texto avanzado, sin tener que escribir el código con las etiquetas. Esta última vertiente, que podemos llamar editores en modo diseño, presenta una facilidad adicional para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan tiempo de aprenderlo o porque se sientan incapaces de hacerlo. Los editores en modo diseño nos permiten crear la página como si estuviéramos escribiendo un documento con un editor del tipo de Word. El editor de HTML es el encargado de vérselas con el lenguaje y programar internamente la página con el código HTML, según lo que nosotros estamos diseñando.

Gestion y desarrollo de espacios web:
Atendiendo a su editor podremos distinguir:
- Webs personales, cuyo propósito suele ser difundir información recopilada por los titulares del espacio y, generalmente, dar a conocer su curriculum.
Mi sitio web
- Webs corporativos, de empresas que quieren difundir su imagen corporativa y muchas veces también ofrecer sus productos y servicios.
Editorial Santillana
- Webs institucionales, que suelen informar de sus actividades y proporcionar información y servicios del interés de determinados colectivos.
Facultad Ciencias de la Educación (UAB)
- Webs de grupos (colectivos, asociaciones…), cuyo propósito fundamental es facilitar información de interés para los miembros del grupo y ofrecerles canales de comunicación interpersonal.

Mapa de sitio
Un mapa de sitio web (o mapa de sitio o mapa web) es una lista de las páginas de un sitio web accesibles por parte de las arañas web y los usuarios. Puede ser tanto un documento en cualquier formato usado como herramienta de planificación para el diseño de una web como una página que lista las páginas de una web (ya realizada), organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los bots de los motores de búsqueda a hallar las páginas de un sitio web.
Los mapas de sitio pueden mejorar el posicionamiento en buscadores de un sitio, asegurándose que todas sus páginas puedan ser encontradas. Esto es especialmente importante si el sitio usa menús Adobe Flash o JavaScript que incluyan enlaces HTML.
También son una ayuda a la navegación por ofrecer una vista general del contenido de un sitio de un simple vistazo.
La mayoría de los motores de búsqueda sólo siguen un finito número de enlaces desde una página, por lo que si el sitio es muy grande la existencia del mapa del sitio puede ser necesaria para que tanto los motores de búsqueda como los usuarios accedan a todo el contenido del sitio.
Algunos desarrolladores afirman que índice de sitio web sería un término más apropiado, pero esta forma se usa mucho menos en español. A veces los "índices de sitio" muestran enlaces en orden alfabético hacia las páginas (o partes de ellas) de los sitios web, por lo que en estos casos pueden ser un complemento a los mapas de sitio (enfocados a las páginas de forma jerárquica, temática).