Utiliza Google desde este blog

Google En la WebEn el Blog
kostenlose uhren relojes web

martes, 31 de mayo de 2016

Taller 1 de HTML5


Indicaciones previas

HTML5 es un estándar que reune varias cosas: en primera instancia cuenta con una página web diseñada en lenguaje HTML que contendrá todo el material teórico, de imágenes, videos, enlaces, etc. que debe tener el sitio. Como segundo aspecto, cuenta con una hoja de estilos, que es un archivo aparte de código CSS que le indica a la página su apariencia física, distribución de la información, colores de texto, fondo, tamaños y tipos de fuente, entre otras muchas cosas todas relacionadas con el estilo que le queremos aplicar a la página web. Y de tercera instancia puede contener otro código aparte en JavaScript para trabajar la programación de la página y que ella responda a diferentes eventos, pero este no es material de este curso. Solo trabajaremos hasta el segundo aspecto.
 
Esta actividad es exclusivamente de comprensión lectora, por lo tanto debe leer detenidamente y "releer" si algo no le resulta claro. Obviamente, también debe tener ya claras las etiquetas de HTML básico, dominar la forma de corregir y actualizar su página web y obviamente guardar de forma correcta, como se ha explicado continuamente, teniendo en cuenta que todo lo que necesite para este taller debe estar archivado en una misma carpeta. La carpeta debe contener, al final de este taller, tres (3) archivos (una imagen, una página web y una hoja de estilos).
 
Vamos a trabajar con el código del Taller 2 del primer período (el de Formatos de texto) para iniciar con un código ya existente y no empezar desde ceros. Este código lo vamos a ir modificando con lo publicado en esta actividad para actualizardo al estándar HTML5. Recordemos que este código debe mostrar la siguiente página si lo tiene perfectamente corregido:



Por lo tanto debe descargar el archivo de la página, al igual que la imagen de este taller. Estos dos archivos deben quedar en una carpeta llamada Taller 1 HTML5. no importa cómo se llamen los archivos, lo importante es que usted los tenga bien identificados (cuál es la página y cuál es la imagen) y que al decargarlos sigan funcionando, por lo tanto descárguelo, pruébelo y corrija antes de continuar.

Conversión de la página web en HTML básico a HTML5
Las indicaciones que aquí se hacen sirve para cualquier página web, no se explican exclusivamente para el taller que usted acaba de descargar (se explica de manera general para que sirva para cualquier página que usted ha realizado hasta el momento). Por lo tanto usted debe interpretar estas indicaciones para aplicarlas a la página web descargada. Recuerde tomar los apuntes necesarios. Manos a la obra...

Estas primeras modificaciones no le hacen un cambio visible a la página web como tal, simplemente preparan la página para que pueda comprender el código de la hoja de estilos que se desarrollará más adelante.

Abrimos el archivo de la página web con el bloc de notas y realizamos la primera modificación introduciendo la siguiente etiqueta de primeras en nuestro código (antes de la etiqueta <html>):

<!doctype html>

Esta etiqueta simplemente le indica al navegador que el código allí presentado cumplirá el estándar HTML 5.



Luego debemos insertarle un atributo a la etiqueta <html>. Nunca hemos utilizado atributos en esta etiqueta, pero ahora si. Este atributo le deja claro al navegador cual es el idioma de la página web que va a mostrar. La etiqueta <html> quedará así, de ahora en adelante:


<html lang="es">

También debemos modificar <head> que es la cabecera de la página, la cual siempre ha contenido solo la etiqueta <title>. De ahora en adelante debe tener una etiqueta <meta> para indicarle al navegador que tipo de codificación se va a utilizar, de preferencia será la iso-8559-1 que acepta los acentos (tildes) y la ñ, siendo así más compatible para nosotros, y además la etiqueta <link> que enlazará la hoja de estilos que he nombrado varias veces. Por lo tanto esa cabecera quedará así de ahora en adelante:


<head>
   <title>Título de cabecera de la página</title>
   <meta charset="iso-8559-1">
   <link href="estilos.css" rel="stylesheet">
</head>

Ahora vamos a trabajar el cuerpo de la página para que podamos distribuirlo como una página web actual. Para ello observemos el siguiente esquema:

 
En el cuerpo de nuestro documento debemos agrupar las etiquetas que allí se presentan, de acuerdo con su función generar dentro de la página. Esto se realiza con otras etiquetas que sirven de contenedoras de las que ya conocemos. Hay etiquetas que serán de la cabecera de la página y vendrán encerradas entre <header>... </header>, otras que serán específicamente del pie de página y vendrán encerradas entre <footer>...</footer>, otras son exclusivas de los contenidos propios de las páginas e irán con <section>...</section> y otras serán para mostrar información que no es propiamente del contenido principal de la página, como publicidad o links a otros sitios web e iran entre <aside>...</aside>. Por lo tanto debemos organizar las etiquetas que ya se tienen en estos grupos. Comencemos con el título principal de la página. Esta etiqueta <h1> debe estar contenida dentro de una etiqueta <header>…</header> indicándole al navegador que ésta es la cabecera de documento, así:
 
<body>
<header>
   <h1>Título principal del cuerpo de mi página web</h1>
</header>
 
El contenido de la página debe estar dentro de las etiquetas <section>…<section> y si la página es del estilo de noticias, o blog, que se van publicando artículos, cada uno de estos artículo o temas tratados debe estar dentro de la etiqueta <article>…<article>, la cuales serán subsecciones de <section>, así:
 
<section>
   <article>
      <h2>Titulo del tema que se va a tratar<h2>
      <p>Primer párrafo del contenido del tema</p>
      <p>Segundo párrafo, etc. (además de imágenes, videos, etc.) todo lo que contiene este tema </p>
   </article>
</section>
 
Si no se tiene sino un solo tema debe ir como se mostró anteriormente. Si se tienen varios temas, se abrirá otro <article> para cada tema. Todos dentro del mismo <section> que solo debe haber uno.
 
Ahora vamos con algo nuevo, los espacios laterales, conocimos como SIDEBAR o barras laterales, las cuales muestran contenido secundario para la página, sitios web recomendados, propaganda, etc. Este contenido se agrupa con la etiqueta <aside>. Como en nuestra página inicial no tenemos nada de este estilo, entonces trabajaremos el siguiente código después de cerrar </section> y antes de lo que irá en <footer>:
 
<aside>
         <h3>Páginas web recomendadas</h3>
         <p>Actividades informáticas y tecnológicas - Lissyvancelis</p>
         <a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/">http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/</a>
</aside>
 
Y se finaliza con el pie de página de nuestro sitio web, que debe contener los datos de contacto, direcciones teléfonos, etc.
 
<footer>
   <p>Creado por:</p>
   <p><em>Fulano de tal</em></p>
   <p>Correo electrónico: correoA@xmail.com</p>
   <p><em>Y el otro nombre su hay otro estudiente</em></p>
   <p>Correo electrónico: correoB@xmail.com</p>
</footer>
 
Si vemos el documento completo que se acaba de explicar debería verse así aproximadamente:
 
<!DOCTYPE html>
<html>
<head>
   <title>Título de cabecera de la página</title>
   <meta charset="iso-8559-1">
   <link href="estilos.css" rel="stylesheet">
</head>

<body>
    <header>
        <h1>Título principal del cuerpo de la página web</h1>
    </header>

   <section>
      <article>
         <h2>Titulo del tema que se va a tratar<h2>
         <p>Primer párrafo del contenido del tema</p>
         <p>Segundo párrafo, etc. (además de imágenes, videos, etc.) todo lo que contiene este tema </p>
      </article>
   </section>

   <aside>
      <h3>Páginas web recomendadas</h3>
      <p>Actividades informáticas y tecnológicas - Lissyvancelis</p>
      <a href="http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/">http://tecnologiaeinformatica-lissyvancelis.blogspot.com.co/</a>
   </aside>

   <footer>
      <p>Creado por:</p>
      <p><em>Fulano de tal</em></p>
      <p>Correo electrónico: correoA@xmail.com</p>
      <p><em>Y el otro nombre su hay otro estudiente</em></p>
      <p>Correo electrónico: correoB@xmail.com</p>
   </footer></body>
</html>
 
Este es el código guía que usted como estudiante debe tener claro y disponible siempre que vaya a trabajar en otro código HTML como los de su proyecto.

Realizando estos cambios, el documento quedará listo para aceptar la hoja de estilos donde se trabajará el diseño estético de la página, el cual irá en otro documento aparte realizado también en Bloc de notas y el cual llamaremos como lo hayamos indicado en la línea <link href…> y debe guardarse con la extensión .css para indicar el tipo de documento que es. Esto lo haremos a continuación.

Creación de la hoja de estilos 

Abrimos un bloc de notas para crear esta primera hoja de estilos básica que se realizará el día de hoy, guardamos para indicar el nombre y la ruta de una vez de este documento. Este archivo debe guardarse en la carpeta que contiene el documento .html, deben quedar en la misma carpeta. Lo llamaremos directamente estilos.css.
 
Trabajaremos el tipo de fuente y el color del fondo de nuestra página con el siguiente código:
 
body {
   font-family: Georgia, serif;
   background-color: #CEF6F5;
}
 
Ctrl + G para guardar lo que se lleva de la hoja de estilos e ir a la página web y dar Ctrl + R o F5 para actualizar y observar los cambios.
 
Esta es la forma de indicar cómo se verá cada objeto, en este caso estamos modificando la etiqueta <body> del código HTML. En css no se escriben entre < y >, se escriben directamente y los atributos van dentro de una llaves y cada vez que se termina un atributo se debe colocar un punto y coma (;) para luego iniciar con el otro atributo si lo hay. En este caso se coloca un tipo de fuente para toda la página, pero si otro objeto se desea con otro tipo de letra se indica cuando se esté dando las características de ese objeto, como lo vamos a hacer con el encabezado de la página, así:
 
header {
   font-size: 3em;
   font-family: "Comic Sans MS", cursive, sans-serif;
   color: #610B21;
   background-color: #8A2908;
   text-align: center;
}
 
Observe como afectan cada uno de los atributos asignados. Debió haber cambiado el tipo de letra en el título principal. Si desea ver otros tipos de fuente puede consultar la página: CssWeb Safe Fonts dando clic en este enlace http://www.w3schools.com/cssref/css_websafe_fonts.asp
 
Ahora vamos a justificar los párrafos. Si no tiene un párrafo lo suficientemente largo, copie algún tipo de texto de unos 5 renglones en el contenido del artículo, guarde el html y vuelva al css para insertar este código:
 
p {
   text-align: justify;
}
 
Guarde y actualice cambios en la página web.
 
Póngale un color de fondo a cada una de las secciones faltantes (section, aside y footer) de su página, así:
 
section {
   background-color: #XXXXXX;
}

No se confunda :), en vez de las XXXXXX debe colocar el código del color que usted quiere. En clases pasadas les había explicado que buscando en Google con la frase Código de colores HTML salen muchas páginas que tratan de este tema, yo recomiendo la primera página que sale en esa búsqueda y que se llama: Códigos de colores HTML - Html Color Codes cuyo link es http://html-color-codes.info/codigos-de-colores-hexadecimales/.



No olvide tomar los apuntes respectivos. Guarde y entregue su trabajo para su evaluación.



martes, 24 de mayo de 2016

Boceto en Paint del plano de la empresa


Iniciamos esta actividad con una hora de clase recordando el uso de las principales herramientas de Paint, seleccionar, copiar, pegar, texto, relleno de color, transparencias, formatos de imagen, etc. Archivo guardado en la carpeta para esta actividad como Ejercicio 1 - apellido.

Trabajamos a continuación y a manera de ejemplo el boceto del aula de Informática (sala 2) de la Institución Técnico José de San Martín. Guardamos en la misma carpeta de los ejercicios anteriores con el nombre Ejercicio 2 - apellido, tanto en formato PNG como en formato JPG.

Tarea:
Esta tarea es individual. Cada estudiante generará un boceto de su empresa, según la idea que tenga de ella y teniendo en cuenta lo trabajado en esta clase. Dibujo de buena claridad, detalle y teniendo en cuenta las necesidades y los requerimientos de la empresa en cuanto a espacio, lugares, mobiliario, dispositivos, etc. Con nombres e indicaciones de acuerdo con lo explicado y haciendo un trabajo mejor y más detallado que el plano realizado en clase. 
  • Guardarlo en Google Drive, en la carpeta Segundo período y en una subcarpeta Tareas, con el nombre Plano empresa - apellido (en formato PNG y JPG). Vuelvo a aclarar que la actividad es individual y cada estudiante debe subir el archivo creado a su Google Drive.
  • Publicar el boceto del plano de la empresa en el Blog, con un título de publicación: Propuesta de plano de la empresa tal (nombre de la empresa).
  • Enviar por correo el enlace de la publicación realizada con el plano, así:
Para: informaticajdsm@gmail.com
Asunto: Plano de la empresa "tal" - Curso
En el mensaje, el nombre completo de quien realizó el trabajo, nombre de la empresa, nuevamente el curso y el link de la publicación en su blog.
Adjunto: los 2 archivos (el PNG y el JPG) creados.  

jueves, 19 de mayo de 2016

Material para la tabla de Dispositivos de Hardware en HTML

Realizar una página web utilizando lenguaje HTML y que tenga en su cuerpo una tabla con imágenes y definiciones. El título principal de la página web es: Ejercicio con tabla, imágenes y definiciones y la tabla tendrá como título: Dispositivos Hardware y debe tener cuatro columnas tituladas: Nombre (para los nombres de los dispositivos, Imagen (para insertar la imagen del dispositivo correspondiente), Definición (que contendrá la definición de cada dispositivo) y Tipo (indicando si es un "Dispositivo de entrada" o un "Dispositivo de salida").

Debajo de la tabla debe quedar un párrafo con la frase: Presentado por: y el nombre completo del (de la) estudiante y su curso.

Descargar del material de muestra en el siguiente link (puede utilizar estas imágenes y estas definiciones o buscar otras, pero las imágenes deben tener un ancho de imagen de 300 pixeles:
https://drive.google.com/open?id=0B95SiN_fVOsZOXROekJCOXByWHM


En clase se utilizó la siguiente aplicación online para cambiar el tamaño de las imágenes a un ancho de 300 pixeles:
http://www.softorbits.com/es/resize-images-online/

Comenzando con CSS

Definición: CSS, Hojas de Estilo en Cascada (Cascading Style Sheets), es es la descripción del estilo y formato que va a tener un documento, en nuestro caso, una página web.

Link del material para trabajar este taller:
https://drive.google.com/open?id=0B95SiN_fVOsZcFhtUWJrUnNYcUU


El diseño final de la página web en HTML quedará aproximadamente así, gracias al estilo asignado con CSS:


Algunos recursos recomendados:

Colores en CSS
http://librosweb.es/libro/css/capitulo_3/colores.html

Página web que presenta una lista de las fuentes seguras para web

http://www.genbetadev.com/desarrollo-web/introduccion-a-las-propiedades-de-las-fuentes-en-css3

martes, 10 de mayo de 2016

Link con imágenes en HTML



La etiqueta para trabajar los vínculos o enlaces a otros sitios web o a otros recursos, es <a>. Con el atributo href que debe ir en la etiqueta de apertura, se está solicitando la URL del recurso que se abrirá, que puede ser una imagen, un documento o una página web, por ejemplo.
El siguiente extracto de código HTML contiene dos vínculos, ambos para abrir un documento en formato de página web llamado "Memorias.html", pero la diferencia es que un link es con texto y otro dando cli sobre una imagen:

<body>
...texto...
<p>Dando clic <A href="Memorias.html">aquí</A>, puedes descargar las memorias del curso.
<p>También puede dar clic sobre el botón de descarga:
<p align=center><A href="Memorias.html"><img src="img_descarga_01.jpg"></A>
</body>

Al activar estos vínculos haciendo clic con el ratón, los usuarios pueden visitar el recurso linkeado o vinculado. Tenga en cuenta que el atributo href especifica la dirección o destino del recurso que se abrirá por medio de una URL. En este caso escribimos solo “Memorias.html” porque tenemos ese documento guardado en la misma carpeta donde se encuentra guardado el código HTML, pero si se tratara de una página web tenemos que pegar allí la URL completa, ejemplo: “http://computocurso7memorias.html”



viernes, 6 de mayo de 2016