Lenguajes de Marcas

domingo, 9 de octubre de 2011

Práctica puntuable para la evaluación: Realización de un sitio web completo

Hola a todos

A continuación, expongo las características del trabajo que cada grupo o desarrollador tendrá que realizar en la creación del sitio web que se entregará en la semana del 17 al 21 de octubre, el segundo día de clase que tengamos:

- El trabajo puede ser individual, en cuyo caso, la nota corresponderá entera al desarrollador del sitio

- El trabajo puede ser en equipo, en cuyo caso deberá indicarse, en la página web, cuál ha sido el papel realizado por cada miembro del equipo: Diseñador, implementador de código, creador de páginas 1 y 3, etc. En todo caso, tiene que quedar muy claro, explícitamente, cuál es el papel de cada persona en el desarrollo del proyecto

- El sitio web tendrá un mínimo de cinco páginas, para desarrolladores en solitario y de diez para equipos. El tema en esta ocasión, es libre

- El sitio deberá ser navegable, es decir, deberíamos saber en todo momento dónde nos encontramos, y cómo alcanzar, bien la página de índice, bien la página siguiente o la anterior. Conseguir esto por medio de flechas, indicaciones y/o metáforas será tenido en cuenta a la hora de evaluar

- El sitio deberá tener imágenes obligatoriamente, así como formularios y sería interesante que se usasen tablas, bien para maquetar, bien para mostrarlas. En general, deberá hacerse uso de todo lo visto hasta ahora en clase, incluyendo listas, imágenes, vínculos y formateo del texto

- La evaluación de este sitio web seguirá los siguientes parámetros:

- Diseño: Las páginas deberían tener todas un mismo aspecto, reconocible y unas tipografías acordes en

todas ellas, así como una maquetación cuidada. Debería haber texto suficiente como para poder juzgar todos estos elementos. El peso de este apartado será del 30% de la nota

- Claridad en el código: Uso de comentarios donde sea necesario y uso de indentación para poder seguir la

anidación de las etiquetas. El peso de este apartado será el 20% de la nota

- Funcionalidad / Navegabilidad/ Ausencia de enlaces rotos/ Uso de todo el contenido del lenguaje de marcas HTML visto hasta ahora. El peso de este apartado será el 50% de la nota

Saludos,

Alfredo de la Presa Cruz

domingo, 2 de octubre de 2011

Profundizando en el trabajo con Formularios

Realiza el siguiente formulario:

EL siguiente código es para realizarlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Encuesta al profesorado</title>
<style>

</style>

</head>

<body>
<h1>¡Por favor! Si es usted docente responda a las siguientes cuestiones<br />
</h1>

<input type="text" name="inactivo" size="100" value="Este formulario se visualizará mejor con navegadores de la última generación" disabled readonly>

<form action="mailto:alsastre@redestb.es" method="post" enctype="text/plain">

<input type="hidden" name="tipo" value="Docentes" /><FIELDSET>
<LEGEND ACCESKEY="1">
1. Información personal</LEGEND>
<label for="aa">Apellidos: </label><INPUT NAME = "Apellidos" type="text" size="30" id="aa" tabindex="1" /><label for = "nombre"> Nombre: </label><input type="text" name="Nombre" size="20" id = "nombre" tabindex="2" /><br />
<label for = "fn"> Fecha de nacimiento: </label><input type="text" name="nacido" size = "8" id = "fn" tabindex="3" /><label>Sexo: </label><input type = "radio" value="Masculino" tabindex="4" name="sexo" />Hombre
<input type="radio" value="Femenino" tabindex="5" name="sexo" />Mujer</FIELDSET>

<fieldset>
<legend acceskey="2">2. Información de contacto</legend>
<label for = "telefono">Teléfono</label><input name="Telefono" size="10" maxlength="10" id="telefono" tabindex="6">
<label for = "email" >Email : </label><input type="text" name="email" size="15" id="email" tabindex="7">
</fieldset>

<fieldset>
<legend accesskey="3">3. Datos profesionales</legend>
<label for="ct">Centro de trabajo</label><input type="text name="Centro" size = "30" id="ct" tabindex = "12"><label for = "localidad">Localidad</LABEL><input type="text" name = "localidad" size="30" id ="localidad" tabindex="13"> <br/>

<label for="esfun">¿Es funcionario? </label><input type="checkbox" name="Funcionario" value="ON" id="esfun" tabindex="14"><label for="nrp">NRP: </label><input type="password" name="NRP" size="15" tabindex="15"><label for="sn">Seminario/Nivel:</label>

<select name="Seminario" size="2 id="sn" multiple tabindex="16">
<option>Lengua y literatura</option>
<option>Matemáticas</option>
<option>Geografía e Historia</option>
<option>Biología y geología</option>
<option>Tecnología</option>
<option>Física y Química</option>
<option>Educación Plástica y Visual </option>
<option>Música</option>
<option>Educación Física</option>
<option>Cultura y Lenguas clásicas</option>
<option selected>Ética y Filosofía</option>
<option>Primer ciclo ESO</option>
<option>Segundo ciclo ESO</option>
<option selected>Bachillerato</option>
</select>
</fieldset>

<fieldset>
<LEGEND accesskey="4">4. Por favor, facilítenos la siguiente información: </LEGEND>
<label for = "Vias">¿Cómo llegó hasta aquí?</label>

<SELECT NAME="Vias" id="Vias" size="1" tabindex="17">
<option value="azar">Al azar</option>
<option value="URI">AAlguien le indicó el URI de la página</option>
<option value="Buscador">A través de un programa buscador</option>
<option value="Enlace"> Mediante un enlace desde otra página</option>
</SELECT>

<p />
<label for="comentarios">Introduzca aquí sus comentarios </label><br />
<textarea name="comentarios" rows="5" cols="60" id="comentarios"tabindex="18"></textarea>
<blockquote>
<label>¿Desearía más información sobre...?</label><br />
<input type="checkbox" name="opcion" value="audio" checked tabindex="19">
Material audiovisual <br />

<input type="checkbox" name="opcion" value="etext" checked tabindex="20">
Libros electrónicos <br />

<input type="checkbox" name="opcion" value="libros" tabindex="21">
libros de texto <br />

<input type="checkbox" name="opcion" value="diseños" tabindex="22">
Diseños curriculares <br />

<input type="checkbox" name="opcion" value="Leyes" tabindex="23">
Legislación educativa <p />
</blockquote>
</fieldset>

<BUTTON name="submit" value="submit" type="submit" accesskey="e" tabindex="25">
[E]nviar daros  </BUTTON>

<Button name="Reset" type="reset" accesskey="b" tabindex="26">[B]orrar los datos introducidos</Button>
</form>

</body>
</html>

Comprueba que realmente funciona, y que no se visualiza igual en los distintos navegadores.

Saludos,

Alfredo

12 nuevos ejercicios de formularios en HTML

Hola a todos
Aquí incluyo los ejercicios relativos a formularios en HTML que realizaremos esta semana

1. Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.

2. Confeccionar un formulario que solicite el ingreso de mail de una persona y luego pida el ingreso de su clave dos veces (recordar inicializar la propiedad name del elemento input con distintos nombres para cada control)

3. Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.

4. Confeccionar un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este último dato a ingresar un elemento de tipo textarea.

5. Confeccionar un formulario que permita ingresar el nombre de una persona, su mail, su dni (documento nacional de identidad) y finalmente su curriculum (este último dato hacerlo utilizando un textarea)

6. Implementar un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programación que conoce.

7. Confeccione un formulario que solicite el ingreso de un mail, una clave y luego muestre una serie de títulos de películas con su respectivo checkbox. Disponer también del botón de tipo submit para el envío de datos al servidor.

8. Solicitar el ingreso del nombre de una persona y el máximo nivel en estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios de educación superior)
Ulitilzar controles de tipo radio para la selección de estudios realizados.

9. Confeccionar un formulario que solicite cual sistema operativo utiliza más (linux o window)

10. Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde vive, este último elemento mediante un control de tipo select permitir seleccionar el pais. (Agregue la propiedad size al elemento select con el valor 5)

11. Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita votar el sitio. Mediante un cuadro de selección el visitante puede elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.

12. Confeccionar un cuadro de selección múltiple para elegir colores de una lista. Permitir la selección de varios colores.

Saludos,
Alfredo

sábado, 24 de septiembre de 2011

11 Ejercicios más de HTML

Hola a todos

1. Confeccionar una tabla que muestre los nombres de paises en una columna y su cantidad de habitantes en otra. Disponer un título de los datos que representa la tabla (Uso de la etiqueta caption)

2. Confeccionar una tabla que muestre en la primer columna los nombre de distintos empleados de una compañía y el la segunda el sueldo bruto (la compañía tiene 4 empleados) Disponer en la tabla un título representativo.

3. Confeccionar una tabla que muestre la facturación de los últimos tres meses de los artículos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturación de los últimos tres meses'.

4. Confeccionar dos páginas que inicialicen el elemento title. Disponer un hipervínculo en cada página.

5. Confeccionar una página que muestre en el elemento title el nombre de dominio del sitio.

6. Confeccionar una página HTML. Definir el elemento title y los metadatos para indicar autor, palabras claves para buscadores, descripción de la página y copyright.(Estudiamos para ello el uso de las etiquetas Meta, a continuación): un elemento que no se visualiza es el meta, que tiene por objetivo especificar información sobre el propio documento.

Veamos las dos propiedades fundamentales de la marca meta y los valores más comunes con lo que podemos inicializarlos:

Name almacena el nombre de la propiedad y content el valor de la propiedad.

No existe ninguna especificación de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.)

Veamos las propiedades y valores más comunes

Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la propiedad content las distintas palabras claves más representativas para dicha página. Esto es muy útil para posicionar nuestra página según el contenido que provee.

Veamos otras inicializaciones del elemento meta:

es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar

los estándares del W3C">

En este caso especificamos una descripción de la página, pudiendo ser del sitio si se trata de la página principal.

7. Confeccionar una página que contenga una tabla. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador.

8. Confeccionar un página que muestre dos tablas. Luego comentar la segunda y ver el resultado.

9. Hacer una página web que explique la sintaxis de dos o tres etiquetas de HTML incluyendo las mismas entre los símbolos menor y mayor

10. Confeccionar un formulario que contenga un cuadro de texto donde el visitante debe ingresar su nombre y un botón de tipo submit para el envío de los datos ingresados al servidor (tener en cuenta que la página que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php

11. Confeccionar un formulario que solicite el ingreso del nombre de una persona y su edad. Luego llamar a la página "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botón de tipo submit para el envío de los datos.

Saludos,

Alfredo

Profundizando en el uso de las tablas

Hola a todos
Aquí incrusto un código para profundizar en el uso de las marcas, en concreto, <thead><tbody>,<tfoot> y <th>

<table border ="1">
<thead>
<tr>
<th>Vendedor</th>
<th>Ganancias</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>340</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Álvarez</td>
<td>210</td>
</tr>
<tr>
<td>Pérez</td>
<td>130</td>
</tr>
</tbody>
</table>

Saludos,

Alfredo

Listas anidadas

Hola a todos
Incrusto aquí código como ejemplo para la realización de listas anidadas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de uso de definiciones</title>
</head>
<body>
<ul>
<li>Marco geográfico</li>
<li>Política</li>
<li>Economía</li>
<li>Sociedad</li>
<li>Cultura
<ul>
<li>Arte</li>
<li>Pensamiento</li>
<li>Ciencia</li>
<ul>
<li>Ciencias Formales
<ul>
<li>Matemáticas</li>
<li>Lógica</li>
</ul>
</li>
<li>Ciencias de la Naturaleza</li>
<li>Ciencias Humanas</li>
</ul>
</li>
</ul>
</li>
<li>Vida cotidiana</li>
</ul>

</body>
</html>

Saludos,
Alfredo

Profundizando en los atributos de la etiqueta <img>

Hola a todos
A continuación incrusto un documento htmlque nos ayudará a practicar los atributos de la etiqueta <img>

<html>

<head>

<title>Alineación de Imágenes</title>

</head>

<body>

<p>
<img src=”Tecla.png” width =”100” height=”100” alt=”Ejemplo de alineación”
align=”bottom”> Si utiliza <strong> align</strong> con el valor
<em>bottom, </em>la parte inferior de la imagen debe alinearse
verticalmente con la línea base del texto. Es el valor por defecto.<p>

<p><img src=”Tecla.png” width=”100” alt=”Ejemplo de alineación”
align=”middle”>  Si utiliza <strong>align</strong> con el valor
<em>middle</em>el centro de la imagen debe alinearse verticalmente con
la línea base del texto. </p>

<p><img src =”Tecla.png” width=!00 height=”100” alt =”Ejemplo de
alineación” align=”top”>Si utiliza <strong>align</strong> con el valor
<em>top</em>, la parte superior de la imagen debe alinearse verticalmente
con la parte superior de la línea de texto.</p>

</body>

</html>