Mostrando entradas con la etiqueta 9.- HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta 9.- HTML. Mostrar todas las entradas

2.- SISTEMAS DE COMUNICACIÓN

                Existen multitud de definiciones de sistema esta es una de ellas,


Un sistema es un grupo de objetos que pueden interactuar armónicamente y
que se combinan para lograr un determinado objetivo. Un sistema puede, a la vez, ser
una parte (subsistema) de un sistema mayor. Puede establecerse una jerarquía completa
de sistemas, cada una con su dominio definido .


                 Pero está claro que cuando hablamos de telecomunicaciones, nos podremos referir al telégrafo, el teléfono, la radio o la televisión. Aunque ahora con Internet podríamos incluir otros muchos servicios de comunicación. En este vídeo os dejo algunas cuestiones generales del tema.






ACTIVIDADES

1.- En grupo de 6 alumnos, buscad información sobre alguno de las tecnologías de la comunicación listadas anteriormente.
2.- Con dicha información construid un poster.
3.- Explicad vuestro poster al resto de la clase en 3 minutos.
4.- Colocad el poster en vuestra clase.


3.- SEÑALES DE COMUNICACIÓN

                    El proceso de comunicación consta de 5 elementos claves que son:

1.- Emisor o punto donde se genera el mensaje
2.- El receptor o punto a donde debe llegar el mensaje
3.- Mensaje que es la información que quiero emitir
4.- Código que es la forma en cómo se envía el mensaje
5.- Medio de transmisión.

                   Pero cuando nos referimos a señales de comunicación nos estamos refiriendo a procesos de comunicación por medios tecnológicos. Por dicho motivo transcendemos a estos conceptos básicos de comunicación. En las telecomunicaciones, siempre existe una etapa en la que el mensaje se codifica mediante impulsos eléctricos. Por ello una definición muy clásica de señal es:

“Las señales pueden describir una amplia variedad de fenómenos físicos. Las señales se representan matemáticamente como funciones de una o más variables independientes.”
A.￿V.￿Oppenheim;￿A.￿S.￿Willsky (1998). Señales y sistemas (2.a ed.). Pear-
son Educación.
                   En la definición se han incluido el concepto de fenómeno físico y el de función matemática. Aunque hay un sinfín de fenómenos físicos, en el campo de las telecomunicaciones hay 2 que resultan especialmente importantes, la luz y el sonido. Esto es debido a que la comunicación humana se combina de imágenes y sonidos.  Afortunadamente ambos son movimientos ondulatorios, por lo el conocimiento físico básico se puede limitar al estudio de este tipo de fenómenos.  Os dejo un vídeo que explica las cuestiones básicas sobre este tema.



                                       


ACTIVIDADES

1.- ¿Qué es una onda?
2.- Defina los siguiente parámentros

  1.                                                                  Frecuencia
  2.                                                                  Amplitud
  3.                                                                  Periodo
  4.                                                                  Velocidad de propagación
  5.                                                                  Longitud de onda.

        
3.- ¿Cuáles son las diferencias entre la luz y el sonido?
4.- ¿Qué es el espectro electromagnético?




10.- HTML 5

HTML en su versión 5 presenta algunas ventajas frente al HTML 4. Principalmente 2

1.- La visualización de videos
2.- El uso de un elemento denominado canvas (similar al canvas de AppInventor)


Desde el punto de vista técnico otra gran diferencia es que una WEB HTML5 no tiene 2 partes, sino 5 que son:


Una página diseñada en HTML 5 es similar a la de HTML4 pero incorporando los elementos propios de esta versión. A nivel de gráficos y videojuegos tiene muchas aplicaciones. Os dejo un ejemplo que permite dibujar con el ratón.

                                       
    <html>
   
        <head>
            <title>Paint</title>
            
            <script>
                var canvas;
                var context;
                var drawing;
                
                function init() {
                    canvas = document.getElementById("lienzo");
                    context = canvas.getContext("2d");
                    
                    canvas.addEventListener('mousedown', mouseDown, false);
                    canvas.addEventListener('mousemove', mouseMove, false);
                    canvas.addEventListener('mouseup', mouseUp, false);
                    
                    drawing = false;
                }
                
                function mouseDown(e) {
                    var x = e.offsetX;
                    var y = e.offsetY;
                    
                    context.beginPath();
                    context.moveTo(x, y);
                    
                    drawing = true;
                }
                
                function mouseMove(e) {
                    if(drawing) {
                        var x = e.offsetX;
                        var y = e.offsetY;
                        
                        context.lineTo(x, y);
                        context.stroke();
                    }
                }
                
                function mouseUp(e) {
                    context.closePath;
                    drawing = false;
                }
                
                function cambiarColor(color) {
                    context.strokeStyle = color;
                }
                
                
            </script>
            
        </head>
        
        <body onload="init()">
            <canvas id="lienzo" width="800" height="600"></canvas>
            
            <table width="800">
                <tr>
                    <td><a href="javascript:cambiarColor('#000000')">Negro</a></td>
                    <td><a href="javascript:cambiarColor('#FF0000')">Rojo</a></td>
                    <td><a href="javascript:cambiarColor('#FFAA00')">Naranja</a></td>
                    <td><a href="javascript:cambiarColor('#FFFF00')">Amarillo</a></td>
                    <td><a href="javascript:cambiarColor('#00FF00')">Verde</a></td>
                    <td><a href="javascript:cambiarColor('#0000FF')">Azul</a></td>
                </tr>
            </table>
            
        </body>
   
    </html>
                       

9.- LOS FORMULARIOS

Los formularios son elementos típicos de las páginas WEB dinámicas. Por ejemplo pueden servir para hacer el pedido en una WEB que suministre material on line. Vamos hacer formularios representativos de los 3 tipos de estructuras de programación.


1.- ESTRUCTURA LINEAL : INTRODUCIMOS 2 NÚMEROS Y HALLAMOS SU PRODUCTO.

CÓDIGO

<html>
<head>
<script>
var k = {
                        nombre:"MULTIPLICANDO",
n1: 1,
n2: 1,                                         DEFINIENDO LAS VARIABLES
resultado : function (){
var r = this.n1 * this.n2;
return r;
} CREANDO LA FUNCIÓN
};
function f(){
k.n1 = document.getElementById("n1").value;
k.n2 = document.getElementById("n2").value;
document.getElementById("resultado").innerHTML = k.resultado();
}
</script>
</head>
<h1> <span style=color:green> SUMANDO DOS NUMEROS</span> </h1>

<body>
NUMERO 1: <input type="text" id="n1"/><br/>
NUMERO 2: <input type="text" id="n2"/><br/>     DEFINIENDO LOS OBJETOS QUE NOS                                                                                       DARAN LOS DATOS PARA EJECUTAR EL                                                                                                                           PROGRAMA

<input type="button" onclick="f()"/><br/>                   ESTABLECIENDO UN EVENTO
Su producto es: <span id="resultado"> </span>
</body>
</html>

El resultado es:



FORMULARIO 1

HACER UN FORMULARIO QUE INTRODUCIENDO TU NOMBRE Y APELLIDOS DE LUGAR A UN MENSAJE QUE PONGA BIENVENIDO  "NOMBRE  APELLIDO". RECUERDE QUE PARA DEFINIR STRINGS HAY QUE PONER "".

2.- ESTURCUTAS RAMIFICADAS: CONDICIONALES

Vamos a compara dos números y escribir el mayor de ambos. El código del programa usará la sentencia if (condicional) { sentencia}

<!DOCTYPE html>

<html>
<head>
<script>
var k = {
                        nombre:"Sumando",
n1: 1,                                             Definiendo e inicializando variables
n2: 1,
resultado : function (){
                        if (this.n1>this.n2){
var r = this.n1;
return r;                                     Definiendo la primera condición
}
                        if (this.n2>this.n1){
                        var r=this.n2;
                              return r;                                      Definiendo la segunda condición
                        }
                        if (this.n1=this.n2){
                        var r="Son iguales";
                              return r;                                       Definiendo la tercera condición
                        }}
};
function f(){
//window.alert(k.peso);
k.n1 = document.getElementById("n1").value;            Estableciendo los valores de                               k.n2 = document.getElementById("n2").value;             de salida.
document.getElementById("resultado").innerHTML = k.resultado();
}
</script>
</head>
<h1> <span style=color:green> COMPARANDO DOS NÚMEROS</span> </h1>

<body>
NUMERO 1: <input type="text" id="n1"/><br/>            Configurando los objetos
NUMERO 2: <input type="text" id="n2"/><br/>
<input type="button" onclick="f()"/><br/>                      Estableciendo los eventos.
EL MAYOR ES: <span id="resultado"> </span>
</body>
</html>

El resultado se puede ver en el siguiente video


                                                             Formulario 2


3.- BUCLES

Un bucle muy sencillo es contar los 5 primeros números con un for.

<html>
<head>
      <title>bucle</title>
</head>
<body>
<h1> <span style=color:green> LOS 5 PRIMEROS NUMEROS</span></h1>
<script type="text/javascript">

var i=0; 
for (i=0;i<=5;i++) {                            Contador de 1 a 5
document.write(+ i);
document.write("<br />");                  Imprime el valor del contador
}
 </script>

</body>

</html>




8.- LAS WEBS DINAMICAS : JAVASCRIPT

Las WEBS estática ofrecen mucha información pero tienen poco valor desde el punto de vista tecnológico. Para que una WEB estática se convierta en dinámica es preciso añadirles los denominados javascript. Los javascript son pequeños programas escritos en este lenguaje que ejectúan los procesos escritos. Javascript es un lenguaje orientado a objetos, por lo que la ejecución de programas suele ir asociada a eventos dentro de la página. Los eventos puede ser pulsar un botón, hacer un click con el ratón, pasar el ratón por un determinado objeto, cargar una página. 
En cuanto a los programas que se pueden hacer con javascript, hay que considerar que no es preciso dar formato a las variables cuando éstas se definan. Pero se pueden diferenciar

1.- Procesos lineales
2.- Ramificaciones o condicionales
3.- Bucles.

Para introducir una acción en una página web se deben utilizar los eventos sobre los objetos y el programa escrito entre etiquetas <script> </script> en la cabecera. Veamos algunos ejemplos:

Hola
<div id="dl">
Hola</div>
<button onclick="f()">Ejecutar Script</button>                         OBJETO : BOTÓN
<script>
 function f(){
  var hoy = new Date();
  var h = hoy.getHours();                      DEFINICIÓN DE VARIABLES
  var m = hoy.getMinutes();
  var s = hoy.getSeconds();
document.getElementById('dl').innerHTML=h+":"+m+":"+s; CAMBIAS EL FORMATO DE "HOLA" 
  var t = setTimeout ( function(){f()} , 1000);  REPITE EL PROCESO CADA 1000 ms
 }
</script>

Otro ejemplo son mensajes emergentes cuando pasamos el cursor.




 

El código es muy parecido al anterior. Cambia la definición del objeto y el evento.

 <button onMouseOver="ff()"><img src="imagenes/images.jpeg"></button>  
DEFINICIÓN DEL OBJETO Y EL EVENTO
<script>
  
      <!--
        function ff()  DEFINICIÓN DE LA FUNCIÓN
        {
          alert("BIENVENIDOS A NUESTRA PÁGINA WEB"); DEFINICIÓN DE LA ACCIÓN
        }
      //-->
 </script>


Otro ejemplo son los textos en movimiento.







BIG DATA 

 

 

 Cuyo código puede tener muchas variables 

 <h1><MARQUEE WIDTH=100% HEIGHT=0> BIG DATA </MARQUEE>
</h1>


Desde la página de desarrolladores se puede encontrar la sintaxis básica para crear nuestros javascript

7.- LOS ESTILOS CSS

Todos los documentos constan de 2 elementos: El contenido y el formato del documento. En el caso de las páginas WEB estos elementos se pueden incluso separar utilizando lo que se denomina hoja de estilos CSS.
Si analizamos nuestro documento resulta sencillo comprobar que los encabezados tienen un determinado formato

El encabezado h1 es naranja, lo que se puede codificar como
h1 {
color:orange;
font-family: courier;
}

Los encabezados h3 es azul y courier
h3 {
color:blue;
font-family: courier;
}
Los párrafos  en rojo
p {
color:red;
font-family: courier;
}

Se añaden todos estos elementos entre las etiquetas <head> y </head> y dentro de etiquetas
<style> </style>
<!DOCTYPE html>
<html>
<head>
  <title>bigdata</title>
  <meta name="" author="" content="ISABEL LAFUENTE">  
  <meta charset="UTF-8">  
  <meta name="big data" content="Prueba de web">  
  <meta name="keywords" content="bigdata,CSS, XML, HTML5">
<style>
h1 {color:orange;
    font-family: arial;
}
h3 {color:blue;
font-family: courier;
}
p {color:red;
   font-family: courier;
}
</style>

</head>

 Para definir el resto de los formatos (estilos) se utiliza la etiqueta <span>. Pero existen otras etiquetas que también permiten crear bloques en el contenido. Entre las más utilizadas está la etiqueta <div> que define un bloque de texto. Para definir estilos que se reciclen en el contenido se utiliza la etiqueta <span class="nombre"> que se identifica en el encabezado como .nombre y <span id="elemento", que se identifica como #elemento. De esta manera:

<h3> <span id="elem1">FUENTES</span></h3><br> 

#elem1{
color:green;
font-family: arial;

}
 <li> Almacenamiento 
                                    <dl> <span class="clase1"> Clave-valor </span></dl>
                                    <dl> <span class="clase1"> Documental</span> </dl>
                                    <dl> <span class="clase1"> Grafo</span> </dl>
                                    <dl>  <span class="clase1">Orientado a columnas </span></dl>
                      </li>
                      <li> Analisis 
                                    <dl>  <span class="clase1">Asociación</span> </dl>
                                    <dl> <span class="clase1"> Minería de datos</span> </dl>
                                    <dl> <span class="clase1"> Agrupación </span></dl>
                                    <dl> <span class="clase1"> Análisis de texto </span></dl>

                      </li>
.clase1{
color: white;
        font-family: verdana;

        }

 Si el documento tiene muchos estilos, el encabezado puede resultar muy pesado y por ello se pueden recoger todos los estilos del documentos en una hoja aparte de formato css.




La forma de enlazar dicha hoja de estilos con la página es mediante un enlace en el propio encabezado.

<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
  <title>bigdata</title>
  <meta name="" author="" content="ISABEL LAFUENTE">
  <meta charset="UTF-8">
   <meta name="big data" content="Prueba de web">
  <meta name="keywords" content="bigdata,CSS, XML, HTML5">
</head>



Utilicemos nuestro ejemplo de página BIGDATA para ilustrar el proceso.


6.- PÁGINAS WEB ESTÁTICAS

              Todos los contenidos que se publican en INTERNET utilizan alguno de los siguientes códigos
  1. HTML 4
  2. XHTML
  3. HTML5
El más conocido es el primero. Si en cualquier página WEB que visualizamos en el navegador, visualizamos su código fuente podremos ver cómo es el código HTML. Dicho código consiste en una serie de etiquetas. Las etiquetas pueden ser de 2 tipos que precisan abrir y cerrar la etiqueta 

<html>              </html>

o que no precisan cerrar <br/>

Para conocer la lista de las etiquetas podremos consultar MOZILLA ,    
o bien Códigos.

Para escribir el código de nuestras páginas web se puede utilizar el bloc de accesorios guardando la página con formato html. Pero es aconsejable descargarse el editor notepad-plus ++.

Todas las páginas WEB tienen 2 partes el encabezado y el cuerpo. Por eso una página básica será:

<html>
<head>
</head>
<body>
</body>

Los elementos del encabezado no son visibles, pero guardan información sobre la página como su titulo, los enlaces, los estilos, los javascripts. En el cuerpo se pone el contenido.

Con estas dos premisas vamos a comenzar a crear nuestras páginas usando el código html. El trabajo consiste en crear una página WEB sobre BIGDATA. Con la información recopilada, la presentaremos en formato WEB. Os dejo los códigos de todas las páginas que se pueden descargar desde este enlace.  También os dejo un tutorial en formato video. La actividad consistirá en hacer una página similar pero con el resto de los conceptos ya tratados en el post 2 de la etiqueta el futuro de internet




        El resultado final lo podreis tener descargando la página, y colocandola en la misma carpeta en donde está la carpeta imágenes con la imagen que hemos puesto en la página.

ACTIVIDADES.

1.- Abra el bloc de notas de los accesorios y escriba el siguiente código

<html>
      <head>
                   <title>
                               Mi primera página WEB
                   </title>
     </head>
<body>
             Aprendiendo a usar HTML
</body>

</html>

Guárdale con formato html. ¿Que sucede cuando se abre con un explorador?
¿Cómo podría poner el texto en negrita? Y ¿en cursiva?

2.- Utilizando las etiquetas HTML, cree una página WEB.
2.1.- Cree un encabezado denominado "TECNOLOGIA, PROGRAMACIÖN Y ROBOTICA", en letras de color rojo.
2.2.- Alinea a la derecha "Aprendiendo HTML".
2.3.- Inserte una imagen en la página.
2.4.- Inserte un hiperenlace a www.google.com.

El resultado final será:


3.- Construya otra página WEB con las siguientes características
3.1.- Encabezado "Aprendemos tecnología" en rojo.
3.2.- Alineado a la derecha "..porqué hacemos tecnología."
3.3.- Inserte un podcast que encontrará en http://cadenaser.com, apartado Podcast, sección Historia y programa SER Historia.
3.4.- Utilizando el código HTML haga un resumen del mismo.

El resultado será:





4.- Enlace ambas páginas.










    


5.- LOS GESTORES DE CONTENIDO: LA RED SOCIAL 2.0

Una de las características básicas del trabajo en INTERNET es una forma de trabajo colaborativo. El individuo pierde parte de su propia identidad para convertirse en un nodo de una red en la que la información se convierte en conocimiento. La aportación de contenidos se realiza mediante trabajo colaborativo. 
Para desarrollar el trabajo colaborativo se utilizan los denominados gestores de contenido o, en inglés, Content Manager System (CMS). Se trata de servicios, programas basados en diferentes marcos que nos permiten crear contenidos en código HTML capaces de compartirse en la red. Pero lo que les hace verdaderamente interesantes es que dicho contenido puede publicarse por varias personas a la vez. 
Los gestores de contenidos más utilizados son:


En definitiva todos ellos se caracterizan por tener una dirección URL donde se alojarán los contenidos. La facilidad de poder publicarse en dicho gestor más de un autor. La diversidad de archivos que se pueden publicar. La posibilidad de actualizar los contenidos. 
Los CMS son muy variados

BLOGS
WIKIS
PLAFORMAS EDUCATIVAS (MOODLE)

En algunos casos pueden precisar de un programa FTP para subir los contenidos, y en algunos casos pueden crear las páginas WEB con otros lenguajes de programación que las permiten ser más interactivas.

ACTIVIDADES

1.- Cree un blog que pueda utilizarse como gestor de contenidos para la documentación correspondiente a nuestro proyecto EL TIOVIVO. Los autores del blog deben ser los miembros del grupo de taller. Deben de poder publicar los 5 miembros. A modo de ejemplo os dejo este enlace de un blog

Ejemplo 


2.- En este ejercicio vamos a crear una página WEB con WORDPRES

2.1.- Registrate en Wordpress a ser posible con una cuenta de correo gmail. Escoge Mi Sitio y escoge el tema Twenty Fourteen

2.2.- Desde Mi Sitio escogemos Páginas y seleccionamos ABOUT. Cambiamos el nombre por el de ME PRESENTO. 

2.3.- Completa la tabla de páginas 5 páginas que son Me presento, Mis estudios, Mis aficiones, Mi blog y Titulo.

2.4.- Crea un nuevo menú denominado COMO SOY.  Añádele a las páginas. Finalmente ordena las páginas en Me presento, Mis estudios, Mis aficiones y Mi blog.

2.5.- En opciones de Menú señale menú primario de cabecera. Y guárdelo todo.

2.6.- Como configuración de lectura, se toma una página estática. La página inicial es ME PRESENTO, y la página de entradas MI BLOG.

2.7.- Edita la página me presento. Añade el texto "EN MI SITIO WEB OS HABLARE SOBRE MI" cambia el tipo y color de letra y una imagen.

2.8.- Haz lo mismo en el resto de las páginas incluyendo frases e imágenes.

2.9.- Finalmente configure la cabecera.






3.- Vamos hacer un sitio WEB con los proyectos que hicisteis el curso pasado. Espero que conservaseis las fotos.

3.1.- Ir a Google Sites y crear un sitio WEB que se denomine lo que me gusta de la tecnología.
3.2.- El tema del sitio deberá ser Azul Marino.
3.3.- Constará de Una página principal con el texto

"Esta es la página principal de mi web sobre Tecnología"

Y 2 páginas con mi primer proyecto y mi segundo proyecto.
3.4.- En cada página habrá una foto del proyecto realizado.

SITIO

4.- Por último crearemos un tablero. desde Pinterest





12.- WEBQUEST SOBRE EL FUTURO DE INTERNET

              En la actividad anterior hemos comprobado que la evolución de Internet ha sido bestial y continuará en el futuro. Pero vamos a hacer una pequeña WEBQUEST sobre este tema.


TEMA MIEMBROS ¿QUÉ ES? VENTAJAS DESVENTAJAS IMPACTO Presentación
Cloud Computing






IoT






Big Data






Smart Cities






WearableComputing





            

El resultado de la WEBQUEST será una presentación sobre alguno de los temas. La presentación no tendrá más de 10 diapositivas y 5 minutos de exposición oral. Deberá contestar a las siguientes preguntas

  1. ¿En qué cosiste el servicio prestado?
  2. ¿Cuáles son sus ventajas?
  3. Sus desventajas (si las tiene)
  4. Como afectará a nuestra vida y costumbres

11.- LAS NUEVAS TENDENCIAS EN LA RED

                      Y ahora............................¿qué?. ¿Cómo evolucionará Internet en el futuro?. Todos los futuros son inciertos, pero está claro que Internet ha venido para quedarse y obligarnos a evolucionar con ella y con sus servicios. He escogido este video, porque creo que nos informa profesionalmente de lo que sucederá en el futuro.