Historial de Clases

SEMANA No.14

 

https://www.apachefriends.org/es/index.html

https://www.apachefriends.org/es/index.html
Clic en la imagen para ir a descargar.


ACTIVIDAD:

  1. Descargar el XAMPP mediante el link que se encuentra dando clic en el logo.
  2. Instalar y configurar la herramienta.
  3. Hacer en recorrido por la funcioanlidad de la herramienta.
  4. Montar el proyecto de la pagina web personal que se ha desarrollado hasta el momento en el localhost.
  5. Capturar una imagen del sitio instalado en el localhost y subirla como evidencia al DRIVE en una carpeta llamada "SEMANA 14 - Configuración XAMPP" 
  6. Crear una base de datos en phpmyadmin de la siguiente manera:
    • base de datos: reg_usuarios
    • Tabla: usuarios
    • Columnas: (id_user,cedula,nombre,apellido,email,sexo,user,pass,telefono,direccion)
Codigo para crear la tabla: 
 
CREATE TABLE `reg_usuarios`.`usuarios1` ( `id_user` INT NOT NULL AUTO_INCREMENT ,  `cedula` INT(10) NOT NULL ,  `nombre` TEXT NOT NULL ,  `apellido` TEXT NOT NULL ,  `email` VARCHAR(50) NOT NULL ,  `sexo` TEXT NOT NULL ,  `user` VARCHAR(50) NOT NULL ,  `pass` VARCHAR(50) NOT NULL ,  `telefono` INT(10) NOT NULL ,  `direccion` INT(20) NOT NULL ,    PRIMARY KEY  (`id_user`),    UNIQUE  (`cedula`),    UNIQUE  (`user`)) ENGINE = InnoDB
 
 Desarrollar el siguiente código:

APRENDIENDO A DESARROLLAR UN LOGIN/REGISTRESE EN PHP

En este recurso vas a encontrar 1 modelo para realizar una sección de LOGIN/REGISTRESE con PHP ye lo implementes en el proyecto Pagina Web Personal.
 
conexion.php  <-- Este es el nombre que debe llevar el archivo

<!DOCTYPE html>
<html>
<head>
    <title>CONEXIÓN A LA BASE DE DATOS</title>
</head>
<body>
<?php     
$conexion = mysqli_connect('localhost','root','','reg_usuarios') or die("Error al conectarse".mysqli_error($conexion));
?>
</body>
</html>

 _________________________________

login.php  <-- Este es el nombre que debe llevar el archivo

//debes crear una copia de uno de los HTML que tengas ya creados ccambiar el nombre por el indicado (login.php) y sobre escribir el <section> con este.


<section>
<center><h2>LOGIN DE USUARIOS</h2></center>
<br>
<br>
<center>
<form action="ingrese.php">
<input type="image" src="images/1.png"  name="" value="Usuarios Registrados">
</form>
<form action="registre.php">
<input type="image" src="images/2.png"  name="" value="Usuarios Nuevos">
</form>
<br>
</center>
</section>

_________________________________

ingrese.php  <-- Este es el nombre que debe llevar el archivo
 
//debes crear una copia de uno de los HTML que tengas ya creados ccambiar el nombre por el indicado (ingrese.php) y sobre escribir el <section> con este.

<section>
    
<center><h2>LOGIN DE USUARIOS REGISTRADOS</h2></center>
<br>
<br>
<center>
<form action="validar.php" method="post">
<label for="caja1"><p><h3>Nombre de Usuario</h3></p>
<p><input id="caja1" type="text" name="usuario" placeholder="Usuario" required=""></p><br><br>
</label>
<label for="caja2"><p><h3>Contraseña</h3></p>
<p><input id="caja2" type="password" name="password" placeholder="Contraseña" required=""></p><br>
<input type="submit" value="Iniciar Sección">
</label>
</form>
</center>
</section>

_________________________________

registre.php  <-- Este es el nombre que debe llevar el archivo
 
//debes crear una copia de uno de los HTML que tengas ya creados ccambiar el nombre por el indicado (registre.php) y sobre escribir el <section> con este.

<section>
    
<center><h2>REGISTRO DE USUARIOS NUEVOS</h2></center>
<br>
<br>
<center>
<form action="" method="post">
<table>
<tr><td><b>CEDULA: </b></td><td><input required type="" name="ced"><br></td></tr>
<tr><td><b>NOMBRE: </b></td><td><input type="" name="nom"><br></td></tr>
<tr><td><b>APELLIDOS: </b></td><td><input type="" name="ape"></td></tr>
<tr><td><b>E-MAIL: </b></td><td><input type="" name="ema"></td></tr>
<tr><td><b>SEXO: </b></td><td>hombre: <input checked type="radio" value="m" name="sex">
    mujer: <input type="radio" value="f" name="sex"><br></td></tr>
<tr><td><b>USUARIO: </b></td><td><input type="" name="use"></td></tr>
<tr><td><b>CONTRASEÑA: </b></td><td><input type="password" name="pas"></td></tr>
<tr><td><b>TELEFONO: </b></td><td><input type="" name="tel"></td></tr>
<tr><td><b>DIRECCIÓN: </b></td><td><input type="" name="dir"></td></tr>
</tr>
</table>
<br><br><input type="submit" name="" value="Registrarse">
</form>
</center>

<?php

    include ("conexion.php");

    if ($_POST) {

    $ced = $_POST['ced'];
    $nom = $_POST['nom'];
    $ape = $_POST['ape'];
    $ema = $_POST['ema'];
    $sex = $_POST['sex'];
    $use = $_POST['use'];
    $pas = $_POST['pas'];
    $tel = $_POST['tel'];
    $dir = $_POST['dir'];
    
    mysqli_query($conexion, "INSERT INTO usuarios(cedula,nombre,apellido,email,sexo,user,pass,telefono,direccion) VALUES ('$ced','$nom','$ape','$ema','$sex','$use','$pas','$tel','$dir')") or die ("Error al ingresar dato");
    echo "DATO GUARDADO";

    }

?>

</section>


_________________________________

Validar.php  <-- Este es el nombre que debe llevar el archivo
 
<?php  
if (isset($_POST['usuario']) and isset($_POST['password'])) {
    include('conexion.php');
    $user = $_POST['usuario'];
    $pass = $_POST['password'];
    $consulta = "SELECT * from usuarios where user='$user' and pass='$pass'";
    $resultado = mysqli_query($conexion,$consulta);
    $filas = mysqli_num_rows($resultado);   
    if ($filas>0) {
        header("location:pagina_reg/Index.html");
    }
    else {

        header("location:registre.php");
    }
}else {
    header('location: ./');
}
mysqli_close($conexion);
?>


 

____________________________________________________________


SEMANA No.11
 

Maquetación del sitio Web


 

Imagen-1

_________________________________________

Archivos HTML


 

Imagen-2

______________________________________

 

Archivo CSS

 

 

Imagen-3

______________________________________________

 

 ACTIVIDAD:

1. Realiza el ejercicio plantado en la imagenes analizando lo que ocurre y teniendo en cuenta las siguiente instrucciones:

  • El código que esta en la Imagen-2 va en un archivo llamado (index.html).
  • El código que esta en la Imagen-3 va en un archivo llamado (estilos.css).
2. Basado en los archivos html que realizaste con la información personal que recopilamos en el prediseño semi funcional y en el ejercicio propuesto en las imagenes 1,2 y 3 de esta actividad vas a aplicarle los estilos a tu proyecto de pagina personal usando el mismo principio del ejercicio anterior y teniendo en cuenta que debes crear el archivo de estilos (estilos.css) y que a todos tus archivos HTML del proyecto le debes agregar la misma linea de código que llama los estilos la cual sería como esta:
  • <link rel="stylesheet" type="text/css" href="css/estilos.css">
3. Procura que los estilos que configueres se acomoden a tu diseño personal (colores, tipos de fuente, tamaños de fuente, fondos, etc...) para lo cual deberas consultar el manual de referencia de estilos (en el siguiente enlace puedes observar 2 manuales ó si quieres puedes consultar otro de tu elección) .
4. Recuerda conservar el principio de maquetación de la imagen 1.
Nota: El resultado de los puntos 2 y 3 debes subirlo al DRIVE en la carpeta (PROYECTO).

 

 

 

 

 

EVALUACIÓN PARCIAL 2

Buen día estudiante,

Ya esta disponible la evaluación parcial 2 en linea para la materia PROGRAMACIÓN DE WEB CON NUEVAS TECNOLOGÍAS, la cual podrán activar mediante el botón (Iniciar Evaluación) que aparece a continuación. 

Para poder presentarla deberán tener una cuenta en gmail y tenerla activa (el correo abierto en otra pestaña) con el fin de que el sistema le permita realizarla.

Debe tener precaución a la hora de presentarla ya que solo podrá iniciarla 1 vez y después de iniciada solo podrá enviarla una vez y el tiempo de duración sera de 2:00 hora antes de que se cierre el sistema.  

Espero que le vaya bien en el proceso.

 Fecha máxima de desarrollo: Lunes 26 de Octubre de 2020


https://forms.gle/HyRFSosz71Q4PQwf9

En caso de que no funcione el botón copie este link en el navegador:


https://forms.gle/c5t2y7gyT9HtkQU86

 
______________________________ 
 
 
 
  SEMANA  No.10 - AUTOEVALUCIÓN DEL ESTUDIANTE HASTA LA FECHA
 
Clic en el botón para iniciar autoevaluación.


NOTA: Tenga presente que solo podrá realizarlo una vez y que debe estar logueado con su correo institucional @pascualbravo.edu.co
 
______________________________
 
EVALUACIÓN DOCENTE 


IMPORTANTE!!!

Esta valoración es solicitada por el docente de manera personal y es un material aparte a la evaluación que posteriormente registrará la Institución en su plataforma SICAU, la cual también deberá en su momento desarrollar el estudiante de manera consiente y analítica.

 

Clic en el botón para iniciar...

 
 
 
SEMANA No.8
 
 

Construcción de Blog Web personal.
 
 
llevar a cabo la TIA "Tarea: Mi portafolio". El portafolio es un recurso educativo en donde se registran las evidencias de aprendizaje. En este módulo usted podrá publicar sus evidencias de aprendizaje en un blog que deberá crear y tener por título “Portafolio Sunombre1 Suapellido1 IU Pascual Bravo”. Para saber más sobre cómo hacerlo, vea con atención el siguiente tutorial.

 
Material de Apoyo 
 
  
ACTIVIDAD:
 

La herramienta con la que podrá crear su blog se llama "Blogger"; se accede a ella a través de la URL <https://www.blogger.com> o haciendo clic aquí. 
 
  1. Desarrolla tu blog Web de clase teniendo como referencia el modelo del blog de clase en el cual estas viendo esta actividad.
  2. Ten presente que deberas hacer una pagina por cada unidad de clase y allí crear el contenio y los enlaces para visulizar las diferentes actividades desarrolladas en cada actividad.
Nota: Este ejercicio tambien lo puedes hacer en la herramienta SITIES de Google. 



 
 ___________________________________________________________________
 
 
SEMANA No.7
 
 
HTML - PRINCIPIOS BÁSICOS I


Introducción
 
La estructura mínima de un documento HTML
1. Introducción:
HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticación, puesto que no es otra cosa que el viejo formato ASCII2 (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales).

Por tanto, para que un documento HTML sea algo más que simples caracteres básicos, debe contener, además de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre los simbolos (< >). Estas etiquetas contienen todo el resto de la información de la página web.

Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede escribirse directamente desde un sencillo programa básico de texto, como el Bloc de Notas (Notepad) de Windows, por ejemplo.

Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para evitar esta dificultad, hay una serie de programas denominados comúnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o menos parecido al de un procesador de textos.

A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposición del etiquetado de un documento y manejar siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para ello:
Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas modificaciones durante el proceso de creación.

Con bastante frecuencia se hará necesario consultar el código completo, con las etiquetas HTML (lo que se suele denominar código fuente o código madre) para corregir las disfunciones.

Tal vez la mejor manera de aprender a diseñar páginas web es observar las páginas de los demás, cuyos códigos fuente están siempre disponibles para ser imitados (o incluso copiados, técnicamente, al menos). Pero, para ello, es necesario entenderlos.

Los mismos editores HTML manejan términos propios del lenguaje HTML (heading, cellspacing, etc.), que es preciso comprender.

Es necesario un buen conocimiento de HTML para insertar otros códigos más potentes, como los de Javascript, por ejemplo.

El objetivo de este documento es aprender a componer una sencilla página web desde el más básico de los programas de texto disponibles en Windows: el Bloc de Notas.

De esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas más complejas.

2. Esquema mínimo de un documento HTML:

Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje.

La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.

Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.

Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).

La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD> </HEAD>.

El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY> </BODY>.
Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM:

EJEMPLO 1
<HTML>
  <HEAD>
  </HEAD>
  <BODY>
  </BODY>
</HTML>

Ver resultado

He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y cuerpo, simplemente para facilitar su compresión gráfica, puesto que esta cuestión es totalmente indiferente. El resultado no variaría de haber colocado las etiquetas de cualquier otra manera. Por ejemplo:

EJEMPLO 1: Variantes de escritura
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

<HTML><HEAD></HEAD><BODY></BODY></HTML>

<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>

Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el comando Actualizar (o Refresh) para ver los cambios.

Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE></TITLE>. 

Nuestro página web podría quedar, por tanto, así:

EJEMPLO 2
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.
 
 ___________________________________________________________________
HTML - PRINCIPIOS BÁSICOS II


El texto básico de un documento HTML
 
  • El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.
  • Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las etiquetas correspondientes.

1.1. La etiqueta básica

  • La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.
  • <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.
  • Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE="Arial">...</FONT>.
  • Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para especificar los colores, conviene saber al menos lo siguiente:
    1. Cada color posee su correspondiente código.
    2. Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.
    3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
      1. Rojo: color:#ff0000;
      2. Verde: color:#00ff00;
      3. Azul: color:#0000ff;
    4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
      1. Rojo: color:rgb(255,0,0);
      2. Verde: color:rgb(0,255,0);
      3. Azul: color:rgb(0,0,255);
    5. Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.
    6. Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
  • Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).6
  • Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.
Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.
Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual (="arial", ="#0000FF", etc.).
Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.
  • Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta <FONT>. Por ejemplo:
EJEMPLO 3
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.
<FONT SIZE="1">Este texto es tamaño 1.</FONT>
<FONT SIZE="2">Este texto es tamaño 2.</FONT>
<FONT SIZE="4">Este texto es tamaño 4.</FONT>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>

  • Nuestra página web, tal y como está diseñada en el Ejemplo 3, no posee ninguna especificación de líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el navegador coloca todos los caracteres seguidos (sólo tiene en cuenta un único espacio entre palabras). Para corregir este problema podemos utilizar la etiqueta <BR>, que introduce un salto de línea. Nuestro página quedaría entonces así:
EJEMPLO 4
<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.<BR>
<FONT SIZE="1">Este texto es tamaño 1.</FONT><BR>
<FONT SIZE="2">Este texto es tamaño 2.</FONT><BR>
<FONT SIZE="4">Este texto es tamaño 4.</FONT><BR>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT><BR>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>

Hay otra cuestión importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta más básica, y conviene empezar a aprender por ella, pero está en desuso y desaparecerá en las versiones futuras de HTML. En su lugar, existen otras etiquetas más potentes, que iremos viendo en su momento.

1.2. Etiquetas de formato de caracteres

  • A partir de este momento, se trata simplemente de añadir más etiquetas a nuestra aún pequeña colección, de modo que vayamos teniendo cada vez más control sobre el formato de los caracteres. La tabla siguiente muestra las más comunes:
CódigoFunción
<B>...</B>Negrita
<I>...</I>Cursiva
<U>...</U>Subrayado





  • Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo:
    <FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero
    <FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.
 
 

4. Los párrafos de un documento HTML

En el apartado anterior hemos aprendido a controlar la apariencia de los caracteres. (Recuerda, de todas maneras, que la etiqueta <FONT> está en desuso.) Vamos ahora a estudiar las etiquetas fundamentales que controlan la organización de los párrafos en un texto más complejo.

  • Ya conocemos un tag que afecta a las líneas: <BR>. Si deseamos que una línea no se parta al llegar al final de la ventana del navegador, debemos colocar al comienzo la etiqueta <NOBR>, y el navegador colocará entonces un scroll o barra de desplazamiento horizonal.
  • Por supuesto, si queremos que haya más líneas, al final sí deberá aparecer <BR>.

4.1. Los párrafos y su alineamiento

  • La etiqueta <BR> inserta un salto de línea, pero no un salto de párrafo.7 En cambio, la etiqueta <P>...</P> inserta una salto de línea y una línea en blanco, por lo que, en la práctica, equivale a un nuevo párrafo.
  • Por supuesto, tanto <BR> como <P>...</P> pueden repetirse varias veces seguidas para dejar más distancia entre las líneas y los párrafos.
  • De todas maneras, sólo podemos separar los párrafos con líneas completas (una, dos, etc.), pero no podemos controlar el espacio entre los párrafos con la precisión que permite, por ejemplo, el programa Word (con las opciones de espaciado anterior y posterior).8
  • Un párrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:
CódigoFunción
<P align="left">...</P>Párrafo alineado a la izquierda  
<P align="center">...</P>  Párrafo centrado
<P align="right">...</P>Párrafo alienado a la derecha
<P align="justify">...</P>Párrafo justificado
  • Las etiquetas anteriores permiten alinear los párrafos enteros, pero siempre dejando una línea vacía delante de cada uno de ellas. ¿Hay alguna manera de alinear independientemente líneas o grupos de líneas? Sí, con las siguientes etiquetas:
CódigoFunción
<DIV align="left">...</DIV>Línea(s) alineada(s) a la izquierda  
<DIV align="center">...</DIV>  Línea(s) centrada(s)
<DIV align="right">...</DIV>Línea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV>Línea(s) alineada(s) justificadas
  • En definitiva, disponemos de varias etiquetas similares para la creación y la alineación de los párrafos, que serán más o menos apropiadas dependiendo de las ocasiones. Veamos cómo funcionan en una página web:
EJEMPLO 5
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<P align="left">Este párrafo está alineado a la izquierda. En la práctica, equivale sencillamente a la misma etiqueta sin indicación de alineación.</P>
<P align="center">Este párrafo está centrado. Hay una línea en blanco entre este párrafo y el anterior.</P>
<P>Ahora vamos a alinear tres líneas seguidas de tres maneras diferentes, pero sin dejar líneas vacías entre ellas, por medio de otras etiquetas:</P>
<DIV align="left">alineado izquierdo alineado izquierdo alineado izquierdo alineado izquierdo</DIV>
<DIV align="center">alineado centrado alineado centrado alineado centrado alineado centrado</DIV>
<DIV align="right">alineado derecho alineado derecho alineado derecho alineado derecho </DIV>
</BODY>
</HTML>
Ver resultado
  • Otra etiqueta que afecta a la alineación de los párrafos es <BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangría, derecha e izquierda. Pueden colocarse varias etiquetas seguidas para acentuar la sangría, como se observa en el siguiente ejemplo:
EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<P>Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal.</P>
<P><BLOCKQUOTE>Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha.</BLOCKQUOTE></P>
<P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE ></P>
</BODY>
</HTML>
Ver resultado

4.2. Los títulos

  • Pueden utilizarse hasta seis tipos de títulos en un documento HTML, ordenados jerárquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.
  • Las etiquetas de los títulos introducen una línea superior en blanco. Como lo habitual después de un título es un nuevo párrafo (<P>), que también introduce su propia línea, el resultado final suele ser que una línea de título tiene una línea en blanco antes y otra después.
  • Las etiquetas de los títulos admiten indicaciones de alineación, de la misma manera que la etiqueta de párrafo.
  • Veamos qué aspecto tienen los títulos de un documento HTML:
EJEMPLO 7
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>
<H5>Título 5</H5>
<H6>Título 6</H6>
<H7>Título 7 (como no existe, no supone ningún cambio)</H7>
<P>Además, los títulos pueden recibir indicaciones de alineación, como en los siguientes ejemplos</P>
<H3 align="center">Título centrado</H3>
<H3 align="right">Título a la derecha</H3>
</BODY>
</HTML>
Ver resultado
  • Este ejemplo permite plantear el siguiente ejercicio:
EJERCICIO 2
En el EJEMPLO 7 se observa que siempre queda una línea en blanco entre un título y el párrafo siguiente (el que comienza con "Además". ¿Cómo puede suprimirse dicha línea? Elimina, por ejemplo, la que hay entre el título 7 y el párrafo siguiente.
¿Sabes solucionarlo? ¿Te parece fácil? Eso quiere decir que has entendido estupendamente todo lo expuesto hasta el momento.
¿No lo has conseguido? No pasa nada, pero tal vez deberías repasar todo lo anterior con más detalle. En cualquier caso, aquí tienes la solución.

4.3. Las listas

  • Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto.
  • Los documentos HTML permiten dos tipos de listas:
    1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>.
    2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>...</OL>.
  •  
  • Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo:
    1. En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).
  • Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles. Vemos algún ejemplo:
EJEMPLO 8
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H3>Los meses de primavera</H3>
<UL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<BR>
<H3>Los meses de verano</H3>
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
<BR>
<H3>Los meses del año</H3>
<UL>
<LI>Los meses de primavera
<OL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</OL>
</LI>
<LI>Los meses de verano
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
</LI>
</UL>
<BR>


</BODY>
</HTML>
Ver resultado
  • Las listas admiten varios parámetros, que varían según el tipo de lista:
    1. Las tres listas admiten el parámetro COMPACT, que hace que el navegador presente la lista de la manera más compacta posible.
    2. El parámetro TYPE funciona con las dos primeras listas. Sus valores respectivos son, lógicamente, distintos:
      • En las no numeradas, controla el tipo de viñeta: con forma de disco (<UL type="disc">, la opción por defecto), de círculo (<UL type="circle">) y de cuadrado (<UL type="square">).
      • En las numeradas, controla el tipo de numeración: con números árabes (<OL type="1">, la opción por defecto), romanos (<OL type="I">), romanos en minúsculas (<OL type="i">), letras mayúsculas (<OL type="A">) y minúsculas (<OL type="a">).
    3. La etiqueta <OL start="n"> indica el número por el que empieza la lista numerada.
    4. En una lista numerada, se puede cambiar el número de un elemento –y consiguientemente de los posteriores– con la etiqueta <LI value="n">.

4.4. Las rayas horizontales

  • Las rayas horizontales son otro de los procedimientos habituales para separar los contenidos de un documento HTML. Se introducen simplemente con la etiqueta <HR>.
  • Hay una serie de características de las rayas que pueden controlarse, como siempre, por medio de parámetros añadidos a la etiqueta básica:
    1. El tamaño: la etiqueta <HR> introduce una raya que ocupa todo el ancho de la pantalla. Pueden especificarse distintas anchuras añadiendo el valor deseado, expresado en pixeles (<HR width="n">) o en términos porcentuales (<HR width="n%">).9
    2. La alineación: cuando una raya ocupa sólo una parte de la pantalla, puede especificarse su alineación por medio de las etiquetas habituales:
      <HR align="left">
      <HR align="center">
      <HR align="right">
    3. La altura: se expresa en píxeles por medio de la etiqueta <HR size="n">. Puede adoptar el valor 0 (la raya más fina).
    4. El color, por medio del párametro habitual: <HR color="?">.
    5. El sombreado: la raya posee habitualmente un pequeño efecto de sombreado, que puede eliminarse con la etiqueta <HR noshade>.10
  • Como siempre, lo habitual suele ser la combinación de varios parámetros en una misma etiqueta. Por ejemplo:
    <HR width="50%" size="0" align="center">
  • No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:
EJEMPLO 9
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
Ésta es una línea normal:
<HR>
Ésta es una línea normal, sin sombreado:
<HR noshade>
Ésta es una línea que ocupa la mitad de la pantalla (si no se establece la alineación, se coloca centrada por defecto):
<HR width="50%">
Ésta es más estrecha y mucho más gorda:
<HR width="10%" size="20">
Ésta es igual pero de color rojo:
<HR width="10%" size="20" color="#FF0000">
</BODY>
</HTML>
Ver resultado
volver al inicio
inicio

5. Los enlaces de un documento HTML

  • En los apartados anteriores hemos aprendido a manejar correctamente el elemento fundamental de todo documento: el texto. Sin embargo, hay otro elemento básico en un documento HTML, que le proporciona su mayor potencial: los hiperenlaces, que estudiaremos en este apartado.
  • Un hiperenlace es un vínculo que une un elemento del documento activo (por ejemplo, una palabra) con otro, de manera que activamos ese segundo elemento simplemente con un click del ratón en el primero.
  • La sintaxis general de la etiqueta es muy simple: <A HREF="destino">...</A>. (Los puntos suspensivos representan el elemento enlazado.)
  • Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: <A HREF="destino" target="_blank">...</A>
  • El destino de un hiperenlace puede ser de tres tipos:
    1. Enlace externo: otro documento HTML situado en un ordenador remoto.
    2. Enlace local: otro documento HTML situado en el mismo ordenador.
    3. Ancla: otro lugar dentro del mismo documento HTML.
  • Vamos a examinar separadamente cada uno de estos tipos.

5.1. Los enlaces externos

  • Desde cualquier punto de un documento HTML puede establecerse un enlace con cualquier recurso de Internet.
  • Como es sabido, los recursos más habituales de Internet son:
    1. La WWW, es decir, las páginas web o documentos HTML. La etiqueta correspondiente es:
      <A HREF="http://servidor/camino.../fichero">...</A>
    2. El correo electrónico. La etiqueta correspondiente es:
      <A HREF="mailto:usuario@servidor">...</A>
    3. La transferencia de ficheros (servidores FTP). La etiqueta correspondiente es:
      <A HREF="ftp://servidor/camino.../fichero">...</A>
  • Veamos algunos ejemplos:
EJEMPLO 10
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
Vamos a enlazar las palabras "pincha aquí" con algunos destinos remotos.<BR>
1.- Con la página web de la UD:<BR>
<A HREF="http://www.deusto.es" target="_blank">pincha aquí</a><BR>
2.- Con el servidor FTP de la sede de Ginebra de la OMS:<BR>
<A HREF="ftp://ftp.who.ch/" target="_blank">pincha aquí</a><BR>
3.- Con mi correo electrónico:<BR>
<A HREF="mailto:airibar@fil.deusto.es">pincha aquí</a><BR>
</BODY>
</HTML>
Ver resultado

5.2. Los enlaces locales

  • La mayor parte de las "páginas web" son, en rigor, una colección de páginas, puesto que la organización clásica de los sitios web consiste en un conjunto ordenado de documentos HTML entrelazados y residentes en un mismo ordenador.
  • Dentro de un mismo ordenador, los documentos HTML pueden residir en un mismo directorio o en varios:
    1. Cuando todos los documentos residen en el mismo directorio no hay ningún problema, y la etiqueta será, simplemente: <A HREF="fichero.htm">...</A>.
    2. Cuando los ficheros residen en diferentes directorios, hay que facilitar la dirección completa del fichero, lo que puede hacerse de manera absoluta o relativa:
      • Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestión:
        <A HREF=file:///c:/directorio/subdirectorios/fichero.htm">...</A>
      • Direccionamiento relativo: no se indican los nombres de los directorios. Por ejemplo:
        <A HREF=../../..fichero.htm">...</A>
  • Aun utilizando un direccionamiento relativo, es necesario indicar los nombres de los directorios "descendentes". Por ejemplo, en una web ordenada como en la figura siguiente, un enlace desde un documento situado en el directorio <HTML> a un recurso situado en el directorio <Imágenes> debería especificarse así:
<A HREF=../../../../Componentes/Imágenes/fichero.htm">...</A>
 Árbol de directorios

5.3. Las anclas

  • Especialmente cuando el documento es largo, conviene utilizar enlaces que apunten hacia otro lugar dentro del mismo documento. Estos enlaces se denominan anclas, anclajes o apuntadores.
  • El procedimiento de enlace es doble:
    1. En primer lugar, hay que establecer el punto de anclaje en el lugar del documento que vaya a ser el destino del enlace. Su etiqueta es <A NAME=nombre>...</A>.
    2. Después sólo queda enlazar los caracteres deseados con el ancla anterior. Su etiqueta es <A HREF=#nombre>...</A>.
  • Algunas observaciones sobre las anclas:
    1. El nombre del ancla es arbitrario, pero lo lógico es que guarde alguna relación con el destino, especialmente cuando hay muchas en un mismo documento.
    2. Aunque la etiqueta del ancla sea pareada, lo normal es que no incluya nada entre sus dos partes (<A NAME=nombre>...</A>), puesto que lo importante es marcar el punto de inicio del ancla, no su final.
  • Vamos a practicar estas etiquetas creando una nota a pie de página como las utilizadas en este documento, que implican un doble anclaje:
EJEMPLO 11
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<P>Al final de este párrafo vamos a colocar una nota a pie de página, de modo que al pinchar sobre la llamada, vamos a la nota, y al pinchar sobre el número de nota en el pie de página, volvemos a la llamada. <A NAME="llamada_1"></A><A HREF="#nota1"><SUP>1</SUP></A><BR><P>
Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla, <BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,
<HR size="0">
<A NAME="nota_1"></A><A HREF="#llamada_1"><SUP>1</SUP></A><FONT SIZE="-1">Éste es el texto de la nota. Si pinchamos sobre el número, volvemos a la llamada.</FONT>
</BODY>
</HTML>

 

 
 
ACTIVIDAD:

1. Realiza un documento HTML en el cual cumplas con los siguiente parámetros:
  • Desarrollar los 6 archivos HTML del sitio web personal con su correspondiente estructura basica.
  • Desarrollar los componentes textuales de las 6 secciones de tu pagina web personal implementando los codigos de afectación que correspondan.
  • Crear una lista no ordenada con los nombres de cada sección de tu sitio Web personal e hipervincularlos en malla completa.

 3. Por último, consulta cuáles son los códigos para insertar fondos de imagen y de color solido y el código para insertar imágenes y cuales son sus atributos e incluye a cada una de las secciones de tu sitio web personal las imagenes y fondos que correspondan como logos, banner, botónes gráficos, fotos entre otros.


NOTA: Recuerda subir al repositorio del DRIVE los archivos resultantes de los ejercicios.



 _______________________________________________
 
 
 
 
 
 SEMANA No.6
 
DISPONIBLE HASTA: Miércoles 16 de Septiembre / 11:00pm 


Buen día estudiante, 

Ya esta disponible el parcial 1 en linea para la asignatura DISEÑO WEB CON NUEVAS TECNOLOGÍAS, la cual podrán activar mediante el botón (Iniciar Evaluación) que aparece a continuación. 
Para poder presentarla deberán tener una cuenta en gmail y tenerla activa (el correo abierto en otra pestaña) con el fin de que el sistema le permita realizarla.

Debe tener precaución a la hora de presentarla ya que solo podrá iniciarla 1 vez y después de iniciada solo podrá enviarla una vez y el tiempo de duración será de 1 hora antes de que se cierre el sistema.

Espero que le vaya bien en el proceso.





En caso de que el botón no funcione puede pegar este enlace en su navegador:

https://forms.gle/qDd3YM9LKcdWzK7KA
_______________________________________________

 SEMANA No.4 Y No.5
 
ESTANDARES DE DISEÑO WEB
 


1. Peso de las Páginas

Los sitios web deben tener un peso máximo permitido por página que no supere una cantidad razonable de kilobytes (kb) que impidan su visualización. En este sentido, lo «razonable» dependerá directamente del tipo de sitio que se esté desarrollando y de la conexión con la que cuente la mayor parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas que tienen una conexión muy lenta, 50 kb será un tamaño considerable, respecto de si se compara eso con usuarios que se conecten en una ciudad del centro del país.


No obstante, se puede estudiar cuánto se demora en que una página llegue completamente al computador de un usuario si se calcula lo siguiente:


2. Diagramación de las Páginas

Aunque existen nuevas tecnologías para la diagramación de las páginas web (como las Hojas de Cascadas de Estilo o CSS), lo habitual es que los contenidos que se muestran se dispongan en tablas con el fin de que cada elemento ocupe el lugar que se le ha asignado dentro de la página.


3. Uso de Presentaciones en Flash

Si se desea hacer una presentación en tecnología Flash de Macromedia para la portada del sitio, ofrecer una portada con la identificación de la institución y dos enlaces: uno para ver la presentación y otro para ingresar directamente al sitio.


4. Uso de Marcos o «Frames»

La tecnología de marcos o «frames» consiste en agrupar varios archivos para que se desplieguen de manera simultánea, permitiendo a los usuarios ver varios contenidos al mismo tiempo.

Salvo que sea muy necesario, esta forma de organizar los sitios web debe desecharse para pasar a sitios de interfaz contenida en un solo archivo.


5. Uso de Imágenes de «background»

Una tecnología muy popular que se puso de moda en el año 1996 cuando el software Netscape Navigator lo implementó, fue el uso de imágenes como fondos o «backgrounds» de las páginas web.

Salvo casos en que sea estrictamente necesario, esta práctica debe ser dejada de lado porque su único efecto es el de agregar un paso excesivo a los sitios, afectando el tiempo de descarga y acceso a la información.


6. Uso de «meta tags» Adecuados

Los «meta tags» son marcas en lenguaje html que van en la parte superior del código fuente de cada página, a través de las cuales se entrega a los sistemas de indexación y búsqueda, la información mínima para hacer una correcta indexación del contenido que incluye.


7. Diseño para la Accesibilidad

La accesibilidad de un Sitio Web se refiere a su capacidad para presentar contenidos a personas que cuentan con discapacidades físicas, que les impiden usar la información disponible de una manera tradicional y por ello emplean ayudas técnicas.

Un ejemplo de esto son el uso de un lector de voz o un magnificador de pantalla en el caso de los discapacitados visuales, que les permiten interpretar el texto que se muestra en la pantalla.


8. Diseño de la Experiencia del Usuario

En forma paralela al desarrollo de las interfaces, todo proyecto web debe tener en cuenta la experiencia que vivirá el usuario al navegar por sus páginas. A ese concepto se le denomina «experiencia» del usuario y el objetivo siempre será el de que cada persona que visite el sitio encuentre lo que está buscando de manera simple, de tal manera que regrese al sitio y le cuente a otros sobre su contenido y funcionalidades.


9. Desarrollo de Diagrama de Interacción

Una de las metodologías más concretas para asegurar que la experiencia del usuario se está resguardando adecuadamente, es la generación los «diagramas de interacción» mediante los cuales se representan gráficamente las posibilidades de acción que tiene un usuario enfrentado a tomar una decisión en un Sitio Web.


10. Boletines de Noticias y Novedades

Cuando se empleen sistemas de suscripción a boletines de noticias o difusión de novedades, se debe dejar muy clara cuál será la política de suscripción, envío y eliminación de la base de datos de nombres.


11. Normas para Incorporar Elementos Gráficos y Multimediales

Cuando en un Sitio Web se incorporan elementos gráficos y multimediales, se deben seguir normas muy concretas para evitar que su peso afecte el desempeño de la página cuando sea solicitada por los usuarios del Sitio Web.

• Optimizar el peso de las imágenes: se debe bajar al máximo posible el peso de las imágenes; cuando esto no sea posible hacerlo por su tamaño, se debe reducir el número de colores disponibles y la resolución (72 dpi es la norma).

• Elegir el formato adecuado: ante un mismo tamaño de imagen, el peso varía dependiendo de si son procesadas para desplegarse en formato GIF respecto del formato JPG. Normalmente una imagen con colores planos (como un icono) tendrá un peso menor si se guarda en GIF respecto de si es guardada en JPG. Lo contrario ocurrirá con una imagen con muchos colores diversos (como una foto). Se recomienda probar ambos formatos para determinar el óptimo.

• Ubicación de imágenes: se recomienda usar un solo directorio para almacenar las imágenes repetidas, tales como los iconos y otros elementos gráficos que son utilizados en diferentes páginas del sitio. Al ubicarlos en un directorio único se puede aprovechar la función de caché del programa visualizador para mejorar el rendimiento de las páginas. Para efectos de seguridad, se recomienda impedir que un programa visualizador pueda ver el contenido de dicho directorio o cualquier otro dentro del sitio.
• Usar el atributo ALT en imágenes: en el código HTML se debe usar el atributo ALT (texto alterno) en las imágenes para que éste se despliegue antes que las imágenes y facilite de esta forma la comprensión del contenido a los usuarios.

• Imágenes con alto y ancho: las imágenes (dibujos, fotos, iconos, botones) deben tener tamaño para el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para dicho contenido antes de que se realice su despliegue visual.
• Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de plug-ins (programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente válido en sitios que ofrecen presentaciones de portada en tecnología Flash, las cuales deben ser anunciadas para que el usuario tenga la opción de verlas o avanzar directo al sitio.

• Indicar el peso de los archivos: cuando se ofrecen elementos gráficos o audiovisuales para que sean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash u otros), se recomienda indicar el peso de los mismos, con el objeto de ofrecerle información útil para efectuar la operación.

12. Uso de las fuentes

Cuando de diseña un sitio web, se deben procurar usar fuentes claras y genéricas con el fin de que sean fácil de leer y que cualquier navegador la pueda interpretar y mostrar bien.


_____________________________________________________

ESTANDAR DE DISTRIBUCIÓN O MAQUETACIÓN WEB
 

_______________________________________________________
 
BOCETO DEL SITIO WEB
 

 _______________________________________________________
 
ESTRUCTURA DEL SITIO WEB



Lo mas importante y la razón de ser de un sitio Web son sus contenidos, puesto que finalmente es lo que el usuario viene a buscar. Lo que va a determinar la estructura de la Web van a ser en gran medida los contenidos; ellos nos deben indicar cual de los siguientes tipos de estructura es el más adecuado:


ESTRUCTURA DE ÁRBOL


En esta estructura existe una página principal que llamaremos index desde la que se puede llegar a otras páginas de la Web. Estas otras páginas a su vez son un nodo para llegar a otro grupo de páginas. De esta manera llegaremos a tener las páginas agrupadas en niveles, de manera que para llegar desde el primero al último se deben atravesar los intermedios. 


ESTRUCTURA LINEAL


Esta forma de organizar el sitio es totalmente opuesto al anterior. Realmente no existe una página raíz o principal, lo que tenemos es una especie de lista de páginas donde cada una tiene dos vecinas: una a la izquierda y otra a la derecha, excepto las páginas de los extremos. 



JERARQUÍA MIXTA


Esta estructura aprovecha las ventajas de las dos anteriores. Las páginas están jerarquizadas en niveles, pero dentro de cada nivel se organizan como listas, de forma que podemos recorrer todas las páginas de un mismo nivel sin sin tener que salir de él. 



MALLA COMPLETA


Las páginas del sitio también pueden estar totalmente interconectadas, es decir, desde cada página podemos ir a cualquier otra del sitio. Realmente la interconexión de absolutamente todas las páginas sería un caso extremo. 

  

¿Que estructura escoger?

Dependerá del sitio, pero esto tampoco quiere decir que tengas que elegir una de estas. Es muy probable que tu sitio presente una mezcla de estas estructuras. Una regla de oro: procura que un visitante nunca esté a más de cuatro click de la página a la que quiera llegar.

ACTIVIDAD PRACTICA:
  1. Define en que estructura se desarrollara tu sitio.
  2. Elabora el mapa de navegación de tu sitio WEB.



MAPA DE NAVEGACIÓN DEL SITIO WEB

 
 
 ________________________________________________________
 
ACTIVIDAD
 
TALLER: 
 
EDITOR DE PAGINA WEB

PREDISEÑO DEL SITIO WEB PERSONAL
 
El producto a desarrollar en el siguiente taller es un diseño base del proyecto (Página Web Personal), en donde al final nos quede un pequeño sitio de 6 páginas o secciones con el contenido base y limpio para en próximas clases hacer la integración HTML y CSS.
 
El proyecto estará dividido en las siguientes 6 secciones:

|BIENVENIDO| |INFORMACIÓN PERSONAL| |PORTAFOLIO| |CONTÁCTO| |HOJA DE VIDA| |ZONA DE INTERÉS|

 
ACTIVIDAD PRACTICA:
 
  1. Hacer un boceto a lápiz de las 6 vistas que corresponden al diseño de tu Sitio Web Personal teniendo en cuenta las secciones definidas por el docente 
  2. Descargar el archivo de Power Point dando clic en el botón que está mas abajo en el cual encontraras una muestra de un boceto construido en Power Point.
  3. Realiza un modelo semifuncional o mockup de tu sitio web teniendo en cuenta los estandares Web y de distribución o maquetación; en el cual cada sección de la pagina web corresponde a una diapositiva o una pagina como se ve en el ejemplo para descargar que se encuentra mas abajo y desarrolla el menu implementando la herramienta de hipervinculación interna de Power Point.
  4. Tambien puedes realizar dicho proceso desarrollando el diseño en https://mockflow.com/ o en el maquetador de tu preferencia
  5. Teniendo en cuenta las diferentes estructuras de los sitios Web que se definen a continuación, selecciona el estructura que  deseas implmentar en tu sitio Web personal y diseña el mapa de navegación que tendrá tu sitio.


Descarga la presentación de Power Point en tu computador .


Clic para abrir y descargar.
 
 
 ________________________________________________________
 
 
SEMANA No.2 Y No.3

 




 

ACTIVIDAD:

 
Según asignación temática del profesor preparar una exposición corta utilizando herramientas TIC (Power Point, Prezzi u otro software para exposiciones) que contenga 5 diapositivas así: 
 
  • Diap1: Portada
  • Diap2-Introducción y Objetivos  
  • Diap3/4-Desarrollo del Tema  
  • Diap5-Conclusión y Bibliografía 
 
Importante: Procura trabajar un buen diseño gráfico. 

Asignación de temas a consultar y exponer:


  1. ANGEL ABRIL JOSE DAVID - HOSTING WEB

  2. CALLE ZARATE JULIO CESAR - DOMINIO WEB

  3. DUQUE YEPES ANDERSON - ESTANDARES DE DISEÑO WEB

  4. GUARIN MONTOYA CARLOS MIGUEL - HTML5

  5. HIGUITA MARTINEZ SEBASTIAN - XML

  6. KAMSTEEG RODIÑO JEFFRY - IDE DE DESARROLLO WEB

  7. MARTINEZ GOMEZ HERNAN DARIO - CMS

  8. MEJIA MARIN DIEGO ALBERTO - CSS

  9. MERCADO LOZANO JONATH MANUEL - WORDPRESS

  10. PARRA GIRALDO JUAN DAVID - PHP

  11. TABARES PEREZ LUIS MATEO - FILEZILLA

  12. TAMAYO CALLE DIEGO HORACIO - XAMPP

  13. VIDAL JARAMILLO BRANDON STIVEN - W3C

No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)