__________________________________________

SEMANA 9

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

Clic en la imagen para ir a descargar.

ACTIVIDAD:

Descargar el XAMPP mediante el link que se encuentra dando clic en el logo.
Instalar y configurar la herramienta.
Hacer en recorrido por la funcioanlidad de la herramienta.
Montar el proyecto de la pagina web personal que se ha desarrollado hasta el momento en el localhost.
Capturar una imagen del sitio instaldo en el localhost y subirla como evidencia al DRIVE en una carpeta llamada "SEMANA 9 - Configuración XAMPP"

__________________________________________

RECESO DE SEMANA SANTA

__________________________________________-

SEMANA 8

IMAGEN VISUAL DEL SITIO | Imagen-1

HTML | Imagen-2

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) y se ubica en una carpeta llamada (Taller_3)
El código que esta en la Imagen-3 va en un archivo llamado (estilos.css) y este archivo va en una carpeta al lado del archivo (index.html) llamada CSS dentro de la misma carpeta (Taller_3).
Todo lo anterior deberas subirlo al DRIVE en una carpeta llamada (CLASE No.8 - TALLER 3 - HTML) dentro de una subcarpeta llamada (Taller_3).

2. Vas a intentar aplicarle 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) .

Nota: El resultado de los puntos 2 y 3 debes subirlo al DRIVE en la carpeta (PROYECTO) pero en una subcarpeta llamada (CLASE No.8 - TALLER 3 - HTML)

____________________________________

SEMANA 7

HTML - PRINCIPIOS BÁSICOS II

El texto básico de un documento HTML

1. 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 .
es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre y . 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): ....
Se puede especificar el color de la fuente con la etiqueta .... 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: ..., ..., etc.
Se puede especificar el tamaño de la fuente con la etiqueta .... 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).⁶
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: ....

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 . 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.

Este texto es tamaño 1.

Este texto es tamaño 2.

Este texto es tamaño 4.

Este texto es tamaño +1 (que es lo mismo que tamaño 4).

Este texto posee varias especificaciones de formato.

</BODY>

</HTML>

Ver resultado

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 , 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.

Este texto es tamaño 1.

Este texto es tamaño 2.

Este texto es tamaño 4.

Este texto es tamaño +1 (que es lo mismo que tamaño 4).

Este texto posee varias especificaciones de formato.

</BODY>

</HTML>

Ver resultado

Hay otra cuestión importante que debe saberse sobre la etiqueta : 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ódigo	Función
<B>...</B>	Negrita
<I>...</I>	Cursiva
<U>...</U>	Subrayado
<SUB>...</SUB>	Subíndice
<SUP>...</SUP>	Superíndice

Hay que realizar algunos comentarios sobre las etiquetas precedentes:
1. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones de configuración del navegador: ....
2. Existe otra etiqueta similar a , menos utilizada porque depende de las opciones de configuración del navegador: ....
3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se utiliza convencionalmente para indicar los hiperenlaces, y podría por tanto resultar confuso para el usuario.
Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo:
... es correcto, pero
... es incorrecto.

1.3. Otras etiquetas de caracteres

Hay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias más, que deben manejarse con cierta precaución:
1. La etiqueta <PRE>...</PRE> indica que el texto afectado está preformateado, de modo que el navegador sí tiene en cuenta todos los espacios y saltos de línea definidos en la pantalla.
2. La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Sólo funciona con Netscape.
3. La etiqueta <S>...</S> genera texto tachado.
4. La etiqueta <TT>...</TT> genera texto similar al de una máquina de escribir (fuente courier de paso fijo).
5. La etiqueta <BIG>...</BIG> aumenta el tamaño de letra (equivale a ).
6. La etiqueta ... disminuye el tamaño de letra (equivale a ).

ACTIVIDAD:

1. Realiza un documento HTML en el cual cumplas con los siguiente parámetros:

Titulo de la barra de títulos: Ejercicio practico 1
Titulo del documento: en Tamaño 16
Escribir un texto de 10 lineas que aplique intercaladamente la negrilla, la cursiva y el subrayado
Escribe otro texto de 20 lineas donde apliques de manera lógica cada uno de los código aprendidos en esta clase.

2. Implementa en cada uno de los documentos HTML hechos en el Taller No.1, los códigos de texto básico visto en esta clase, haciéndolo a criterio para que se vea bien presentada la información de cada pagina.

3. Por último, consulta cuál es el código para insertar imágenes y cuales son sus atributos y realiza un ejemplo en HTML diseñando un collage de imágenes implementando los diferentes atributos. Ejemplo: Un collage de marcas comerciales.

NOTA: Recuerda subir al DRIVE los archivos resultantes de los ejercicios (2 en total). Los archivos de los puntos 1 y 3 van en una carpeta llamada CLASE No.7. - TALLER 2 - HTML, cada uno en una sub-carpeta llama EJERCICIO1 Y EJERCICIO3; y los archivos del punto 2 van dentro de la carpeta PROYECTO en una subcarpeta con el mismo nombre de la clase también CLASE No.7. - TALLER 2 - HTML

_____________________________________________________

SEMANA 6

EXPLICACIÓN TALLER No.1:

El producto a desarrollar en el siguiente taller es un diseño base de los documentos HTML con estructura básica, maquetación básica y contenidos textuales referentes al proyecto (Página 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 del estilos CSS.

El proyecto estará dividido en las siguientes 6 secciones:

ACTIVIDAD:

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: ver (imagen-01)

Si ya realizo el boceto de la página web personal en alguna de las clases anteriores; por favor escanearlo y crear una carpeta en el DRIVE que te compartió el profesor llamada (Proyecto_Web_No1) y subirlo.

2. Realiza un 1er documento HTML con estructura básica y maquetación básica, tal como se muestra: ver (imagen-02).

3. Guardarlo con el nombre (index.html).

4. Editar el contenido textual del documento referente al proyecto (Página Personal) según la información que corresponda a la página de bienvenida: ver (imagen-03).

Recuerda comentar el código como se muestra en el ejemplo:

<!—Así se comenta en html-->

5. Multiplica el archivo (Index.html) las veces que sea necesario para utilizarlo como plantilla de las otras 5 secciones o páginas del sitio: ver (imagen-04).

6. Renombra los archivos multiplicados teniendo en cuenta el nombre que asignaste a cada enlace en el desarrollo de la estructura básica. ver (imagen-05).

7. Edita la información del sitio personal según corresponda a cada sección, teniendo en cuenta que aquello que escribimos de nosotros en la sección de bienvenida (Index.html) es diferente a los que escribimos en cada una de las otras secciones (Información personal, portafolio, contacto, hoja de vida, interés).

8. Verificar que cuando damos clic en cada enlace, nos lleve convenientemente a la sección indicada, en caso contrario revisar la sintaxis de los enlaces para hallar errores.

9. Finalmente deberá verse en el navegado algo como esto pero con tu información personal bien detallada encada sección según corresponda y al dar clic a los enlaces me debe pasar de una sección a otra mostrándome un contenido plano, solo texto y sin ningún otro componente html adicional: ver (imagen-06).

10. Subir los 6 archivos desarrollados a la misma carpeta del DRIVE (Proyecto_Web_No1).

11. No olvides hacer tu participación en el foro de discusión del BLOG.

Nota: Si tienes alguna duda por favor escribirla al correo: oscare8ar@gmail.com

TODO ESTA EN EL PDF AQUI...

imagen-01

imagen-02

imagen-03

imagen-04

imagen-05

imagen-06

_______________________________________________

DISPONIBLE HASTA: Miércoles 11 de Marzo / 6: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/QU273qgMfv8D2CZR8

SEMANA 4 Y 5

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.

_____________________________________________________

_______________________________________________________

CONECTANDO LAS PAGINAS

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:

Define en que estructura se desarrollara tu sitio.
Elabora el mapa de navegación de tu sitio WEB.

MAPA DE NAVEGACIÓN DEL SITIO WEB

____________________________________________________________

EDITOR DE PAGINA WEB

ACTIVIDAD PRACTICA:

Realizar en Power Point el boceto de una pagina web teniendo en cuenta el ejemplo ofrecido por el docente en el archivo adjunto.

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.
Tambien puedes realizar dicho proceso desarrollando el diseño en https://mockflow.com/ o en el maquetador de tu preferencia
Realiza un modelo de tu sitio web en el cual cada sección de la pagina web corresponde a una diapositiva o una pagina como se ve en el ejemplo.

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

Clic para abrir y descargar.

________________________________________________________________________

SEMANA 1, 2 Y 3

1. Tomar atenta nota de la tabla de los contenidos del semestre trazabilizardos con las semanas disponibles. (Fechas Importantes)

2. 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í: 1-Portada, 2-Introducción y Objetivos, 3 y 4-Desarrollo del Tema, 5-Conclusión y Bibliografía). Procura trabajar un buen diseño gráfico.

Asignación de temas a consultar y exponer:

ARREDONDO GARCIA CRISTIAN FELIPE - Hosting Web

BARRERA ARBOLEDA JONATHAN ANDRES - Dominio Web

BENITEZ QUIROZ OLGA MARCELA - Estandares de diseño Web

HERRERA ARBELAEZ WILSON STIVEN - HTML5

LOAIZA VANEGAS DAVID ESNEIDER - XLM

MARTINEZ GIL LUIS MIGUEL - HTTP

MORENO SERNA ADRIAN - CMS

OSPINA FRANCO DANIEL - CSS

Bienvenidos

Historial de Clases

__________________________________________

__________________________________________

RECESO DE SEMANA SANTA

1. El texto básico de un documento HTML

1.1. La etiqueta básica

1.2. Etiquetas de formato de caracteres

1.3. Otras etiquetas de caracteres

No hay comentarios:

Publicar un comentario