Por último, el atributo readonly permite que el
usuario pueda ver los contenidos del cuadro de texto pero no
pueda modificarlos y el atributo disabled deshabilita un cuadro
de texto de forma que el usuario no pueda modificarlo y
además, el navegador no envía sus datos al
servidor.
7.3.2. Cuadro de
contraseña
La única diferencia entre este control y el
cuadro de texto normal es que el texto que el usuario escribe en
un cuadro de contraseña no se ve en la pantalla. En su
lugar, los navegadores ocultan el texto utilizando asteriscos o
círculos, por lo que es ideal para escribir
contraseñas y otros datos sensibles.
Y el código necesario
seria:
7.3.3. Checkbox
Los checkbox o "casillas de
verificación" son controles de formulario que
permiten al usuario seleccionar y deseleccionar opciones
individualmente. Aunque en ocasiones se muestran varios checkbox
juntos, cada uno de ellos es completamente independiente del
resto. Por este motivo, se utilizan cuando el usuario puede
activar y desactivar varias opciones relacionadas pero no
excluyentes.
Y para este ejemplo el código
es:
El valor del atributo type para estos controles de
formulario es checkbox. Como se muestra en el ejemplo anterior,
el texto que se encuentra al lado de cada checkbox no se
puede establecer mediante ningún atributo, por lo que es
necesario añadirlo manualmente fuera del control del
formulario.
El valor del atributo value, junto con el valor del
atributo name, es la información que llega alservidor
cuando el usuario envía el formulario.
Si se quiere mostrar un checkbox seleccionado
por defecto, se utiliza el atributo checked. Si el valor del
atributo es checked, el checkbox se muestra
seleccionado. En cualquier otro caso, el checkbox
permanece sin seleccionar. Aunque resulta redundante que el
nombre y el valor del atributo sean idénticos, es
obligatorio indicarlo de esta forma porque los atributos en XHTML
no pueden tener valores vacíos:
7.3.4. Radiobutton
Los controles de tipo radiobutton son similares a los
controles de tipo checkbox, solo con la diferencia de que este en
este tipo de control solo se puede elegir una sola opción
de varias, así cuando seleccionas una opción la
otra de deselecciona automáticamente.
El código necesario para el ejemplo
es:
El valor del atributo type para estos controles de
formulario es radio. El atributo name se emplea para indicar los
radiobutton que están relacionados. Por lo tanto, cuando
varios radiobutton tienen el mismo valor en su atributo
name, el navegador sabe que están relacionados y puede
deseleccionar una opción del grupo de radiobutton
cuando se seleccione otra opción.
7.3.5. Botón de envío de
formulario
La mayoría de los formularios cuentan con un
botón para envía los datos introducidos por e
usuario:
El valor del atributo type para este control de
formulario es submit. El navegador se encarga de enviar
automáticamente los datos cuando el usuario pincha sobre
este tipo de botón. El valor del atributo value es el
texto que muestra el botón. Si no se establece el atributo
value, el navegador muestra el texto predefinido Enviar
consulta.
7.3.6. Botón de reseteo del
formulario
El uso de este es muy reducido actualmente,
ya que al seleccionar este botón todos los datos
ingresados por el usuario en el formulario se resetean y vuelve a
su estado inicial.
El código necesario para el ejemplo
es:
El valor del atributo type para este control de
formulario es reset. Cuando el usuario pulsa este botón,
el navegador borra toda la información introducida y
muestra el formulario en su estado original. Si el formulario no
contenía originalmente ningún valor, el
botón de reset lo vuelve a mostrar vacío. si el
formulario contenía información, el botón
reset vuelve a mostrar la misma información
original.
7.3.7. Ficheros adjuntos.
Los formularios también permiten adjuntar
archivos para subirlos al servidor. Aunque desde el punto de
vista de HTML y del navegador no existe ninguna limitación
sobre el número, tipo o tamaño total de los
archivos que se pueden adjuntar, todos los servidores
añaden restricciones por motivos de seguridad.
El código necesario para el ejemplo
es:
Fichero adjunto
El valor del atributo type para este control de
formulario es file. El navegador se encarga de mostrar un cuadro
de texto donde aparece el nombre del archivo seleccionado y un
botón que permite navegar por los directorios y archivos
del ordenador del usuario.
7.3.8. Campos ocultos
Los campos ocultos se emplean para añadir
información oculta en el formulario:
El código necesario para el ejemplo
es:
El valor del atributo type para este control de
formulario es hidden. Los campos ocultos no se muestran por
pantalla, de forma que el usuario desconoce que el formulario los
incluye.
Normalmente los campos ocultos se utilizan para incluir
información que necesita el servidor pero que no es
necesario o no es posible que la establezca el
usuario.
7.3.9. Botón
El valor del atributo type para este control de
formulario es button. Si pruebas a pulsar un botón de este
tipo, verás que el navegador no hace nada: no envía
los datos al servidor y no borra los datos introducidos. Este
tipo de botones sólo son útiles si se utilizan
junto con el lenguaje de programación JavaScript. Si la
página incluye código JavaScript, los botones de
este tipo se pueden programar para que realicen cualquier tarea
compleja cuando se pulsa sobre ellos.
TERCERA PARTE
Datos Importantes
CAPITULO VIII
Otras Etiquetas
Importantes
8.1. Comentarios.
Al igual que la mayoría de lenguajes de marcado,
HTML perite incluir comentarios dentro de su código para
añadir información que no se debe mostrar en
pantalla.
Normalmente, los diseñadores y programadores
incluyen comentarios para marcar el comienzo y el final de las
secciones de las páginas, para incluir avisos y notas para
otros diseñadores o para incluir explicaciones sobre la
forma en la que se ha creado el código HTML.
La sintaxis de los comentarios es la
siguiente:
Y asi es como sale la información en
pantalla, como podemos ver los comentarios no se ven en
pantalla.
Los comentarios de HTML pueden ocupar tantas
líneas como sea necesario. Sin embargo, los comentarios no
se pueden anidar, es decir, no se puede incluir un comentario
dentro de otro comentario.
8.2. JavaScript.
Sin embargo, algunos navegadores no disponen de soporte
completo de JavaScript, otros navegadores permiten bloquearlo
parcialmente e incluso algunos usuarios bloquean completamente el
uso de JavaScript porque creen que así navegan de forma
más segura.
En el siguiente ejemplo tenemos las diferencias entre
tener el JavaScript activado y deshabilitado.
Imagen de www.netvibes.com con JavaScript
activado
Imagen de www.netvibes.com con JavaScript
deshabilitado
8.3. CSS.
Algunos de los atributos más utilizados en la
creación de páginas web son id, class y style. Los
tres atributos están muy relacionados con CSS, sobre todo
class y style.
El atributo id se emplea para asignar un identificador
único a cada elemento de la página, lo que es
útil tanto para aplicar estilos CSS a ese elemento como
para programar aplicaciones con JavaScript.
Por otra parte, el atributo class se emplea para definir
la clase CSS que se aplica a un elemento. La clase CSS es el
nombre de un conjunto de estilos que se definen en la hoja de
estilos y que se quieren aplicar a un elemento:
El párrafo del ejemplo anterior se muestra por
pantalla con el aspecto definido por el conjunto de estilos
llamado resumen y que se define en la hoja de estilos CSS
enlazada por la página web.
El atributo style se emplea para definir estilos CSS
directamente sobre los elementos HTML, tal y como se muestra en
el siguiente ejemplo:
8.4. Iframes.
Aunque su uso no es muy común, la etiqueta
puede ser muy útil en determinadas
ocasiones, ya que permite insertar un documento HTML dentro de
otro documento HTML. Un iframe puede considerarse como un
agujero que se abre en una página web y a
través del cual se muestra otra página web.
En ocasiones se utiliza para mostrar contenidos externos
al sitio web como si fueran parte del mismo sitio. Otra veces se
emplea para incluir una aplicación común a varios
sitios web de una misma empresa.
La página principal de Google Analytics
emplea un para incluir en un pequeño
recuadro la página correspondiente a la validación
de usuario.
El siguiente ejemplo define la altura y anchura del
iframe, indica la URL que se debe mostrar y mediante el atributo
scrolling se indica que el iframe no debe mostrar barras de
scroll ni siquiera en el caso de que el contenido
mostrado no quepa en el iframe definido:
8.5. Otras etiquetas.
El siguiente ejemplo sencillo muestra directamente el
nombre, dirección y teléfono de contacto de una
empresa:
El código necesario para el ejemplo
anterior es:
CAPITULO IX
Accesibilidad
El principal objetivo de la accesibilidad web es el de
permitir a cualquier usuario, independientemente del tipo de
discapacidad que sufra, el acceso a los contenidos del sitio y
permitirle la navegación necesaria para realizar las
acciones deseadas.
Los sitios web accesibles no solamente facilitan el
acceso de sus contenidos a los usuarios discapacitados, sino que
también permiten ofrecer la misma funcionalidad con
dispositivos muy limitados (dispositivos sin pantalla o con
pantallas minúsculas, dispositivos sin teclado ni
ratón, etc.).
Las cuatro principales ventajas de diseñar un
sitio web completamente accesible son las siguientes:
Los sitios accesibles separan completamente
diseño y contenido.Un sitio accesible puede ser accedido por multitud
de dispositivos diferentes sin necesidad de reescribir el
código HTML.Los sitios accesibles son los únicos con una
audiencia potencial global, ya que permiten el acceso a todos
los usuarios y a todos los dispositivos.Generalmente, los sitios accesibles son más
fáciles de utilizar también para los usuarios
sin discapacidades.
La creación de sitios accesibles puede realizarse
siguiendo las recomendaciones establecidas por el W3C y que se
recogen en el documento WCAG (Web Content Accessibility
Guidelines)
Las recomendaciones del WCAG 1.0 están formadas
por 65 requisitos que un sitio web debe cumplir para considerarse
accesible. Los requerimientos se agrupan en
prioridades.
Los requisitos de prioridad 1 son de obligado
cumplimiento, los de prioridad 2 son recomendables y los de
prioridad 3 son deseables. Si un sitio web cumple con todos los
requisitos de prioridad 1, se considera que el sitio es conforme
al nivel A de accesibilidad.
El nivel AA de accesibilidad está
reservado para los sitios que cumplan todos los requisitos de
prioridad 1 y prioridad 2. Finalmente, los sitios que cumplen los
65 requisitos, son conformes al nivel AAA de
accesibilidad.
9.1. Requisitos del nivel A de
accesibilidad
Los requisitos de accesibilidad que exige
el nivel A son los siguientes:
9.1.1. Generales.
Proporcionar un texto alternativo para todas las
imágenes, objetos y otros elementos no textuales
(mediante los atributos alt y longdesc).Asegurar que toda la información que utilice
el color como elemento informativo pueda ser entendida por
las personas o dispositivos que no pueden distinguir los
colores.Marcar claramente (mediante los atributos lang y
xml:lang) las variaciones del idioma del texto o de los
elementos textuales () respecto del idioma principal de la página.
El documento debe poder leerse completamente
cuando no se utilicen hojas de estilos.La información equivalente para los
contenidos dinámicos debe adaptarse a los cambios de
los contenidos dinámicos.Ningún elemento debe parpadear en la
pantalla.El contenido del sitio se debe escribir con un
lenguaje sencillo y limpio.
9.1.2. Si se utilizan mapas de
imagen.
Proporcionar un enlace textual por cada una de
las regiones del mapa de imagen.Utilizar mapas de imagen en el cliente, en vez
de mapas de imagen de servidor.
9.1.3. Si se utilizan tablas.
Utilizar cabeceras de fila y de
columna.Si la tabla tiene varios niveles de cabeceras,
utilizar las agrupaciones disponibles (, ).
9.1.4. Si se utilizan
frames.
Indicar un título a cada
frame para su identificación y facilitar la
navegación.
9.1.5. Si se utilizan applets y
scripts
Asegurar que la página
también se pueda utilizar cuando no se ejecutan los
applets y los scripts. Si no es posible, proporcionar
informaciones equivalente o páginas alternativas que
sean accesibles.
9.1.6. Si se utilizan contenidos multimedia
(audio y vídeo)
Incluir una descripción textual
del contenido multimedia.Para los contenidos basados en
vídeo o animaciones, sincronizar las alternativas
textuales con la
presentación.
CUARTA
PARTE
Revisión de los
Contenidos HTML
CAPITULO
X
Validación
La validación es el proceso que
asegura que un documento escrito en un determinado lenguaje (por
ejemplo XHTML) cumple con las normas y restricciones de ese
lenguaje. Las normas y restricciones de los documentos escritos
en XML (y en sus lenguajes derivados, como XHTML) se definen en
el DTD o Document Type Definition
("Definición del Tipo de
Documento").
El concepto de validación es objeto
de controversia en el ámbito del diseño web. Por
una parte, la validación no es obligatoria y las
páginas web se pueden ver bien sin que sean
válidas. Por otra parte, una página válida
es más correcta que otra página que no lo sea, ya
que cumple con las normas y restricciones impuestas por
XHTML.
Devido a esta controversia una parte de los
diseñadores consideran que se da demasiada importancia a
la validación de paginas y la creación de paginas
web validas. El resto de diseñadores argumentan que si la
especificación de XHTML impone una serie de normas y
restricciones, lo más correcto es que las páginas
web las cumplan, aunque no sea
obligatorio.
En cualquier caso, el proceso de
validación consiste en probar página a
página si su código HTML pasa la prueba de
validación. Los validadores son las herramientas que se
utilizan para validar cada página. Algunos editores de
páginas web incluyen sus propios validadores y el
organismo W3C ha creado una herramienta gratuita para la
validación de las páginas.
10.1. Validación con
Dreamweaver.
Si utilizas Dreamweaver para crear las
páginas web, el validador se encuentra integrado en la
propia herramienta. En primer lugar, accede a la
configuración de la herramienta de validación desde
la opción
En esta ventana de configuración se
puede elegir el DTD que se utiliza en caso de que la
página web no indique el DTD que utiliza. Las
páginas declaran el DTD que utilizan mediante el doctype,
tal y como se explicó en capítulos anteriores. Una
vez seleccionado el DTD por defecto (en la imagen anterior, se ha
elegido el DTD de XHTML 1.0 de transición), se puede
acceder a la herramienta de validación de Dreamweaver
desde el icono que se muestra en la siguiente
imagen:
Si no se han producido errores al validar la
página, Dreamweaver lo indica mediante un mensaje que
declara a la página como válida. Si se produce
algún error, la página no es válida y
Dreamweaver muestra la lista de todos los errores encontrados
junto con sus posibles soluciones:
Después de corregir todos los
errores, se puede pasar otra vez la prueba de validación
para comprobar que la página cumple con todas las
restricciones que impone el tipo de doctype que
utiliza.
10.2. Validador del
W3C
La validación de las páginas
web no requiere el uso de editores avanzados como Dreamweaver, ya
que el organismo W3C ha creado una herramienta que se puede
utilizar gratuitamente a través de Internet:
http://validator.w3.org/
Aunque la herramienta sólo
está disponible en inglés, su uso es muy
intuitivo:
Validate by URI, permite escribir la URL
de la página que se quiere validar. Esta opción
es la más sencilla para validar las páginas que
ya están publicadas en
Internet.Validate by File Upload, muestra un
formulario mediante el que se puede subir el archivo HTML
correspondiente a la página que se quiere validar.
Esta opción es la mejor para validar las
páginas web que has desarrollado y que aún no
has publicado en Internet.Validate by Direct Input, permite
validar código HTML de forma directa. Se trata de la
opción más rápida para validar
trozos o páginas HTML completas. Esta
opción es la mejor cuando estás desarrollando
las páginas y quieres asegurarte que el código
sea válido.
La siguiente imagen muestra el resultado de
la validación de la página principal de Google
realizada mediante la opción Validate by
URI:
Si la página no pasa correctamente la
prueba de validación, se muestra el listado completo de
fallos junto con la ayuda necesaria para resolver cada uno de los
errores.
Como se observa en la imagen anterior,
incluso una página tan sencilla como la portada de Google
contiene decenas de errores que impiden considerarla
válida. Por lo tanto, la página principal de Google
no es una página válida, aunque eso no impide que
se vea bien en todos los navegadores y que los usuarios la
consideren correcta.
10.3. Otros
validadores
Además de los validadores disponibles
en herramientas como Dreamweaver y de los validadores gratuitos
disponibles en Internet, existe otro método de
validación sencillo, gratuito y muy rápido. La
única limitación de este validador es que
necesariamente se debe utilizar el navegador
Firefox.
Si ya dispones del navegador Firefox, puedes
instalar el validador mediante un complemento llamado HTML
Validator. La instalación se realiza como cualquier otro
complemento, aunque en este caso la descarga dura un poco
más de lo normal porque ocupa más de 2
MB.
Tras su instalación, la primera vez
que se reinicia Firefox se muestra la siguiente
ventana:
En la ventana que se muestra se solicita al
usuario que configure el tipo de validación que se va a
realizar. Las opciones para elegir son: HTML Tidy (que ofrece
ayuda para resolver los errores y es mejor para HTML), SGML
Parser (ofrece menos ayuda, pero es el mismo que el validador del
W3C) o Serial (que realiza las dos validaciones de forma
seguida).
Si no sabes cual elegir, la opción
Serial es una buena alternativa, ya que primero realiza la
validación SGML Parser y a continuación, si no se
han producido errores, realiza la validación HTML
Tidy.
Una vez configurado el validador, abre
cualquier página web y verás cómo en la
esquina inferior derecha de Firefox se muestra un pequeño
icono que indica si la página es válida o no.
Cuando la página no es válida, aparece un icono
correspondiente a un error. Si colocas el puntero del
ratón sobre el icono, se muestra la información
específica sobre los errores
encontrados:
Si pulsas dos veces sobre el icono, aparece
una nueva ventana en la que se muestra la lista completa de
errores, el lugar exacto en el que se han producido y las
posibles soluciones para corregirlos.
Para ver directamente el número de
errores de la página, puedes pulsar el botón
derecho del ratón sobre el icono del validador y
seleccionar la opción Show y después Icon and Text.
Después de activar esta opción, cada vez que
cargues una página web se muestra toda la
información de validación.
Aunque existen muchos otros validadores, el
uso de Firefox junto con Html Validator es la única
alternativa que permite validar las páginas web sin
esfuerzo. Abriendo cualquier página en el navegador
Firefox, es posible visualizar al instante si la página es
válida o no y el número de errores que se han
encontrado.
Conclusiones
1. Sin HTML no existiría el
Internet que hoy conocemos, si no se hubiera inventado,
seguiríamos con el aburrido FTP (Protocolo de
Transferencia de Ficheros) mandándonos o bajando archivos
que a veces ni sabíamos lo que eran, sin tener la
posibilidad de visualizarlo antes. Ahora por medio de una
página llena de colores y botones por la cual se puede
navegar, se puede tener acceso a bastante información y
archivos.
El lenguaje de HTML abrió una puerta
al mundo permitiéndoles a las personas expresar sus ideas
por medio de páginas y mostrárselas a todas las
personas de todos los países.
2. Con el HTML se logró un gran
movimiento económico ya que muchísimas empresas
publican, venden, y ofrecen sus productos, sus servicios y sus
ofertas atrayendo a mayor cantidad de personas. También
gracias al HTML nacieron muchas empresas que ofrecen diversos
servicios como Yahoo, Altavista, HotMail, Terra, Yupi,
Mercadolibre, De Remate, etc.
Infinitas son las posibilidades que te
brindan las páginas WEB ya que no solo te dan la Infinitas
son las posibilidades que te brindan las páginas WEB ya
que no solo te dan la auto por Internet, solo basta con llenar un
formulario con los datos personales y el número de tarjeta
de crédito y en ocho días lo tenemos en nuestra
casa.
Y además los pasos y maneras que
existen para crear una página web lo hacen algo muy
fácil de realizar y de usar para fines
cualesquiera.
3. Si bien HTML no es el único
lenguaje de programación, pero es el más
fácil de usar y de aprender no solo por los programadores
sino también por la gente común que desea compartir
alguna información con el resto del
planeta.
4. Para publicar una página web no es
necesario que los programadores o cualquier otra persona tenga
que pasar por una revisión, pero existen maneras de
hacerlo ya que no siempre los códigos HTML que uno utiliza
están bien y de acuerdo a las normas HTML y XHTML. Y a
veces es difícil entender para otra persona que quiera ver
el código de una determinada página que no paso por
una revisión previa. Pero a esto existen diversas formas y
maneras de hacerlo tales como las que nos brinda Dreamweaver o
W3C y muchos otros validadores que nos brindan este servicio
gratuitamente.
Todo el universo de Internet se
lo debemos al HTML, ya que todas las páginas con las que
se compone la World Wide Web están hechas con el lenguaje
de programación HTML.
Bibliografía
Eguíluz, J.
Introducción a
XHTML.Consejería de
Trabajo Consumo y Política Social Secretaría
Sectorial de Acción Social Dirección General de
Familia y Servicios Sectoriales. Diseño de
Páginas web Accesibles. Murcia: Industrias
Gráficas LIBECROM.Hurtado, F. (1999).
Diseño de Páginas Web Mas allá de
los tags… Madrid: Universidad de
Murcia.
Autor:
Johan Braulio Condori
Pérez
Puno –
Perú
2011
UNIVERSIDAD NACONAL DEL
ALTIPLANO
FACULTAD: INGENIERIA MECANICA
ELECTRICA, ELECTRONICA Y SISTEMAS
ESCUELA PROFECIONAL: INGENIERIA
DE
SISTEMAS
 Página anterior | Volver al principio del trabajo | Página siguiente  |