INFORMÁTICA III

martes, 26 de marzo de 2019

Etiquetas HTML

<HTML> … </HTML>

Delimita y engloba toda la página web, que consta de cabecera y cuerpo.

Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página.

Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.

Metadatos

La cabecera admite otras muchas etiquetas

Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.

Admite atributos

Formatos de párrafo

El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales.

<H1> ... </H1> o <H2> ... </H2> (hasta 6)

Párrafos que son encabezamientos (con distintos niveles).

...

Párrafos normales.

...

El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ...

Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.

<HR>

Pone una linea horizontal de separación. (admite atributos)

Sangra el párrafo.

Formatos de texto

El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.

Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:

Formatos Físicos:

Negrita: …

Cursiva: …

Subrayado: …

Teletipo: <TT>…</TT>

Tachado: <STRIKE>…</STRIKE>

Grande: <BIG>…</BIG>

Pequeña: …

Superíndice: …

Subíndice: …

Formatos Lógicos:

Cita: <CITE>…</CITE>

Código: <CODE>…</CODE>

Definición: <DFN>…</DFN>

Énfasis: …

Grueso: …

Palabras clave: <KEY>…</KEY>

Ejemplos: <SAMP>…</SAMP>

Usuario: <KBD>…</KBD>

Variables: <VAR>…</VAR>

Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de dentro)

Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):

……… (Correcto)

……… (Incorrecto)

...

Indicación expresa del tipo de letra a usar, en este caso el color

...

Indicación expresa del tipo de letra a usar, en este caso el tamaño

La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE

Caracteres especiales

Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.

Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.

Los caracteres especiales más usados son:

á á

é é

í í

ó ó

ú ú

à à

ñ ñ

< <

> >

& &

ç ç

" “

  espacio en blanco

Listas

(ver apuente 7)

Lista numerada.

Lista no numerada.

Elementos de una lista.

Enlaces

Sirven para acceder desde una página a otra página o a otro recurso disponible (ver apuente 15).

<a href="http://servidor/recurso.html">texto del enlace</a>

Enlace absoluto a una página

<a href="recurso.html">texto del enlace</a>

Enlace relativo a una página

Marcador (enlace interno) dentro de una página

<a href="#marcador">texto del enlace</a>

Enlace a un marcador de la misma página

<a href="recurso.html#marcador">texto del enlace</a>

Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)

<a href="recurso.html" target="_blank">texto del enlace</a>

Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.

Imágenes

Muestra una imagen, que normalmente es de tipo GIF o JPG

Admite atributos

Tablas

Permite organizar la información en tablas.

También sirve para maquetar (dar forma general) al aspecto de la página.

Enlaces de interés de referencia

(apuente) Manual de lenguaje html de nivel inicial, medio y avanzado, de Angel Ricardo Puente Pérez

(aulaclic) Curso de HTML, de AulaClic

(jac) Guía para escribir documentos HTML, de Jose Antonio Camino

HTML guía de referencia rápida, de Jorge Sánchez (formato PDF)

Etiqueta HTML para video (modo básico)

La etiqueta <video> tiene varios atributos a nuestra disposición:

Atributo Valor Descripción

src Dirección URL Video a reproducir. Obligatoria si actua como etiqueta contenedora.

poster Dirección URL Muestra una imagen a modo de presentación.

preload auto | metadata | none Indica como realizar la precarga del video.

mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.

autoplay - Comienza a reproducir el video automáticamente.

loop - Vuelve a iniciar el video cuando finaliza su reproducción (bucle).

muted - Establece el video sin sonido (silenciado).

controls - Muestra los controles de reproducción. Por defecto no se muestran.

width tamaño Indica el tamaño de ancho del video.

height tamaño Indica el tamaño de alto del video.

Etiqueta HTML para audio (modo básico)

La etiqueta <audio> tiene varios atributos a nuestra disposición:

Atributo Valor Descripción

src Dirección URL Audio a reproducir. Obligatoria si actua como etiqueta contenedora.

preload auto | metadata | none Indica como realizar la precarga del audio.

mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.

autoplay - Comienza a reproducir el audio automáticamente.

loop - Vuelve a iniciar el audio cuando finaliza su reproducción (bucle).

muted - Establece el audio sin sonido (silenciado).

controls - Muestra los controles de reproducción. Por defecto no se muestran.

¿Qué es WIX?

WIX es una herramienta online para sitios web con mucha facilidad y gran atractivo, ya que están basados en tecnología flash lo que le entrega a estos sitios, grandes posibilidades de animación y personalización a partir de una serie de diseños predeterminados de planillas a elección.

Con la herramienta que funciona totalmente en línea, se pueden crear sitios web con widgets como por ejemplo el contacto o comentarios, tarjetas de presentación, recursos pedagógicos (como por ejemplo del que anteriormente hablamos aquí), e incluso animaciones en flash para después usar en otro sitio web o en un blog.

La herramienta funciona con drag&drop, lo que quiere decir que con tan sólo arrastrar, cortar y pegar podemos armar el sitio web en minutos, aunque de igual forma permite incorporar formato HTML por si se quiere agregar algún elemento externo.

El registro es sumamente sencillo al igual que el uso de la herramienta, aunque sus comandos están en inglés, pero son muy intuitivos para utilizar, además de que se puede basar un diseño en alguna plantilla de las que ofrece la aplicación con lo que el diseño es mucho más sencillo todavía, o en su efecto, borrar la plantilla y comenzar un sitio desde cero.

Aquí está la página de preguntas frecuentas sobre Wix: http://support.wix.com/index.php/P%C3%A1gina_principal

lunes, 12 de noviembre de 2018

ALGORITMOS EN PSEINT

¿Qué es PSeInt?

PSeInt es una herramienta para asistir a un estudiante en sus primeros pasos en programación. Mediante un simple e intuitivo pseudolenguaje en español (complementado con un editor de diagramas de flujo), le permite centrar su atención en los conceptos fundamentales de la algoritmia computacional, minimizando las dificultades propias de un lenguaje y proporcionando un entorno de trabajo con numerosas ayudas y recursos didácticos.

¿Qué es un pseudocodigo en PSeInt?

La palabra pseudocódigo formada por el prefijo “pseudo“, que según el diccionario de la RAE (Real Academia Española) significa “falso“, de ahí parte para que también sea conocido como “falso lenguaje”.

Dentro de la programación se basa en un lenguaje de programación real, donde se permite expresar las instrucciones en un lenguaje común (ejemplo: español, inglés u otro idioma) para facilitar la escritura y lectura, debido a que está en lenguaje común si requiere una modificación es fácil hacerla. La escritura sólo puede ser comprendida por el ser humano y no por la máquina, por ende, tampoco puede ejecutarla. La finalidad de un pseudocódigo es representar la solución a un algoritmo (problema) de la forma más detallada posible, utilizando acciones sucesivas. Según Analía Lanzillotta: “Considerado como un lenguaje falso el pseudocódigo, que es un lenguaje intermedio entre nuestro lenguaje y el de programación, debido a que quien lo utiliza se guía por una serie de normas, pero sin llegar a usar una estructura tan rígida como la del lenguaje de programación”.

En otras palabras, el pseudocódigo es un lenguaje simplificado entre el programador y la máquina, hecho por el programador en su propio idioma, para describir un algoritmo y poder comprender mejor la estructura de dicho programa, donde el lenguaje simplificado no puede ser compilado, ejecutado ni corrido por la máquina. Siendo una herramienta que se encuentra previa al lenguaje formal de programación.

Tipos de datos que utiliza Pseint

Tipo Real: Una variable de tipo real admite datos numéricos, que pueden ser enteros y/o con punto decimal.

Tipo Entero: Es una especialización que sólo permite almacenar valores enteros; cualquier valor no entero que se lea o asigne en una variable de este tipo será truncado.

Tipo Cadena: Es una secuencia ordenada (de longitud arbitraria, aunque finita) de elementos que pertenecen a un cierto lenguaje formal o alfabeto análogas a una fórmula o a una oración.

Tipo Carácter: Las variables de caracteres se usan para almacenar valores alfabéticos, en particular letras solas.

Tipo Lógico: Una variable de tipo LOGICO sólo puede tomar los valores VERDADERO y FALSO, pero cuando se lee una variable ya definida como lógica, el usuario puede ingresar también las abreviaciones V y F, o 0 y 1.

Diagrama de flujo en Pseint

Es un programa que te genera el diagrama de flujo de un pseudocódigo y permite exportar a un lenguaje. Permite la ejecución pasó a paso (muy útil para bucles).

Estructura Se-Entonces en Pseint

La secuencia de instrucciones ejecutadas por la instrucción Si-Entonces-Sino depende del valor de una condición lógica.

Ejemplo 1

Al ejecutarse esta instrucción, se evalúa la condición y se ejecutan las instrucciones que correspondan: las instrucciones que le siguen al Entonces si la condición es verdadera, o las instrucciones que le siguen al Sino si la condición es falsa. La condición debe ser una expresión lógica, que al ser evaluada retorna Verdadero o Falso.

La cláusula Entonces debe aparecer siempre, pero la cláusla Sino puede no estar. En ese caso, si la condición es falsa no se ejecuta ninguna instrucción y la ejecución del programa continúa con la instrucción siguiente.

Ejemplo 2

Si <condición>

Entonces

<instrucciones>



            Sino

                  <instrucciones>

      FinSi 





Estructura según en Pseint

Es frecuente tener que comprobar más de una condición a la vez, o bien varias condiciones consecutivas. En concreto, un caso especialmente habitual es el de que una variable pueda un valor de entre varios. Por ejemplo, en el sistema de notas escolares español clásico, ciertas notas numéricas tienen "nombres" asociados: un 5 es un aprobado, un 9 y un 10 son sobresaliente, etc. Si queremos hacer un programa que convierta de la nota numérica a su equivalente escrito, podríamos emplear varias órdenes IF, una tras la otra. Pero en muchos lenguajes de programación (y por tanto, también en muchas variantes de pseudocódigo) existe una alternativa más compacta y más legible: la orden "SEGUN". Esta órden permite hacer unas cosas u otras según el valor que tome una variable. Su uso sería así:


Segun variable Hacer
  valor1: pasos_a_dar_si_es_el_valor1
  valor2: pasos_a_dar_si_es_el_valor2
  valor3: pasos_a_dar_si_es_el_valor3
De Otro Modo:
  pasos_a_dar_si_es_otro_valor
FinSegun



El bloque "De Otro Modo" es opcional: si detallamos todos los valores posibles, no sería necesario utilizarlo.

El número de valores que podemos probar es indefinido: no tiene por qué ser 3, sino que pueden ser menos casos o muchos más.

Según la variante de pseudocódigo (o el lenguaje de programación) que empleemos, puede haber restricciones en el tipo de datos que es aceptable. Por ejemplo, en el caso de PseInt, la variable tiene que tener un valor numérico, no puede ser un texto.







Bibliografía:

http://pseint.sourceforge.net/

https://michelletorres.mx/que-es-el-pseudocodigo/

https://ulisesorea.wordpress.com/2016/10/02/tipos-de-datos-en-pseint/

https://tic2uribarri.blogspot.com/2017/11/programa-para-diagramas-de-flujo-pseint.html

http://gerbermonterroso.blogspot.com/



http://www.aprendeaprogramar.com/mod/resource/view.php?id=403

martes, 14 de agosto de 2018

FUNDAMENTOS DE PROGRAMACIÓN

¿En qué consiste la resolución de problemas?

El proceso de solucionar problemas implica una serie de capacidades y habilidades del pensamiento que es importante desarrollar y evaluar en la preparación académica. La resolución de problemas es una actividad cognitiva que consiste en proporcionar una respuesta-producto a partir de un objeto o de una situación.

Resultado de imagen para en que consiste la resolucion de problemas

Planteamiento de solución de problemas según POYLA

Paso 1: Entender el problema

¿Cuál es la incógnita?, ¿Cuáles son los datos?
¿Cuál es la condición? ¿Es la condición suficiente para determinar la incógnita? ¿Es insuficiente? ¿Redundante? ¿Contradictoria?

Paso 2: Configurar un plan

¿Te has encontrado con un problema semejante? ¿O has visto el mismo problema planteado en forma ligeramente diferente?
¿Conoces algún problema relacionado con éste? ¿Conoces algún teorema que te pueda ser útil? Mira atentamente la incógnita y trata de recordar un problema que sea familiar y que tenga la misma incógnita o una incógnita similar.
He aquí un problema relacionado al tuyo y que ya has resuelto ya. ¿Puedes utilizarlo? ¿Puedes utilizar su resultado? ¿Puedes emplear su método? ¿Te hace falta introducir algún elemento auxiliar a fin de poder utilizarlo?
¿Puedes enunciar al problema de otra forma? ¿Puedes plantearlo en forma diferente nuevamente? Recurre a las definiciones.
Si no puedes resolver el problema propuesto, trata de resolver primero algún problema similar. ¿Puedes imaginarte un problema análogo un tanto más accesible? ¿Un problema más general? ¿Un problema más particular? ¿Un problema análogo? ¿Puede resolver una parte del problema? Considera sólo una parte de la condición; descarta la otra parte; ¿en qué medida la incógnita queda ahora determinada? ¿En qué forma puede variar? ¿Puedes deducir algún elemento útil de los datos? ¿Puedes pensar en algunos otros datos apropiados para determinar la incógnita? ¿Puedes cambiar la incógnita? ¿Puedes cambiar la incógnita o los datos, o ambos si es necesario, de tal forma que estén más cercanos entre sí?
¿Has empleado todos los datos? ¿Has empleado toda la condición? ¿Has considerado todas las nociones esenciales concernientes al problema?

Paso 3: Ejecutar el plan

Al ejecutar tu plan de la solución, comprueba cada uno de los pasos
¿Puedes ver claramente que el paso es correcto? ¿Puedes demostrarlo?

Paso 4: Examinar la solución obtenida

¿Puedes verificar el resultado? ¿Puedes el razonamiento?
¿Puedes obtener el resultado en forma diferente? ¿Puedes verlo de golpe? ¿Puedes emplear el resultado o el método en algún otro problema?

Método de Pólya para resolver problemas de programación

Para resolver un problema se necesita:

Paso 1: Entender el problema

¿Cuáles son las argumentos? ¿Cuál es el resultado? ¿Cuál es nombre de la función? ¿Cuál es su tipo?
¿Cuál es la especificación del problema? ¿Puede satisfacerse la especificación? ¿Es insuficiente? ¿Redundante? ¿Contradictoria? ¿Qué restricciones se suponen sobre los argumentos y el resultado?
¿Puedes descomponer el problema en partes? Puede ser útil dibujar diagramas con ejemplos de argumentos y resultados.

Paso 2: Diseñar el programa

¿Te has encontrado con un problema semejante? ¿O has visto el mismo problema planteado en forma ligeramente diferente?
¿Conoces algún problema relacionado con éste? ¿Conoces alguna función que te pueda ser útil? Mira atentamente el tipo y trata de recordar un problema que sea familiar y que tenga el mismo tipo o un tipo similar.
¿Conoces algún problema familiar con una especificación similar?
He aquí un problema relacionado al tuyo y que ya has resuelto. ¿Puedes utilizarlo? ¿Puedes utilizar su resultado? ¿Puedes emplear su método? ¿Te hace falta introducir alguna función auxiliar a fin de poder utilizarlo?
Si no puedes resolver el problema propuesto, trata de resolver primero algún problema similar. ¿Puedes imaginarte un problema análogo un tanto más accesible? ¿Un problema más general? ¿Un problema más particular? ¿Un problema análogo?
¿Puede resolver una parte del problema? ¿Puedes deducir algún elemento útil de los datos? ¿Puedes pensar en algunos otros datos apropiados para determinar la incógnita? ¿Puedes cambiar la incógnita? ¿Puedes cambiar la incógnita o los datos, o ambos si es necesario, de tal forma que estén más cercanos entre sí?
¿Has empleado todos los datos? ¿Has empleado todas las restricciones sobre los datos? ¿Has considerado todas los requisitos de la especificación?

Paso 3: Escribir el programa

Al escribir el programa, comprueba cada uno de los pasos y funciones auxiliares.
¿Puedes ver claramente que cada paso o función auxiliar es correcta?
Puedes escribir el programa en etapas. Piensas en los diferentes casos en los que se divide el problema; en particular, piensas en los diferentes casos para los datos. Puedes pensar en el cálculo de los casos independientemente y unirlos para obtener el resultado final
Puedes pensar en la solución del problema descomponiéndolo en problemas con datos más simples y uniendo las soluciones parciales para obtener la solución del problema; esto es, por recursión.
En su diseño se puede usar problemas más generales o más particulares. Escribe las soluciones de estos problemas; ellas puede servir como guía para la solución del problema original, o se pueden usar en su solución.
¿Puedes apoyarte en otros problemas que has resuelto? ¿Pueden usarse? ¿Pueden modificarse? ¿Pueden guiar la solución del problema original?

Paso 4: Examinar la solución obtenida

¿Puedes comprobar el funcionamiento del programa sobre una colección de argumentos?
¿Puedes comprobar propiedades del programa?
¿Puedes escribir el programa en una forma diferente?
¿Puedes emplear el programa o el método en algún otro programa?

Definición de algoritmo de solución

Un algoritmo consiste en una lista ordenada de operaciones que tienen el propósito de buscar la solución a un problema en matemática, informática y disciplinas afines.

Para las ciencias de la matemática y de la computación, un algoritmo es una lista que, dado un estado inicial y una entrada, propone pasos sucesivos para arribar a un estado final obteniendo una solución. Sin embargo, el algoritmo no es excluyente de las ciencias duras o matemáticas. También en la vida cotidiana se emplean este tipo de operatorias casi sin notarlo: por ejemplo, en los instructivos o manuales de usuario que incluyen ejemplos de resolución de problemas técnicos.

El empleo de algoritmos no es exclusivamente propio de operaciones complejas o ligadas al ámbito de la investigación científica. Al desarrollar un programa de computación, por citar un ejemplo, a menudo estamos desarrollando o implementando un método para resolver algún problema. En definitiva, se trata de una relación problema-solución que tiene lugar a través de la informática. Un algoritmo típico tiene carácter finito, es preciso, tiene tanto una entrada como una salida y es eficaz en la resolución de un problema.

¿Qué es un diagrama de flujo?

Un diagrama de flujo, también llamado Flujograma de Procesos o Diagrama de Procesos, representa la secuencia o los pasos lógicos (ordenados) para realizar una tarea mediante unos símbolos. Dentro de los símbolos se escriben los pasos a seguir. Un diagrama de flujo debe proporcionar una información clara, ordenada y concisa de todos los pasos a seguir.

Por lo dicho anteriormente, podríamos decir que: "Un diagrama de flujo es una representación gráfica o simbólica de un proceso".

El proceso o pasos que representa el diagrama de flujo puede ser de cualquier tipo, desde los pasos para freir un huevo, como luego veremos, hasta los pasos para realizar un enorme programa informático.

Nota: En esta página encontrarás varios diagramas de flujo explicados y resueltos, pero cuando tengas claro como se hacen los diagramas de flujo, te recomendamos que veas el siguiente enlace donde encontrarás más diagramas resueltos: Ejemplos de Diagramas de Flujo. En ese enlace te presentamos 15 diagramas de flujo resueltos.
Como Hacer un Diagrama de Flujo Normalmente para realizar un diagrama de flujo primero se hace lo que se llama el algoritmo. Un algoritmo es una secuencia de PASOS LÓGICOS a seguir para resolver un problema de forma escrita.

Un ejemplo para cocinar un huevo para otra persona sería:

- Pregunto si quiere el huevo frito.
- Si me dice que si, lo frio, si me dice que no, lo hago hervido.
- Una vez cocinado le pregunto si quiere sal en el huevo.
- Si me dice que no, lo sirvo en el Plato, si me dice que si, le hecho sal y después lo sirvo en el plato.

Si te fijas los pasos no pueden cambiar su posición. Sería imposible preguntarle si lo quiere frito después de haberlo hervido, por ejemplo. Es muy importante que los pasos seán una secuencia lógica y ordenada.

Ahora que ya sabemos todos los pasos, mediante el algoritmo, podemos hacer un esquema con estos pasos a seguir. Este esquema será el Diagrama de Flujo.

Si uno tiene experiencia puede prescindir del algoritmo escrito pero siempre tendremos que tenerlo en mente para hacer el diagrama de flujo sin equivocarnos. Más abajo te dejamos varios ejemplos de diagramas de flujo.

Bibliografía

Recuperado de:

hadoc.azc.uam.mx/evaluacion/solucion.htm

http://www.glc.us.es/~jalonso/vestigium/el-metodo-de-polya-para-resolver-problemas/

https://www.definicionabc.com/ciencia/algoritmo.php

http://www.areatecnologia.com/diagramas-de-flujo.htm