Informática-María García

domingo, 30 de octubre de 2016

[2016-25-10]

CLASE 34:

Se realiza la explicación sobre el Template y se especifican los debidos requerimientos y condiciones para la entrega del Trabajo.

Cada title debe contener el nombre del estudiante.

Para empezar y realizar el debido proceso de desarrollo del template siga los siguientes pasos: Realice el cambio, guarde y ejecute pero es importante que haga esto con cada uno de los cambios que realice; uno por uno.

Se pueden utilizar todas las etiquetas que el estudiante desee, siempre teniendo en cuenta que el estudiante tenga el debido conocimiento sobre estas.

Realizar copias de seguridad, ya sea en la USB (personal) o en una nube.

No cambiar archivos base, siempre tener copias de seguridad de los archivos originales que posee el template.

Realizar módulo el cual tenga por nombre derechos,es muy importante que cada estudiante tenga el respectivo modulo en su template.

Explicación Completa sobre Entrega del Trabajo:

Datos de la Entrega

Entrega martes 01 de noviembre de 2016.
El proyecto debe ser entregado en cd.
Debe estar marcado con su primer nombre y su primer apellido, grado/grupo, número de lista.
El CD debe ser entregado al representante de clase.
Los CDs deben estar ordenados en orden de lista.
Los archivos del proyecto deben estar guardados dentro de una carpeta marcada como (PRIMERapellido_PRIMERnombre_##) donde ## hace referencia a 9a ó 9b según sea su caso.
Esa carpeta es la que se debe guardar dentro del cd.
El proyecto debe tener como archivo inicial el index.html

TOMADO DE: http://www.coldivinoamor.com/web2016/clase_noveno.php

Se realiza entrega de algunos ejercicios( DFD o Pseint a javascript):

Celsius:

<html>

<head>

</head>

var c= prompt('Digite la temperatura en grados Celsius');

var f=parseFloat(c*(9/5)+32);

document.write(f + ":esta es la temperatura en grados Celsius");

</script>

</html>

Farenheith:

<html>

<head>

</head>

var f= prompt('Digite la temperatura en grados farenheith');

var c=parseFloat(f-32)*(5/9);

document.write(c + ":esta es la temperatura en grados Celsius");

</script>

</html>

Leer n_u:

<html>

<head>

</head>

var n=parseFloat(prompt("Digite el Primer numero"));

var u=parseFloat(prompt("Digite el Segundo numero"));

if(n>u){

document.write(n);

}

else{

document.write(u);

}

</script>

</html>

domingo, 23 de octubre de 2016

[2016-18-10]

CLASE 33:

Se realiza evaluación sobre la Investigación de Ventanas Emergentes o pop-up.

Explicación sobre Template:

Diseño preestablecido, que otras personas o un programador lo han diseñado.

Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, disminuye tiempos y costos de desarrollo.Permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente.

Un excelente template puede solucionar en muchos casos el aspecto del diseño de un sitio web, sobre todo cuando se trata de empresas o freelancers (trabajador independiente) que recién comienzan o que no tienen muy definida su imagen corporativa.

ELEMENTOS QUE SE CONTEMPLAN DENTRO DE UN TEMPLATE

Se contemplan todos los elementos que tienen que ver con la estructura y el aspecto gráfico de un sitio web.

Elementos:

Regiones: Son las áreas donde van los bloques de contenido. En la mayoría de los casos se pueden observar: el encabezado, el contenido principal, las columnas y el pie de página.

Gama de colores: Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio. Podemos tener un color de base para el fondo, otro color para los links, y finalmente otro color que se puede aplicar en algunas regiones como el header y el footer.

Tipografías: Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio. Se definen los estilos para los headings (h1, h2, h3, h4).

Menús de navegación: Se contempla un menú principal y uno secundario. El menú principal del sitio es el medio de navegación que tiene el usuario y por ende también debería ser un elemento atractivo y agradable a la vista.

Botones: Son fundamentales como elementos donde queremos que el usuario haga click para que interactúe con el sitio.

Formularios: En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text). Es importante cuidar la legibilidad del texto (contraste y tamaño de la fuente), para que la persona que completa el formulario no se sienta frustrada.

TOMADO DE: http://www.glidea.com.ar/blog/que-es-un-template

ANOTACIONES IMPORTANTES:

Para descargar un Template: Buscar en el navegador Template free. Descargarlo como zip o rar.

Mantener los derechos de Autor en el template.
Tener copia original a parte de la que se trabaja, mantener todas las copias de seguridad posibles.
No descargar un template tipo flash.

domingo, 16 de octubre de 2016

[2016-11-10]

CLASE 32:

Explicación prompt:

Sintaxis de javascript, captura información del Usuario. Toda la información que captura es cadena.

La función prompt se utiliza para la entrada de datos por teclado. Cada vez que necesitamos ingresar un dato con esta función, aparece una ventana donde cargamos el valor.

La sintaxis de la función prompt es:

<variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor

inicial a mostrar en la ventana>);

La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor inicial a mostrar.

TOMADO DE:
http://www.tutorialesprogramacionya.com/javascriptya/temarios/descripcion.php?cod=4&inicio=

EJEMPLO:

<html>
<head></head>
<script>

var a=parseInt(prompt("Digite el primer número"));
var b=parseInt(prompt("Digite el segundo número"));
alert(parseInt(a)+parseInt(b));

</script>
<body></body>

</html>

Traducción de Algoritmo a javascript:

EJERCICIOS:

2) Programa que visualice 10 líneas horizontales: Utilizando un código de 2 líneas.

<html>
<head></head>
<script>
for(i=1;i<=10;i++){
document.write(i+"<hr>");
}

</script>
<body></body>

</html>

Otra forma de enumerar las líneas:

for(i=10;i<=100;i+=10){

3) Leer dos notas y decir si paso o no la materia pero agregando el nombre del estudiante.

<html>
<head></head>
<script>
var nombre=prompt("Digite su nombre");
var nota1=parseFloat(prompt("nota1"));
var nota2=parseFloat(prompt("nota2"));

var def=(nota1+nota2)/2;
if (def>=75){
alert(nombre+ "paso");
}
else{
alert(nombre+ "no paso");

}

</script>
<body></body>

</html>

4) El anterior ejercicio pero con ciclo for:

<html>
<head></head>
<script>

for(i=1;i<=5;i++){
var nombre=prompt("Digite su nombre estudiante No."+i);
var nota1=parseFloat(prompt("nota1"));
var nota2=parseFloat(prompt("nota2"));

var def=(nota1+nota2)/2;
if (def>=75){
alert(nombre+ "paso");
}
else{
alert(nombre+ "no paso");

}
}
</script>
<body></body>

</html>

Se realizó evaluación del Segundo Indicador:

<html>
<head></head>
<script>

var a=prompt("digite un numero");

if (a<0){

a=a*-1;
document.write(Math.sqrt(a)+ "Raiz imaginaria <br>");
else{

document.write(Math.sqrt(a)+ " <br>");
}

</script>
<body></body>
</html>

domingo, 9 de octubre de 2016

[2016-04-10]

CLASE 31:

EXPLICACIÓN FUNCIONES MATEMÁTICAS.

Redondear:

Redondear un valor:

1 var redondea = Math.round(9.45);

2 alert("Valor redondeado 9.45= "+redondea);

Redondear un número al entero más cercano:

1 redondea = Math.ceil(9.01);

2 alert("Valor ceil 9.01= "+redondea);

Calcular el Coseno de un número

1 var coseno = Math.cos(30);

2 alert("El coseno de 30 = "+coseno);

// // Coseno

Raíz cuadrada

1 var raizCuadrara = Math.sqrt(9);

2 alert(raizCuadrara);

TOMADO DE: http://artistasdigitales.com/javascript-operaciones-y-funciones-matematicas-basicas/

EJERCICIO DE RAÍZ CUADRADA:

<html>

<head>

</head>

x=-9;

if(x<0){

x=x*-1;

document.write(Math.sqrt(x)+ "raiz imaginaria <br>");

}

else{

document.write(Math.sqrt(x)+"<br>");

}

</script>

</html>

IMPORTANTE: Cuando se va a redondear un número, hay que tener en cuenta que su decimal se mayor o igual a 5 si cumple con esta condición, aumenta en uno su número entero.

NOTA: Algunos ejercicios no son posibles ejecutarlos en distintos navegadores, hay que tener en cuenta la versión del navegador y para obtener HTML5 es necesario actualizar su navegador.

Funciones Útiles para Cadenas de Texto:

substring(inicio, final):

Extrae una porción de una cadena de texto.

El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";

var porcion = mensaje.substring(2); // porcion = "la Mundo"

porcion = mensaje.substring(5); // porcion = "Mundo"

porcion = mensaje.substring(7); // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";

var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

la posición inicio está incluida y la posición final no y se asigna el valor más pequeño al inicio y el más grande al final.

NOTA:

En el substring se colocan dos valores, ejemplo: substring(5,5); para sustraer una porción de un mensaje pero el primer valor que se asigna es el de la Posición Inicial y el Segundo es para determinar cuantos valores se imprimen o se llevan.

Los espacios se empiezan a contar desde 0.

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:

var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

TOMADO DE:

http://librosweb.es/libro/javascript/capitulo_3/funciones_y_propiedades_basicas_de_javascript.html

Símbolos:

++ , aumenta en 1, los dos signos + van seguidos sin ningún espacio en blanco.

a= a+1 = a++
a= a-1 = a--
a= a+10 = a+=10
a= a-10= a-=10

EJERCICIO:

<html>

<head>

</head>

a=10;

a=a+1;

document.write(a + "<br>");

a++;

document.write(a + "<br>");

a=a-1;

document.write(a + "<br>");

a--;

document.write(a + "<br>");

a+=10;

document.write(a + "<br>");

a-=60;

document.write(a + "<br>");

</script>

</html>

EJERCICIO DE ARRAY: (Vector)

<html >

<head>

<title>Ejercicio 3 - Arrays simples</title>

// Array que almacena los 12 meses del año

var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];

// Se muestra el nombre de cada mes

alert(meses[0]);

alert(meses[1]);

alert(meses[2]);

alert(meses[3]);

alert(meses[4]);

alert(meses[5]);

alert(meses[6]);

alert(meses[7]);

alert(meses[8]);

alert(meses[9]);

alert(meses[10]);

alert(meses[11]);

</script>

</head>

<body>

<p>Esta página muestra los 12 meses del año</p>

</body>

</html>

TOMADO DE: http://librosweb.es/libro/javascript/capitulo_11/ejercicio_3.html

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.

TOMADO DE: http://javascript.espaciolatino.com/lengjs/jsgram/op_arit.htm

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>

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>

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

TOMADO DE: http://www.w3schools.com/js/js_operators.asp

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.

TOMADO DE: http://www.htmlpoint.com/javascript/corso/js_07.htm

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>

<head>

<title>practica Jv</title>

</head>

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:

http://www.webtaller.com/construccion/lenguajes/javascript/lecciones/funcion-settimeout-setinterval-javascript.php