martes, 27 de septiembre de 2016


[2016-27-09]

CLASE 30:

Continuación Tema JavaScript:
Se realiza la Evaluación Primer Indicador.

OPERADORES ARITMÉTICOS:

Asignar un valor a una variable:

 Operador de Asignación:   =  (igual)
  • Suma(+):Sumar dos valores numéricos. Concatenar cadenas entre sí o números y cadenas.
  • Resta(-):Restar valores numéricos. Puede actuar sobre un único operando numérico cambiándole de signo.  
  • Producto(*) Y Cociente(/): Multiplica(*) y divide(/) dos valores numéricos.
  • Resto(%): Operador Modulo, calcula el resto o residuo de una división.
  • Incremento(++) y Decremento(--): Incrementar (aumentar) o Decrementar (disminuir) en 1 el valor de una variable.
Si el Operador se antepone a la variable, la operación de Incremento o Decremento es prioritaria sobre cualquier otra.
  • Operadores Compuestos: (+,-,*,/): Pueden asociarse con el Operador de asignación. Cambian el valor de una variable; Incrementándola, Decrementándola, Multiplicándola y Dividiéndolo por un valor.
Operador += : Variables de cadena.


IMPORTANTE:

En la multiplicación de este lenguaje no se utiliza el símbolo X ni en la División se utiliza el símbolo  %.

Ejemplo:

a=10;

b=20;
c=a+b;
c=a-b;
c=a*b;
c=a/b;

Si en algún caso el valor de b es 0, ocurre en la división un error matemático.Este error se puede anteceder con un IF o Condicional.

EJEMPLO:

<html>

<head>
<title>condicional</title>
</head>
<script>
var a=10;
var b=20;
c=a+b;
document.write(c+ "<br>");
c=a-b;
document.write(c+ "<br>");
c=a*b;
document.write(c+ "<br>");
if(b==0){
document.write("Error matematico");
}
else{
c=a/b;
document.write(c+ "<br>");
}
</script>
<body>
</body>
</html>

Para incorporar una imagen al código JavaScript se realiza con el mismo código de HTML:

<'img src="ruta_de_la_imagen" '>

EJEMPLO: (Utilizando una imagen)

<html>

<head>
<title>condicional</title>
</head>
<script>
var a=10;
var b=0;
c=a+b;
document.write(c+ "<br>");
c=a-b;
document.write(c+ "<br>");
c=a*b;
document.write(c+ "<br>");
if(b==0){
document.write('<img src="lobito(2).gif">');
}
else{
c=a/b;
document.write(c+ "<br>");
}
</script>
<body>
</body>
</html>


OPERADORES COMPARATIVOS Y LÓGICOS:


OPERATOR
DESCRIPTION
==
Equal to
===
Equal value and equal type
!=
Not equal
!==
Not equal value or Not equal type
> 
Greater than
< 
Less than
>=
Greater than or equal to
<=
?
Less than or equal to
Ternary operator


IMPORTANTE:

== : Significan Igual a Y Deben ir Unidos sin nada de espacios entre los dos iguales.
Utilizar siempre minúsculas nada de Mayúsculas.

viernes, 23 de septiembre de 2016


[2016-20-09]

CLASE 29:

Se inicia CUARTO BIMESTRE, Inicio de Tema: JavaScript.

Cronograma de Actividades Cuarto Bimestre:



JAVASCRIPT:


Lenguaje de Programación que es de forma DINÁMICA (dinamismo), no necesita de un programa especial para ser ejecutado o un interprete específico.

Puede ir ubicado en diferentes lugares de la estructura de un documento ya sea dentro del <head></head> o antes del <body></body>.

la Sintaxis de javascript es Minúscula.

El documento de javasript empieza con la etiqueta: <script></script>.

Para visualizar información en una caja de Texto, se utiliza la etiqueta:<alert>
alert("Hola");

Visualización de Información en la Página Web, se utiliza: document.write. Este permite combinar HTML y javascript.

Diferencia entre <alert> y document.write: Se basa en que <alert> No interpreta código lo que realiza es la visualización de un código ejecutado mas document.write si interpreta código y lo ejecuta.

front-end: Es el diseño en Pantalla a los clientes.

back-end: Es la parte de diseño que pertenece al Programador.

COMENTARIOS: 

Los comentarios son partes del programa que el intérprete no lee y que, por tanto, sirven para explicar y aclarar. Van comprendidos entre barras y asteriscos como en el ejemplo siguiente:

/*comentario*/: Comentario para Varias Lineas.

El comentario puede constar de más de una línea o de una sola.

Otro tipo de comentario es la barra doble, es válida sólo para comentarios de una sola línea aunque no la ocupen por entero:

ent x: //comentario : Comentario para una sola Línea.


NOTA:
Los comentarios Javascript no pueden insertarse fuera de las marcas que individuan el script, ya que, en caso contrario, HTML los considera parte del texto. Y viceversa: no se pueden usar las marcas de comentarios HTML dentro del script. 
       

IMPORTANTE: Si se empieza utilizando comillas " (dobles), las Internas deben ir simples (').

javascript es muy DIFERENTE del lenguaje llamado java.

VARIABLES:

  • Númericas: Permiten realizar cálculos/operaciones.(+,-,*,%)(suma, resta, multiplicación,división).
  • Cadena: (" "/' ') Permiten unir o catenar.Cuando se utilizan las comillas se genera una cadena.
Para definir variables utilizamos var:

EJEMPLO:

var a=10;
var b=20;
var c=a+b;

alert("la respuesta es:..."+c);

Se realizó un ejercicio práctico de clase: 


<html>
<meta charset="utf-8"/>
<head>
<title>practica Jv</title>
</head>
<script>

document.write("<hr>");
document.write("<center> Maria Fernanda Garcia Chaparro </center>"); 
document.write("<hr>");
document.write("<center><font color=blue>15 </font></center>");
document.write("<hr>");
document.write("<marquee behavior=alternate width=60%>Colegio Integrado Nuestra señora Del Divino Amor</marquee>")
</script>

<body>
   hola
</body>
</html>

lunes, 19 de septiembre de 2016


[2016-13-09]

Receso Escolar.

Receso Escolar; Semana de Ferias de Bucaramanga.


Función: alert() / confirm() / prompt() en JavaScript
USO:
alert(mensaje);
var resultado = confirm(mensaje);
var resultado = prompt(mensaje, valor);

Con estos métodos (objeto window) mostraremos ventanas modales al usuario.
Con alert() simplemente, mostraremos un mensaje. Con confirm() haremos exactamente lo mismo, pero además obligará al usuario a seleccionar entre dos opciones, una positiva y otra negativa, que se devolverá como parámetro (boolean). Y con prompt() pediremos al usuario que introduzca un texto en una ventana modal.

Ejemplo:
// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Pedimos confirmación
if (confirm(“¿Seguro que su nombre es ”+nombre+”?”)) {
// Respuesta afirmativa...
alert(“Hola ”+nombre);
}

confirm() es muy útil para confirmar clics en enlaces comprometidos, que hagan operaciones críticas como eliminación de datos.

<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>

Existen librerías Javascript como jQuery.

Internet Explorer no cumple el estándar ECMAScript/DOM (entre otros tantos estándares web), y puede que un método no funcione igual en IE que en Firefox o Safari.


TOMADO DE: 


domingo, 11 de septiembre de 2016


[2016-06-09]

CLASE 28:

Se Dieron a conocer las Notas Finales correspondientes al Tercer Bimestre y se realizaron las correcciones por parte de los estudiantes y el Docente, se realizan los acuerdos planteados en clases anteriores, se finaliza el Tercer Bimestre y se da la explicación de la metodología que se manejará en el  Cuarto Bimestre.


Mi Nota Definitiva Tercer Bimestre = 100.


JAVASCRIPT

Es un lenguaje de programación,  se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web. Los navegadores modernos interpretan el código JavaScript integrado en las páginas web. JavaScript al estar alojado en el ordenador del usuario los efectos son muy rápidos y dinámicos, permite toda la potencia de la programación como uso de variables, condicionales, bucles, etc.

El uso de JavaScript es muy habitual en la programación web.

Diferencia entre HTML y JavaScript:

El código HTML se encarga de que en la pantalla se muestre algo, por ejemplo una imagen, un menú, etc. El código JavaScript se puede encargar de crear efectos dinámicos en respuesta a acciones del usuario, por ejemplo que se despliegue un menú tipo acordeón cuando el usuario pasa el ratón por encima de un elemento del menú.

TOMADO DE:

El código JavaScript podemos encontrarlo dentro de las etiquetas <body></body> de nuestras páginas web. Por lo general se insertan entre: <script></script>. También pueden estar ubicados en ficheros externos usando:

<script type="text/javascript" src="micodigo.js"></script>

Algunas características del lenguaje son:

Su sintaxis es similar a la usada en Java y C, al ser un lenguaje del lado del cliente este es interpretado por el navegador:

Variables:  var = “Hola”, n=103

Condiciones: if(i<10){ … }

Ciclos: for(i; i<10; i++){ … }

Arreglos: var miArreglo = new Array(“12”, “77”, “5”)

Funciones: Propias del lenguaje y predefinidas por los usuarios.

Comentarios para una sola línea: // Comentarios
Comentarios para varias lineas:
/*
Comentarios
*/

Permite la programación orientada a objetos: document.write("Hola");

Las variables pueden ser definidas como: string, integer, flota, bolean simplemente utilizando “var”. Podemos usar “+” para concatenar cadenas y variables.

TOMADO DE:  


domingo, 4 de septiembre de 2016



[2016-30-08]

CLASE 27:

Se Realizó el Acumulativo correspondiente al Tercer Bimestre, el cual tenía como base el proyecto que los estudiantes desarrollaron en clases pasadas y comprendía temas como Manejo de Tablas, HTML básico etc.

Exenta del Acumulativo.
NOTA= 100


Código (HTML) del Proyecto: Simulación de una Página Web.

<html>
<head>
<title>comex</title>
</head>
<body>

<table width="79%"align="center">
<tr>
<td><img src="imagenes/logo.jpg"></td>
</tr>
</table>
&nbsp
&nbsp

<table width="73%"valign="middle"align="center">
<tr>
<td align="center"valign="middle"><img src="imagenes/cabecera.jpg"></td>
</tr>
</table>

<br></br>
<br></br>

<table width="73%" valign="middle"align="center">

<tr>
<td><img src="imagenes/pintura.jpg"></td>
<td><img src="imagenes/segunda_pintura.jpg"></td>
<td align="rigth"><img src="imagenes/tercera_pintura.jpg"></td>
</tr>

<tr>
<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura M</font>
<font color="grey"type="calibri"size="3">Ideal para crear acabados texturizados 
con grano medio, dejando la superficie
rallada.</font></pre></td>


<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura R</font>
<font color="grey"type="calibri"size="3">Ideal para crear acabados texturizados 
con grano grueso, obteniendo texturas 
profundas y pronunciadas.</font></pre></td>

<td><pre><font color="sky blue"type="arial"size="4">&nbsp;&nbsp;Kontextura SG</font>
<font color="grey"type="calibri"size="3">Ideal para eliminar texturas antiguas,
obteniendo acabados sin grano. 
Versatilidad para crear texturas 
discretas.</font></pre></td>
</tr>

</table>
<br></br>

<br></br>

<table width="73%" valign="middle"align="center">

<tr>
<td><a href="http://maria2201garcia.blogspot.com.co/"target="blank"title="mirar blog de maria garcia">maria fernanda garcia chaparro</a></td>
<td rowspan="2"align="rigth"width="20%"><img src="imagenes/logo.jpg"></td>
</tr>

<tr>
<td><a href="http://saramejiao.blogspot.com.co/"target="blank"title="mirar blog de sara mejia">sara sofia mejia ortiz</td>
</tr>


Página original:  
http://www.comex.com.mx/CATALOGUE/Catalogue/Texturizados/Kontextura.aspx


NOTA: Deben estar guardadas las imágenes para poder abrirlas en la simulación de la Página (Código).


Imágenes:

Nombre de la imagen: cabecera.jpg




 imagen: logo.jpg



 imagen: pintura.jpg 


imagen: segunda_pintura.jpg


imagen: tercera_pintura.jpg



TOMADO DE: 
http://www.comex.com.mx/CATALOGUE/Catalogue/Texturizados/Kontextura.aspx

domingo, 28 de agosto de 2016



[2016-23-08]

CLASE 26:

NUEVAS ETIQUETAS:

En Cabeceras: 
  • <font face="  "size= " ">= Tipo de letra y Tamaño de la letra. </font>
  • <big>= Tamaño Grande.
  • <small>= Tamaño pequeño.
  • <sup></sup>= Supíndice(Texto o palabras quedan arriba)
  • <sub></sub>= Subíndice(Texto o palabras quedan abajo)
  • <FRAMESET>…</FRAMESET>= Dicen al navegador dónde empiezan y dónde acaban los marcos, y el tipo y forma de estos. Entre una y otra irán las definiciones de los diferentes frames.
  • <!DOCTYPE html>= Indica al navegador donde se visualiza el documento, y que está escrito en la versión HTML5.
  • lang="es-ES"en la etiqueta de inicio <html>=Idioma.
  • <meta charset="utf-8">= Dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). 
Comentarios:

"<!__"y"__>" = Estructura base para realizar un comentario,este No se mostrará en la                                             Página Web pero si en el código de Fuente.

Párrafos con Estilo:

Atributos: 

  • "span"= Abarcar, Contenedor de línea, aplica estilo al texto y agrupa elementos en                    línea.
  • "class"= Asigna nombres de clases al elemento clases en CSS.
Datos y Párrafos:
  • <pre>= Preformatear el texto. Permite visualizar todos los elementos de                                    Tabulaciones, espacios en blanco etc.
Formatos de Texto:

Diferentes elementos:
  • <strong>=<b> : Negrilla.
  • <em>=<u>: Cursiva. La etiqueta <em> se utiliza con texto enfatizado. La Diferencia es que es más importante en la Semántica.
  • <mark>: Resalta el texto de un Navegador.
TABLAS:
  • Caption: Título.
  • th: Tres celdas Cabeceras: "thead"= Una o más filas de Cabeceras.                                                                      "tbody"= Una o más filas de Datos del cuerpo de la tabla.                                               "tfoot" = Una o más filas de Datos del pie de la tabla.
  • Padding: Separar Contenido de la Celda.

TOMADO DE: 





Tips para crear Cajas de Texto:

<input type="text"name="email"> 

<input type="email"name="email"> : Cajas de Texto para Correos electrónicos. Se necesita que el navegador (Mozilla, Safari ,Chrome) estén actualizados en su última versión.

<label>email</label><input type="text"value="hola"> . Value= Nombre que le vamos a                                                                                                              mostrar al Cliente.

Ejemplo: Caja de texto que al oprimirla muestra una serie de opciones.

Edad= <select name="edad">
            <option value="18">18</option>


            <option value="100">Fin del Tiempo</option>

Ejemplo: Botón que al oprimirlo realiza una acción.

<input type="button"value="Aceptar"onclick="javascript:alert('hola');">

ANCLAS:

<a></a>

1. Definir: <a name="ancla"></a>

2. Llamar: <a href="#ancla">Documentos</a>

domingo, 21 de agosto de 2016


[2016-16-08]

CLASE 25:

Los estudiantes del Grado Noveno B realizaron la salida a la Universidad Industrial de Santander, celebración Festival de Piano.


INCLUIR SONIDO EN UNA PÁGINA WEB

  • Se debe utilizar el elemento <audio>. Este solo  funciona con los browsers Internet Explorer 9+, Chrome, Safari, Firefox y Opera.
  • Conviene incluir una frase de advertencia para los usuarios que utilicen versiones de browser más antiguas.
1.‐ El código básico para incluir sonido en la Página Web es:

<audio control>
<source src="tema musical.mp3"type="audio/mpeg">
<source src="tema musical.ogg"type="audio/ogg">
</source></audio>

Esto hace aparecer en la pantalla una barra de sonido según el browser.


2. Se puede agregar información del audio como un texto informativo sobre el tema musical (título, músicos, duración, etc.) para realizar esto se debe utilizar la etiqueta <p>.

<p>Texto informativo sobre el tema musical (título, músicos, duración, etc.)</p>
<audio controls="">
<source src="tema musical.mp3" type="audio/mpeg">
<source src="tema musical.ogg" type="audio/ogg">
Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari.
</source></audio>






3. Cuando se quieren incluir varios temas musicales, cada [comando de audio] debe estar encerrado y separado de los demás utilizando (por ejemplo) el elemento  <div> ….</div>, o colocándolo dentro de la celda de una tabla.


ATRIBUTOS DEL ELEMENTO <audio> :
  • Autoplay: El sonido comenzará tan pronto esté disponible.
  • Controls: Mostrar en Pantalla la barra de Control de Sonido.
  • Loop: El sonido debe repetirse permanentemente.
  • Muted: Silenciar.
  • Preload: El archivo de sonido debe ser cargado (y cómo) cuando se carga la página.
  • Src: Especifica el sitio (URL) donde se encuentra el archivo de sonido.



                                                                                            
El elemento <audio>, atributos y elementos complementarios <source>:

  • <audio controls=” ”> Indica que el browser debe mostrar la barra de control para escuchar el tema musical.
  • <source src="tema musical.mp3" type="audio/mpeg"> Indica la fuente de donde se tomará el audio correspondiente.
  • type ,  indica qué formato de audio se está utilizando (por ejemplo “audio/mpeg>”.

NOTA:


En el código se incluyen dos formatos de audio posibles (mpeg  y  ogg). Esto se debe a que los browsers tienen sus preferencias; de este modo si no se reconoce el primero (mpeg) , se opta por el segundo (ogg).

MP3 es más pesado que el formato OGG. Con archivos MP3, los browsers Safari y Opera no responden. 






TOMADO DE: 


PONER FONDO A LA PÁGINA WEB

El lenguaje de CSS, es el encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web es background. Para poner el fondo de la página web, lo tendremos que utilizar sobre el elemento body.

Estructura del elemento background:
background: [color] [image] [repeat] [attachment] [position];

Podemos indicarle:
  • Color RGB.
  • Una imagen.
  • Indicar cómo se repite o si no se repite. 
  • Indicar si se queda fijo(fixed) o en formato scroll. 
  • Indicar la posición inicial en la que se situará la imagen.

El código CSS quedará de la siguiente forma:
1.  <style type="text/css">
2.  body {  
3.          background:url(fondo.gif) repeat 0 0;                   
4.   }
5.  </style>

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.
Utilizamos la función url () para indicar el directorio dónde se encuentra la imagen. Si queremos utilizar otro directorio podemos poner lo siguiente:
1.  <style type="text/css">
2.  body {  
3.          background:url('/imagenes/fondo.gif') repeat 0 0;                   
4.   }
5.  </style>

Ahora la imagen se encuentra en un directorio llamado "imagenes" que está en la raiz.
Por último tenemos que saber que existe otra propiedad llamada:
background-image, permite indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.
En este caso el código quedaría de la siguiente forma:
1.  <style type="text/css">
2.  body {  
3.          background-image:url('/imagenes/fondo.gif');
4.   }
5.  </style>


TOMADO DE: