lunes, 14 de noviembre de 2016



[2016-08-11]

CLASE 36:

Se realizó el acumulativo. Exenta; mi nota es 100.

Finalizaron las calificaciones de los proyectos y se determinaron las notas según el trabajo. Se revisaron las notas del cuarto bimestre y se acordaron por medio de los acuerdos que se establecieron por el docente y los estudiantes.

Se dan Horarios de Nivelación y las condiciones requeridas:

Horario: 15 de Noviembre de 2016.
Noveno A: 2:45 p.m.
Noveno B: 3:45 p.m.


Tema: Html, Javascript
Tipo de Evaluación: 100% Practica.

Nota: El día de la evaluación debe llevar en un cd(Tanto con 9a como 9b, debe entregar el cd y la memoria Usb a las 2:45 p.m.), su proyecto del periodo, el cd debe estar marcado con su primer nombre, primer apellido, y con la palabra Nivelación 1.

1. Verifique que realmente su cd tiene información. Sólo se admite este sistema de          entrega.
2. Entregar el cd marcado basado en las instrucciones anteriores
3. Su proyecto a entregar en Cd, debe tener todos los criterios que indique en la publicación de Noviembre 01.

Nota: Para todos los estudiantes que presentarán la Nivelación: Lo único de esa publicación(Nov. 01), lo que no debe realizar son los ejercicios adicionales

Forma de Calificación:

La evaluación se basará con la información que Ud. construyo para su proyecto y con los ejercicios que indique en esta publicación(deben estar solucionados en javascript en su memoria Usb y en algoritmos o pseudocódigo en su cuaderno de apuntes, dicho cuaderno debe estar actualizado con información del periodo 3 y 4 que es el tema básico de html y javascript respectivamente.)

    
     Su cuaderno de apuntes debe estar debidamente marcado.

     
    TOMADO DE:           

     

domingo, 6 de noviembre de 2016




[2016-01-11]

CLASE 35:

Se inicia la calificación de los proyectos sobre los templates que cada estudiante realizó con su correspondiente tema, el cual fue asignado por el Docente y propuesto por los alumnos.

Teniendo en cuenta los siguientes CRITERIOS DE TRABAJO:

  1. Su sitio web debe trabajar sin tener Internet.
  2. El <title> en todas sus páginas debe contener su Primer Nombre y su primer apellido.
  3. Debe tener un módulo llamado "derechos.html", donde debe tener: Nombres y apellidos completos, foto de caracter serio, grado/grupo actual, indicar en 3 líneas por que le gusta el tema del trabajo seleccionado.
  4. Todas las páginas de su proyecto deben tener el diseño de su template seleccionado.
  5. Todas las páginas deben tener la posibilidad de navegar hacia cualquier punto de su sitio web.
  6. Debe tener un módulo de nombre personajes.html, donde se mencionan los personajes de su tema.
    1. Cada personaje debe tener una imagen y un texto alusivo a él.
    2. (OPCIONAL)Al dar click sobre su imagen debe dirigirse a otra página donde debe visualizarse la misma imagen seleccionada y el texto alusivo al personaje; opcional en esta página si se desea visualizar mas imagenes o videos se puede hacer.
    3. Debe visualizar a los personajes iniciando de los principales hasta los secundarios.
    4. Lo máximo en personajes que debe visualizar es hasta 12. Si desea presentar más, lo puede realizar.
  7. Debe tener copias de seguridad, ya sea en memoria usb personal( sólo suya, no compartida ), en una nube personal ( sólo suya, no compartida ).

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

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

Celsius:


<html>
<head>
<tittle></tittle>
</head>

<script>
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>

<body></body>
</html>

Farenheith: 

<html>
<head>
<tittle></tittle>
</head>

<script>
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>

<body></body>
</html>

Leer n_u:


<html>
<head>
<tittle></tittle>
</head>

<script>
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>

<body></body>
</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);


EJERCICIO DE RAÍZ CUADRADA:

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

x=-9;
if(x<0){
x=x*-1;
document.write(Math.sqrt(x)+ "raiz imaginaria <br>");
}
else{
document.write(Math.sqrt(x)+"<br>");
}
</script>
<body></body>
</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:

 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>

<script>
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>

<body></body>
</html>


EJERCICIO DE ARRAY: (Vector)

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 3 - Arrays simples</title>
<script type="text/javascript">
// 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>




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>