Carpeta virtual Informática: Conceptos

AREA Y MAP:

PROPIEDADES TOP, RIGHT, BOTTOM Y LEFT

Estas propiedades nos permiten definir el desplazamiento de la posición de un elemento respecto a un origen de coordenadas y el origen de coordenadas que se toma.

PROPIEDADES CSS top, right, bottom y left
Función de la propiedad	Permiten definir el desplazamiento de un elemento y el origen de coordenadas que se tomará para el mismo.
Valor por defecto	Auto
Aplicable a	Elementos que están posicionados (no aplica si la posición es static).
Valores posibles para estas propiedades	auto (no hay desplazamiento especificado y como origen de coordenadas se toma la esquina superior izquierda del elemento padre)
	Una unidad de medida relativa (se admiten porcentajes).
	Una unidad de medida absoluta.
	inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com	#menu1 { position: relative; top: 40px; left: 2em; } #moduloEGM { position: absolute; bottom: 5%; left: 30px; }

Posicion relativa y absoluta:

El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top,right, bottom y left. La interpretación de los valores de estas propiedades es mucho más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del elemento contenedor.

El estándar CSS considera que el posicionamiento relativo es un caso particular del posicionamiento normal, aunque en la práctica presenta muchas diferencias.

El posicionamiento relativo desplaza una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right,bottom y left.

- Almacena informacion: TYPE - cajas de texto.

- input : Captura informacion

-onblur: cuando se pierde el foco

-ondblclick: dobre click.

- onkeydown: Presionar tecla hacia abajo.

-onkeup: Cuando se deja de presionar la tecla

-Value: algun valor.

-password : contraseñas en paginas web.

-hidden: Oculta las cajas de texto, es una herramienta de utilidad para el programador.

-Checked: Activado.

-Disabled readonly: Asegura para que no se pueda señalar.

· Funcion confirm en javascript:

El método confirm pertenece a las ventanas de dialogo o modales en javascript, este método nos permite mostrar en pantalla una ventana emergente con una pregunta a la que el usuario puede responder si (presionando aceptar) o no (presionando cancelar), veamos de que trata.

confirm("Pregunta a mostrar?");

// Guardamos el resultado en una variable

var confirmacion = confirm("Esta seguro de salir de la pagina?");

// Tomamos la decisión

if(confirmacion){

// Nos quedamos en la pagina

} else {

// Salimos de la pagina

}

// Tomamos la decisión

if(confirm("Esta seguro de salir de la pagina?")){

// Nos quedamos en la pagina

} else {

// Salimos de la pagina

}

Ejemplo:

if (confirm('Your question')) {

// do things if OK

}

<input type=button value="Try it now"

onClick="if(confirm('Format the hard disk?'))

alert('You are very brave!');

</form>

else alert('A wise decision!')">

· window.open:

Se utiliza para abrir una nueva ventana en una pagina web.

<HTML>

<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>

<BODY>

<INPUT TYPE="Button" NAME="Boton1" VALUE="Abrir"

onClick="window.open('http://sestud.uv.es/manual.esp/', 'Prueba',

'top=100, left=100, width=300, height=300, location=no, status=yes, ' +

'toolbar=no, menubar=no, scrollbars=no, resizable=no')”;

</FORM>

</BODY>

</HTML>

· Window.close:

Cierra una ventana. Por ejemplo:

<HTML>

<HEAD><TITLE>Objetos del navegador</TITLE></HEAD>

<BODY>

<INPUT TYPE="Button" NAME="Boton2" VALUE="Cerrar"

onClick="prueba.close()">

</FORM>

</BODY>

</HTML>

· FECHA Y HORA EN JAVASCRIPT

-INSERTAR FECHA BÁSICA (Y HORA OPCIONAL) CON EL FORMATO DD/MM/AAAA:

-HORA:

-INSERTAR FECHA CON NOMBRE DEL MES (Y NOMBRE DEL DÍA OPCIONAL):

*Versión con nombre del día de la semana:

-MOSTRAR FECHA EN HOJA DE CALENDARIO:

-MOSTRAR FECHA RESALTADA EN CALENDARIO MENSUAL:

-MOSTRAR LA HORA ACTUAL EN TIEMPO REAL:

· LISTAS DESPLEGABLES:

La etiqueta <select> sirve para crear listas desplegables html (que por cierto no obligatoriamente tiene que ser desplegable), y cada uno de los elementos de esa lista son especificados por las etiquetas OPTION u OPTGROUP dentro de ella.

Los atributos de la etiqueta select son:

§ name: Representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.

§ disabled: Crea un lista desactivada, que aparece atenuada

§ size: Si un elemento SELECT se presenta como una lista con desplazamiento (“scrolled list box”), este atributo especifica el número de filas de la lista que deberían ser visibles al mismo tiempo.No es preciso que los agentes
visuales presenten un elemento SELECT como una lista (“list box”); pueden usar cualquier otro mecanismo, como por ejemplo un menú desplegable (“drop-down menu”).

§ multiple: Permite al usuario seleccionar varios campos de la lista

Por cada opción a desplegar en la lista se utiliza la etiqueta <option> la cual puede tener como propiedades selectedy value además de cualquiera de los atributos inherentes de los objetos html, que puedes revisar en esta entrada.

Veamos pues un sencillo ejemplo de una lista desplegable con sus elementos.

<option value="1">Windows Vista</option>

<option value="2">Windows 7</option>

<option value="3">Windows XP</option>

<option value="10">Fedora</option>

<option value="11">Debian</option>

</select>

Como puedes ver los values no necesariamente son texto, y cuando son números, no necesariamente van en orden.
De hecho, debes siempre recordar que el value será el dato que se enviará cuando el formulario sea enviado.

En el ejemplo anterior, los sistemas operativos windows y linux estan revueltos, pero esto puede solucionarse.
Con la etiqueta <optgroup> se pueden crear grupos de opciones para así clasificarlos:

<option selected value="0"> Elige una opción </option>

<option value="1">Windows Vista</option>

<option value="2">Windows 7</option>

<option value="3">Windows XP</option>

</optgroup>

<option value="10">Fedora</option>

<option value="11">Debian</option>

</optgroup>

</select>

Si lo que se desea es que esta no sea una lista desplegable, entonces se genera un código indicando el size de la lista:

<option selected value="0"> Elige una opción </option>

<option value="1">Windows Vista</option>

<option value="2">Windows 7</option>

<option value="3">Windows XP</option>

</optgroup>

<option value="10">Fedora</option>

<option value="11">Debian</option>

</optgroup>

</select>

PSEUDOCODIGO

Es una herramienta utilizada para el diseño de programas que le permite al programador expresar sus pensamientos de una forma clara utilizando un lenguaje natural y mostrando el orden de ejecucion de las sentencias del programa sin ninguna ambiguedad.

Ejemplo

Para hallar el área de un triangulo, conocida la base y la altura.
Definición del problema:

Entrada: base*altura Proceso: base*altura/2 Salida: área
Área de un triángulo.

Inicio
Declaración de variables
base, altura, área
Escribir ("Ingrese el valor de base y altura respectivamente")
Leer (base, altura)
Proceso
a=base*altura/2
Salida
Escribir ("El resultado es: ", área)
Fin

Ejemplo:

Hacer un Pseudocódigo que despliegue las tablas de multiplicar.

Inicio
Variables i,k,r.
para i=1 hasta 10.

para k=1 hasta 10.
r:=i*k.
Imprimir i," x",k," = ",r.
k=k+1.
i=i+1.
Fin.

· Condiciones del Pseudocódigo:

Estas condiciones se utilizan cuando el usuario programa en un lenguaje de alto nivel. Comenzaremos con la más famosa, la sentencia SI - SINO - FINSI

si (condicion1=valor) { ejecutar acción } sino { ejecutar acción } finsi

En esta sentencia tenemos que si se cumple una condición, se ejecutará determinado proceso, en caso contrario, se ejecutará otro.

· Ejemplos:

En esta sección puede observar ejemplos de pseudocódigos válidos en PSeInt, así como también sus correspondientes diagramas de flujo (en cualquiera de las tres formas soportadas). Recuerde que el lenguaje de PSeInt puede adaptarse a diferentes perfiles. A modo de ejemplo se incluyen los algoritmos para dos perfiles diferentes, uno con reglas flexibles, y otro con reglas estrictas.

· Suma: Este es el ejemplo más simple. Muestra cómo cargar dos números de dos variables, calcular la suma de los mismos y mostrarla en pantalla

· Mayores: Busca los dos mayores de una lista de N datos

· Coloquial: En este ejemplo se muestran algunas de las variantes que se pueden utilizar con el perfil de lenguaje Flexible para que el pseudocódigo se asemeje más al lenguaje coloquial

· Subprocesos: Ejemplo básico que ilustra la sintaxis para declarar e invocar nuevas funciones en pseudocódigo

· AdivinaNumero: Sencillo juego en el que el usuario debe adivinar un número aleatorio

· Promedio: Ejemplo básico de uso de un acumulador y la estructura de control PARA para calcular el promedio de un conjunto de valores

· Triangulo: Este algoritmo determina a partir de las longitudes de tres lados de un triángulo si corresponden a un triángulo rectángulo (para utiliza la relación de Pitágoras, tomando los dos lados de menor longitud como catetos), y en caso afirmativo informa el área del mismo

· OrdenaLista: Este ejemplo almacena una lista de nombres en un arreglo y luego los ordena alfabéticamente. El método de ordenamiento es relativamente simple. Para la entrada de datos se utiliza una estructura MIENTRAS, sin saber a priori la cantidad de datos que se ingresarán

· Modulo: Ejemplo trivial del uso del operador de módulo (MOD o %)

· Menu: Ejemplo simple de menú de opciones, con las estructuras Repetir-Hasta Que y Según

· Digitos: Separa los dígitos de un número entero utilizando el operador módulo

· Resolvente: Utiliza la fórmula resolvente para determinar las raíces de una ecuación de segundo grado a partir de sus tres coeficientes, y las informa adecuadamente según su tipo (reales iguales, reales distintas, imaginarias)

· Primos: Calcula iterativamente los N primeros números primos

· Factorizacion: Ejemplo de algoritmo para descomponer un número en sus factores primos

· Cadenas: Muestra la utilización de las funciones de cadenas para contar las vocales de una frase

· Para: En este ejemplo se recorre un arreglo utilizando las tres variantes de la estructura Para

· Potencia: Ejemplo de una función recursiva para calcular una potencia

· Promedio2: Ejemplo de cómo crear subprocesos que reciban arreglos como argumento

· Misil: Ejemplo de animación con códigos ASCII y la instrucción Esperar

· Romanos: Muestra como convertir números enteros a notación romana utilizando arreglos

· Hanoi: Implementa el conocido juego de las torres de Hanoi en pseudocódigo

· TaTeTi: Algoritmo para el juego del TaTeTi

Carpeta virtual Informática

miércoles, 20 de mayo de 2015

Conceptos

No hay comentarios:

Publicar un comentario