Trabajos Prácticos 2do. Trimestre

1.3. PROGRAMACION BÁSICA EN HTML


Introducción al HTML. Estructura de una página. Elementos. Etiquetas básicas. Formato. Texto. Caracteres Especiales. Enlaces. Imágenes. Listas. Tablas. Frames. Formularios. Multimedia. Capas. Diseño Web. Hojas de Estilo. Sección Head. Meta Etiquetas. Dirección URL. Scripts. Atributos. Eventos. Páginas web dinámicas.Servidor Web. https://www.madewithcode.com/ 

TUTORIAL 1- TUTORIAL 2-TUTORIAL 3

LEER ESTE TUTORIAL PARA LA EVALUACIÓN
¿Qué es HTML?
· HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".
· HTML es el lenguaje que te permite describir y dar forma a tús páginas Web.
· Publica tus propias páginas con fotos, listas, tablas, etc.
· Obtén información de los visitantes de tu sitio.
· Diseña los formularios que te permitirán contactar tus futuros clientes.
· Crea un sitio para vender tús productos o servicios.
· Incluye video clips, música, sonidos, y otras aplicaciones que darán vida a tús páginas Web
HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.1

El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final. Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier navegador web actualizado.

 ¿Qué conocimientos previos debes poseer?
Para estudiar HTML no se requiere de conocimientos previos en programación. Es muy simple de aprender ya que no es un lenguaje de programación sino que es un lenguaje de marcas.
  • Los archivos HTML
  • Los archivos HTML deben tener una extensión htm o html (ej. misitio.htm o misitio.html).
  • Para crear un archivo HTML solo hace falta un editor de texto.
  • Un archivo HTML está compuesto por etiquetas.
  • Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la página Web. 
  • * <html> --> Indica al navegador que abre un archivo HTML.
  • <head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.
  • <title>Mi primera página Web</title> --> Título de la página.</head> --> Cierre de la cabecera del documento.
  • <body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.Hola a todos. --> Texto que va a ser mostrado por el navegador/body> --> Cierre del cuerpo del documento.</html> --> Cierre del archivo HTML

* La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
* Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.
* Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".

Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/"antes del nombre.


Formato básico del texto

HTML nos permite definir el formato de visualización del texto en la pantalla.Muy útil para cuando queramos resaltar o enfatizar un texto en especial.También muy usado para subrayar o escribir subíndices o superíndices. Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos. Para ello utilizamos las siguientes etiquetas

TRABAJO PRÁCTICO Nº12
1.HTML BASIC I  (Realiza todas las actividades de este enlace)

 DESPUES DE SEGUIR LAS ACTIVIDADES DE HTML BASIC I, REALIZA LAS SIGTES. TAREAS

  • Copia y pega en el bloc de notas los sigtes ejercicios 
  • Guarda el archivo como "ejercicio.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML) en la carpeta Documentos. 
  • Ahora debes ir a la carpeta Documentos y haz doble clic en ejercicio1.html". El navegador mostrará la página recién creada. 
EJERCICIO 1

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body>
Hola a todos.
</body>
</html>

EJERCICIO 2

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>.
</body>
</html>

EJERCICIO 3

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>.
<h1>Título de tamaño h1</h1>
<h2>Título de tamaño h2</h2>
<h3>Título de tamaño h3</h3>
<h4>Título de tamaño h4</h4>
<h5>Título de tamaño h5</h5>
<h6>Título de tamaño h6</h6>
<hr>
<p>Este es el primer párrafo.</p>
<p>Y este es el segundo párrafo.</p>
Esto es <br> un salto de lí<br>nea.
</body>
</html>

EJERCICIO 4

<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="red">
<b>Texto en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
</body>
</html>

EJERCICIO 5

1 Descarga de internet una imagen cualquiera para utilizarla como fondo de la página .
2. Guardala con el nombre fondo.jpg en tu carpeta de trabajo.
3 Colocar la imagen descargada como fondo de tu página. Añadir background="fondo.jpg" delante del símbolo > de cierre de la etiqueta body.

<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body background="fondo.jpg">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>
4. Guarda los cambios como EJERCICIO 5 y comprueba el funcionamiento con tu navegador ...qué sucede?

EJERCICIO 6 - Marquesina

<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>

EJERCICIO 7

Diseña el código html para mostrar la sigte página:





<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
<h1>SEXTO Año</h1>
<hr>
<bl>
<bl>
<p align="center">
<em>
Somos un grupo de alumnos de Sexto año del Colegio San Patricio
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
</blockquote>
</blockquote>
</body>
</html> 


EJERCICIO 8 - insertar un enlace

Diseña el código html para mostrar la sigte página:



 <html>

<head>

<title>INFORMATICA 20166</title>

</head>

<body bgcolor="#FFCC99">

<basefont color="#003333" size="60">

<h1> Sexto Año </h1>

<hr>

<bl>

<bl>

<p align="left">

<em>

Somos un grupo de alumnos de Sexto año del Colegio San Patricio

<br>

Desde esta página intentaremos aprender HTML

</em>

</p>

<a href="http://Sexto-2016.blogspot.com//">Blog de clase</a>

</blockquote>

</blockquote>

</body>
</html>



EJERCICIO 9 - insertar una imagen



Agregar

<img src="logo.jpg" alt="San PAtricio">

Recuerda que la imagen logo.jpg debe estar guardada en la misma carpeta que está guardada la página html.

EJERCICIO 10 - aplicar link a una imagen




<p align="left">
<a href="http://sexto-2016.blogspot.com.ar"><img src="logo.jpg" alt="San Patricio">
....

EJERCICIO 11 -insertar logo con ancho y alto determinado y con un borde

...
<img src="logo.jpg" alt="San Patricio" width="322" height="485" border="8">
..

                                    TRABAJO PRÁCTICO Nº13

2.HTML BASIC II
EJERCICIO 12 - lista ordenada Y DESORDENADA

LISTA ORDENADA

....
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>

LISTA DESORDENADA

<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>

LISTAS DE DEFINICIÒN

<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azúcar</dd>

</dl>
...


EJERCICIO 13

Escribe el código que muestre la sigte. página




EJERCICIO 14

Escribe el código que muestre la sigte. página


EJERCICIO 15

Escribe el código que muestre la sigte. página



EJERCICIO 16

Escribe el código que muestre la sigte. página





EJERCICIO 17 - cambiar color tamaño y tipo de letra , insertar una imagen con ancho alto y borde
<html>
<head>
<title>INFORMATICA 2016</title>
</head>
<body bgcolor="#FFCC99">
<h1> Sexto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Sexto año del Colegio San Patricio
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<font FACE="ARIAL" color="red" SIZE="30">Este texto está en rojo</font>
<img src="logo.jpg" alt="San Patricio" width="622" height="485" border="8">
</body>
</html>



3.HTML BASIC III O http://www.virtualnauta.com/html-enlaces

DESCARGAR EL SOFT MICROSOFT WEB EXPRESSION 4
----------------------------------------------------------------------------------

2.1. LA DEEP WEB: La Internet profunda
Origen. Tamaño. Denominacion. Rastreando la web profunda. Métodos de profundización. Las arañas (Web crawler). Tor. Bitcoin. Recursos de la internet profunda. Kit de supervivencia en la "deep web" : Deep web, darknet y una aclaración habitual. ¿Cómo accedo a la deep web?. ¿Tor es siempre así de lento? ¿Es normal que no carguen muchas páginas? Enlaces .onion. La jerga de la deep web. ¿Cómo puede funcionar un mercado negro en Internet¿Cómo puedo evitar las estafas?. Entrar a la deep web y no ver nada Una semana en la deep web. Mitos y realidades

TRABAJO PRÁCTICO Nº14


1. ¿Qué es La DeepWeb?

2. Explica los Mitos y realidades

3. ¿Qué podemos encontrar en la Deep Web?

4. ¡Cómo se accede a la DeepWeb?

5. Investiga cuál es El “peligro” de navegar por la Deep Web

6. Explica a qué se refiere con "Grandes cantidades de información disponible en la Deepweb.

7. Inserta imágenes de la. DeepWeb

8. Enumera las recomendaciones a tener en cuenta para navegar en la Deep Web.


9. Crear en youtube una Presentación de diapositivas de fotos, un Hangouts en directo de Google+, un album de fotos y un video cuyo tema central sea la Deepweb.

Fuente de información:
* http://www.welivesecurity.com/la-es/2014/09/05/mitos-realidades-deep-web/
* http://blog.desdelinux.net/la-deep-web-un-lugar-profundo-lleno-de-cosas-que-quieres-y-no-quieres-ver/

 Trabajo Práctico 15

1. Inserta un texto cualquiera en un archivo nuevo de Word, con tres párrafos y tres títulos.
2. Quítale el formato a todo el texto.
3. Quita el formato de hipervínculo a los enlaces.
4. Aplica formato a un párrafo: alineación justificada, sangría de primera línea, interlineado espaciado en un párrafo, bordes, viñetas, escribir al vuelo (hace doble clic en el medio de la hoja y verás que el cursor queda centrado), insertar una tabla de contenidos, aplicar efecto de texto a un párrafo, configurar la página.
5. Insertar una portada, con formato.
6. Inserta 1 imagen de la gaceta, recortarla y aplicarle estilo de imagen y efectos de imagen ajustar brillo, Contraste, sombra, borde, posición. Elimina el fondo a la imagen.
7. Inserta un encabezado de página con una imagen en el encabezado y número de página en el pie de pagina.
8. Modifica la imagen para que se muestre de gran tamaño en el medio de la hoja . 
9. Aplica Efectos artísticas y cambia la corrección y el color.
10. Inserta un cuadro de texto con y sin formato.
11. Inserta un archivo en tu hoja actual.
12. Inserta un salto de página entre un párrafo y otro.
13. Realiza la Captura del escritorio de tu pc desde Word.
14. Modifica la posición de las imágenes con respecto al texto.
16. Coloca una imagen detrás del texto, otra en el medio y delante.
17. Crea una tabla de 3 * 3 y escribe una palabra, por celda, con diferente alineación cada una
18. Inserta una ecuación matemática.
19. Reemplaza una palabra del texto por otra.
20. Insertar una cita bibliográfica.
21. Inserta una tabla de contenidos. Luego inserta una nueva hoja con una imagen de Internet y actualiza la tabla de contenidos
22. Inserta tres notas al pie.
23. Inserta un texto en tres columnas
24. Oculta el  número de página en la primera página.
25. Configura el número d epágina para que empiece en 0
26. Crea un carta combinando correspondencia
27. Copia el sigte. texto en una hoja nueva del documento activo. Convierte la  tabla en texto utilizando el bóton Convertir Texto en la pestaña Presentación del Word:
Curso de Word 2013 gratis con ejercicios, videotutoriales y evaluaciones, con explicaciones sencillas y de calidad.

aulaClic. Curso de Word 2013. Índice del curso

 Cómo utilizar este curso.



























28. Crea un poster o folleto en canva.com
29. Consejos para crear CV. http://aulacm.com/escribir-curriculum-vitae-cv/ 
Plantillas de CV http://t.co/xuAhPfau1m. Ejemplos en Pinterest
* Plantillas gratis  para descargar
 http://www.buzzfeed.com/mallorymcinnis/hurry-hurry-hurry-get-your-resume-templates-here#.plyAaB66V.
* Más plantillas https://www.behance.net/gallery/21971739/Free-Resume-Template 



2.2. REALIDAD AUMENTADA:

 TRABAJO PRÁCTICO Nº16: 

En una entrada nueva en Wordpress pega la sigte información:
  1. ¿Qué es la RA? 
  2. ¿Qué es la VR?
  3. Investiga los cascos virtuales que se vienen en 2016.
  4. ¿Cuáles son los tipos de RA? 
  5. ¿Cuàles son los programas y aplicaciones que permiten la creación de una Realidad Aumentada propia?. 
  6. ¿Qué necesitamos para crear RA? 
  7. Descarga el Programa Aumentaty Author y Aumentaty Viewer. Pruébalo 
  8. Descarga la aplicación LandscapAR que permite crear islas y territorios dibujando sencillos mapas topográficos. 
  9.  Prueba en tu móvil, la sigte aplicación http://colarapp.com/. Sube el dibujo creado en tu celu al tumblr.
  10. Descarga la aplicación Blippar en tu celular. Escanea las figuras del sigte. enlace para ver lo que sucede en tu móvil: https://blippar.com/en/
    8. Descarga Googlegogles y pruébala en tu celular

Fuente:

http://www.costadigital.cl/newsite/index.php/investigacion/realidad-aumentada/22-costadigital/noticias/242

3.1. CÓDIGO QR -

TRABAJO PRÁCTICO Nº17 

 1. Crea el código QR del enunciado del TP 4 utilizando el sitio http://qrcode.kaywa.com/. Luego inserta el código en tu tumblr.
2. Ahora Piensa en un proyecto escolar utilizando código QR . Por ej. implementar una actividad para los actos escolares, un libro, un poster, etc. Los afiches virtuales deberán mostrar imágenes, textos, enlaces, videos, etc.
3. Utiliza el sitio https://www.unitaglive.com/qrcode para crear un QR con un sitio web móvil sobre el tema que desees.
4. Crea en http://www.visualead.com/ códigos qr educativos con formato y que puedan ser aplicados en el colegio.
5. Prueba qrvoice (type your text, select your language and the code is generated) y crea un código QR. Súbelo a tu wp
6. Prueba en tu móvil, la sigte aplicación QUIVER. Sube el dibujo creado en tu celu al tumblr.
7. Descarga la aplicación Blippar en tu celular. Escanea las figuras del sigte. enlace para ver lo que sucede en tu móvil: https://blippar.com/en/
8. Descarga Googlegogles y pruébala en tu celular
9. Descarga la app Landscap AR y pruébala en tu celular


No hay comentarios:

Publicar un comentario

Suscribirse a: Entradas (Atom)