viernes, 2 de agosto de 2019

Recurso Multi Didáctico Super Práctico Animado e Interactivo

Mira la pizarra y Caza el botón !  - aprendizaje por reconocimiento de patrones.


Pueden variar entre aprender letras, numeros, signos de puntuacion, simbolos matematicos, figuras geometricas, o silabas. Y tambien mezclarlos.

Las areas blancas son las pizarras o tableros y los elementos bajo cada pizarra que se aprecian con sombra son los botones. El que esten ahi no implica relacion, pues aunque ciertamente la dinamica se basa en parejas de un boton con una pizarra, estas estan revueltas.

El estilo en el que se dibuja lo puesto en la pizarra tambien cambia de una a otra de modo que quien aprende se fije no en las figuras sino en los patrones que describen las figuras, asi que para empatar correctamente una pareja se debe extraer mentalmente la idea general de los trazos en el pizarron o pizarra y no solo fijarse y retener una imagen simplemente, sino entender las lineas y con ello repasar o memorizar el patron en el lienzo o espacio.

Otra idea brevemente instanciada en el lenguaje Visual Basic.



Luego de haber sido alentado a investigar mas que lo propio de las tareas del curso que se nos estaba enseñando, y descubriendo asi cada vez un tanto mejor las cosas que un lenguaje de programacion posibilita  inadvertidamente sucedan a lo largo de nuestras rutinas cotidianas del diario vivir, junto con la flexibilidad creativa que es caracteristica de la realidad digital, me encuentro que efectivamente todo esto es interesante. Pero lo verdaderamente importante fue que aquel pequeño gran desafio con que se nos inauro en esto de la informatica de las aplicaciones, adicionalmente a forzarnos a investigar mas y mejor, era para obligarnos a pensar en  ¿Qué habriamos de programar? es decir cual proposito tendria nuestro programa puesto que se nos permitio la libertad de buscar una idea propia a desarrollar. De ello hice a un lado esta otra ocurrencia que me llamo la atencion en su momento y auque me decante por presentar al colegio la otra, retome casi de inmediato esta para darle algun seguimiento ya que me parecio un buen ejercicio de practica a realizar por mi cuenta. Luego de varios años hasta ahora que me hallaba revisando las carpetas de un disco lo vuelvo a ver y se los comparto a continuacion para que le echen un vistazo:

Orale ¡Pero ya! , un juego que es una especie de carrera de relevos en contra del reloj donde gana quien mande fuera todo antes que su contrincante, es decir quien vacie su area de juego primero. Cada elemento tiene una velocidad de movimiento distinta asi que no se confien. Debe asistir a su alumno proveyendo la pronunciacion del caracter o lo que se esta aprendiendo.

archivo ejecutable 32bits 60KB _ MIR AZA

  • en caso de que tu sistema de proteccion te pida confirmacion o te notifique respecto a la descarga o ejecucion es normal puesto que no es formal sino algo domestico, una ejercicio en años de colegio realmente. para mayor confianza pongo tambien el promedio obtenido por el analisis de seguridad por parte de la empresa VirusTotal [resultados de la cisterna AV]

---promedio que es 3 en 68, donde todas las compañias de seguridad importantes hacen parte de los 65 votos restantes positivos es decir ni una de las grandes confundio el archivo como otra cosa que inofensivo.



martes, 30 de julio de 2019

Juego clasico: "Tres en linea", remanente Visual Basic

Tambien conocido como Totito




Dias atras mientras revisaba las carpetas de una memoria usb, me encontre con esta primera, y la unica, version de un proyecto escolar que fue improvisado en todo sentido pues se nos asigno a tan solo inicios del ciclo estudiantil y contrario a lo que se podria pensar era muy breve lo expuesto pero la ganancia de completar este desafio sorpresa fue sin duda alguna entendida por el alumnado...

Me acuerdo que dicha tarea tuve que comenzarla dos veces porque accidentalmente luego de haber finalizado la confeccion del programa, elimine los archivos que tenian el codigo fuente del ahora primer intento en realizar mi tributo digital a este juego. No puedo recordar por que estuve tan seguro de presionar la opcion "eliminar" ni que lamentos o escenarios desolados pasaron de lado a lado por mi ser atonito, transparente e inexistente ante lo que corroboraban mis ojos mientras mi mano agotaba con cada click del raton los rincones que se me ocurrian para buscar esperando hallar la carpeta magica del proyecto que vi crecer desde que era una idea no mas. Si tan solo hubiese sabido en aquel entonces igual de bien como sabia que aparte de "suprimir" se puede presionar esa junto con "shift" para estar al tu por tu con el engreido sistema operativo... Quiza habria sido distinto sabiendo que existian programas de recuperacion de archivos.

Asi que el programa que dejo en la dirreccion del enlace es aquel segundo intento que es distinto a mi original perdido para siempre jajaja. Sin mas preambulos dale un vistazo a una antiguedad del baul de los recuerdos:

archivo ejecutable 32bits 64KB _ tres en linea
  • en caso de que tu sistema de proteccion te pida confirmacion o te notifique respecto a la descarga o ejecucion es normal puesto que no es formal sino algo domestico, una tarea del colegio realmente. para mayor confianza pongo tambien el promedio obtenido por el analisis de seguridad por parte de la empresa VirusTotal [resultados de la cisterna AV]
---promedio que es 1 en 67, donde todas las compañias de seguridad importantes hacen parte de los 66 votos restantes positivos es decir ni una de las grandes confundio el archivo como otra cosa que inofensivo.

por cierto justo despues de resignarme a que efectivamente habia perdido el programa y todo el tiempo invertido en realizarlo, solamente rei y rei y si me volvia a acordar me volvia a reir.

miércoles, 9 de enero de 2019

Un DISEÑO VISUAL de "Caja Flexible CSS"

Tutorial de HTML y principalmente su version 5

Flexbox (cajas flexibles) de CSS

Flexbox es una nueva modalidad de diseño visual que trae CSS3.

El uso de flexbox asegura que los elementos se comporten predeciblemente cuando el diseño visual de la página se encuentre con o deba adaptarse a diferentes tamaños de pantalla y diferentes dispositivos de visualización. Desventajas: no funciona en IE10 y anteriores.

Aprenderás mas de flexbox (caja flexible) de CSS en un capitulo futuro.

Ejemplo con flexbox:

Comidas del Mundo

Pastel de Queso

El pastel de queso es uno de los postres más comunes del mundo y, quizás, uno de los más antiguos que utilizan lácteos, diferentes de la leche. El primer registro que hace mención al pastel de queso viene desde los antiguos Juegos Olímpicos griegos. Marcus Porcius Cato (o Cato "el viejo") escribió la receta para su preparación en uno de sus tantos libros de cocina Romana, llamados "De Agricultura".

Derecho de autor © Abuelitas.com

Reduce bastante el ancho de la ventana de tu navegador de internet para apreciar en acción al código de abajo.


El código HTML y CSS que se haya tras este ejemplo:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<style> 
div#pizarrón-flexible {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}
div#pizarrón-flexible > * { 
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}
article#tramo2 {
    text-align: left;
}
header.extremo2 {
    background: black;
 color: white;
}
footer.extremo2 {
    background: #aaa;
 color: white;
}
nav#canoa2 {
    background: #eee;
}
nav#canoa2 ul {
    list-style-type: none;
    padding: 0;
}
nav#canoa2 ul a {
    text-decoration: none;
}

@media all and (min-width: 768px) {
    nav#canoa2 {
     text-align: left;
  -webkit-flex: 1 auto;
  flex: 1 auto;
  -webkit-order: 1;
  order: 1;
 }
    article#tramo2 {
     -webkit-flex: 5 0px;
  flex: 5 0px;
  -webkit-order: 2;
  order: 2;
 }
    footer.extremo2 {
     -webkit-order: 3;
  order: 3;
 }
}
</style>
</head>
<body>
<div id="pizarrón-flexible">

<header class="extremo2">
   <h1>Comidas del Mundo</h1>
</header>
<nav id="canoa2">
  <ul>
    <li><a href="#">Pastel de Queso</a></li>
    <li><a href="#">Otra comida</a></li>
    <li><a href="#">Otra comida mas</a></li>
  </ul>
</nav>
<article id="tramo2">
  <h1>Pastel de Queso</h1>
  <p>El pastel de queso es uno de los postres más comunes del mundo y, quizás, uno de los más antiguos que utilizan lácteos, 
  diferentes de la leche. El primer registro que hace mención al pastel de queso viene desde los antiguos Juegos Olímpicos 
  griegos. Marcus Porcius Cato (o Cato "el viejo") escribió la receta para su preparación en uno de sus tantos libros de 
  cocina Romana, llamados "De Agricultura".</p>
</article>
<footer class="extremo2">Derecho de autor © Abuelitas.com</footer>

</div>

</body>
</html>

a continuación explicaremos cabalmente el codigo del ejemplo que corresponde a este nuevo tema...

martes, 25 de septiembre de 2018

DISEÑO en Columnas de Tabla HTML, o por Flotables CSS, o mediante Plataformas de Código dedicadas a lo VISUAL

Tutorial de HTML y principalmente su version 5

Las tablas HTML

El elemento <table> no fue planteado para ser una herramienta de diseño visual!! El propósito del elemento <table> es mostrar datos tabulados. Así que, no uses las tablas como medios de diseño visual para tu pagina! Harán un gran desorden de tu código. E imagina cuán difícil será rediseñar tu sitio luego de un par de meses.

Consejo: No uses tablas para el diseño visual de tu pagina!

Las plataformas o estructuras CSS

Si quieres aplicar un diseño visual rápidamente, puedes usar una plataforma como Bootstrap.

Los flotables con CSS

Es algo común hacer diseños visuales web enteros usando la propiedad CSS float. Es fácil de aprender – solo necesitas recordar cómo funcionan las propiedades float y clear.

Desventajas: Los elementos flotantes están sujetos al flujo del documento (la dirección, la interrupción y continuación en el diseño visual... espacio y posición que tiene un elemento HTML, inferidas en el código que se interpreta como la pagina web), lo cual puede afectar la flexibilidad o adaptabilidad.

Aprenderás mas de las propiedades CSS float y clear en un capitulo futuro.

Ejemplo con float:

Capitales del Mundo

Berlín

Es la capital de Alemania y uno de los dieciséis estados federados alemanes. Se localiza al noreste de Alemania. Por la ciudad fluyen los ríos Spree, Havel, Panke, Dahme y Wuhle. Con una población de 3,5 millones de habitantes, Berlín es la ciudad más poblada del país y de Europa Central, así como la segunda ciudad en tamaño y la quinta aglomeración urbana entre los países de la Unión Europea.

Derecho de autor © Atlas.com

El código HTML y CSS que se haya tras este ejemplo:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<style>
div#pizarrón-inflexible {
    width: 100%;
    border: 1px solid brown;
}
header.extremo, footer.extremo {
    padding: 5px;
    color: white;
    background-color: brown;
    text-align: center;
}
nav#canoa {
    float: left;
    max-width: 30%;
    padding: 5px;
}
nav#canoa ul {
    list-style-type: none;
    padding: 0px;
}
nav#canoa ul a {
    text-decoration: none;
}
article#tramo {
    border-left: 1px solid brown;
    padding: 5px;
    overflow: auto;
}
</style>
</head>
<body>
<div id="pizarrón-inflexible">

<header class="extremo">
   <h1>Capitales del Mundo</h1>
</header>
<nav id="canoa">
  <ul>
    <li><a href="#">Berlín</a></li>
    <li><a href="#">Otra capital</a></li>
    <li><a href="#">Otra capital mas</a></li>
  </ul>
</nav>
<article id="tramo">
  <h1>Berlín</h1>
  <p>Es la capital de Alemania y uno de los dieciséis estados federados alemanes. Se localiza al noreste de Alemania. Por la 
  ciudad fluyen los ríos Spree, Havel, Panke, Dahme y Wuhle. Con una población de 3,5 millones de habitantes, Berlín es la 
  ciudad más poblada del país y de Europa Central, así como la segunda ciudad en tamaño y la quinta aglomeración urbana entre 
  los países de la Unión Europea.</p>
</article>
<footer class="extremo">Derecho de autor © Atlas.com</footer>

</div>
</body>

</html>

sábado, 14 de julio de 2018

Técnicas de Diseño Visual en paginas Web

Tutorial de HTML y principalmente su version 5

Diseños Visuales en HTML

Ejemplo de un diseño visual en html:

Animales extintos

El tigre de Tasmania

Fue un marsupial carnívoro originado en el Holoceno. Era nativo de Australia y Nueva Guinea y se cree que se extinguió en el siglo XX. Se trataba del último miembro viviente de su género (Thylacinus), cuyos otros miembros vivieron en tiempos prehistóricos a partir de principios del Mioceno.

Derecho de autor © Tiempos.com

Elementos HTML para diseño visual

Los sitios web frecuentemente muestran el contenido en múltiples columnas (como en una revista o un periódico).

HTML5 ofrece nuevos elementos de semántica para definir las diferentes partes de una página web:

  • <header> - Define una cabecera en un documento o una sección.
  • <nav> - Define un contenedor para los enlaces de navegación interna, es decir de una página a otra del mismo sitio web. En ingles, navegación se escribe “navigation”, asi que “nav” es solo su forma corta.
  • <section> - Define una sección en un documento.
  • <article> - Define un ítem de contenido. Tiene sentido por sí solo, es independiente. Para reusarse o distribuirse.
  • <aside> - Define contenido que tiene una relación indirecta al contenido principal.
  • <footer> - Define un pie de página en un documento o una sección.
  • <details> - Define detalles adicionales que el usuario puede ver u ocultar a su gusto.
  • <summary> - Define un encabezado (resumen-titulo) en el elemento <details>.


Técnicas HTML de diseño visual

Abajo hay cuatro diferentes maneras de crear diseños visuales multicolumnas. Cada una de estas maneras tiene sus ventajas y sus contras:

  • Las tablas HTML
  • La propiedad CSS float
  • Una de las plataformas CSS que hay en existencia
  • La modalidad flexbox de CSS para el diseño visual. En español se le conoce como “de Caja Flexible”.

Pero, ¿Cual elegir?

lunes, 3 de abril de 2017

La Ventana Virtual y HTML - comentario

Tutorial de HTML y principalmente su version 5

Configurar la Ventana Virtual (Viewport en ingles)


Una ventana virtual es similar a una ventana real pero en su función, es decir, nos permite ver pero limita nuestra visión. No es el mismo concepto que describe por ejemplo, a la ventana del navegador, la del procesador de texto, o del reproductor de medios.


HTML5 introdujo un método, a través de la etiqueta <meta>, que permite a los diseñadores web tomar el control de la ventana virtual (viewport).

La ventana virtual es el área (de una página web) visible al usuario. Esta varia de dispositivo a dispositivo, siendo más pequeña en la pantalla de un teléfono móvil que en la de una computador.

Varía también la configuración que cada navegador utiliza de modo predeterminado para establecer la ventana virtual. Por esta razón, deberías incluir en todas tus páginas web, el elemento <meta> que a continuación se te presenta. Ya que proporciona buenos ajustes para la ventana virtual (viewport):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un elemento <meta> destinado a la ventana virtual (viewport), le da al navegador instrucciones sobre cómo manejar las dimensiones y la escalada, escalamiento, o ajuste de la pagina.

Expliquemos esa linea de código:

La parte “width=device-width” establece el ancho (width) de la pagina para que iguale el ancho de la pantalla del dispositivo (device-width) (que variara según el dispositivo).

La parte “initial-scale=1.0” establece el nivel inicial de aumento/alejamiento o zoom de la pagina para cuando esta se cargue. En esta ocasión, el nivel inicial es 1.0 o 100%, lo que significa “ninguno”.

También debo mencionar que hay ciertas diferencias entre las especificaciones físicas y lógicas de la pantalla de un dispositivo.

Luego trataremos el resto de este subtema, importante para la versión móvil de tu sitio web. Por ahora basta con esta breve introducción.



Puedo omitir <html>, <head> y <body>?

De acuerdo al estándar HTML5; la etiqueta <html>, la etiqueta <body> y la etiqueta <head> se pueden omitir.

El siguiente código sería validado como HTML5:

<!DOCTYPE html>
<title>Titulo de Pagina</title>

<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>

Observación: no se recomienda omitir las etiquetas <html> y <body>, ya que puede hacer funcionar mal al software DOM o XML y producir errores en navegadores antiguos (IE9).

Sin embargo, el omitir la etiqueta <head> ha sido algo común desde hace ya algún tiempo.


Resumen de lo aprendido:

Etiqueta Descripción
<head> Contendrá los metadatos del documento
<title> Define el titulo de un documento
<base> Define una dirección por defecto o un receptor por defecto para todos los enlaces de una pagina
<link> Define una relación entre un documento y un recurso externo
<meta> Proporciona otros metadatos de un documento HTML
<script> Define un guion a ejecutar en el lado del usuario
<style> Define información de estilo para un documento

El elemento HTML <head>

Tutorial de HTML y principalmente su version 5

La cabecera de un archivo HTML

El elemento HTML <head>

El elemento <head> es un contenedor para los metadatos (la información acerca de la información) y se coloca entre la etiqueta <html> y la etiqueta <body>.

Los metadatos HTML son información acerca del documento HTML. Los metadatos no se muestran.

Típicamente los metadatos abarcan el titulo del documento, el juego de caracteres, los estilos, los enlaces, los guiones, y aun “información extra”.

Las siguientes etiquetas describen el tipo de metadatos dentro del elemento <head>:

<title>, <style>, <meta>, <link>, <script>, <base>.



El element HTML <title>

El elemento <title> define el titulo del documento, y se require en todos los documentos HTML y XHTML.

El elemento <title> provee dicho título a:

  • La pestaña del navegador web.
  • La nueva entrada o nuevo marcador agregado a la sección “favoritos” del navegador. Como valor por defecto para el nombre de esta.
  • El resultado correspondiente a nuestra página web en la lista presentada por un motor de búsqueda luego de consultarlo.

A continuación, un documento HTML sencillo:

<!DOCTYPE html>
<html>
 <head>
   <title>Titulo de Pagina</title>
 </head>
 <body>
   El contenido del documento......
 </body>
</html>

El elemento HTML <style>

El elemento <style> define información de estilo que será usada para solo una página HTML (quien la contiene):

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

El elemento HTML <link>

El elemento <link> se usa para enlazar a nuestra página web, hojas de estilo externas:

<link rel="stylesheet" href="miestilo.css">

Aprenderás todo sobre CSS en una futura guía dedicada a este otro lenguaje.

El elemento HTML <meta>

El elemento <meta> se usa para especificar que juego de caracteres se está usando en el texto, también para especificar la descripción de página, las palabras claves, el autor, y otros metadatos.

Algunos ejemplos de uso de la etiqueta <meta>:

<head>
 <meta charset="UTF-8">
 <meta name="description" content="guias gratuitas por la fascinante web">
 <meta name="keywords" content="HTML,CSS,XML,JavaScript">
 <meta name="author" content="Jose Picapiedra">
</head>

Expliquemos el ejemplo:

Definir el juego de caracteres empleado:

<meta charset="UTF-8">

Definir una descripción acerca de tu página web:

<meta name="description" content="guias gratuitas por la fascinante web">

Definir palabras claves para los motores de búsqueda:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Definir al autor de una página web:

<meta name="author" content="Mario Moreno">

Refrescar el documento cada 30 segundos:

<meta http-equiv="refresh" content="30">

El atributo “http-equiv” de la etiqueta <meta>, permite simular uno de los campos de la cabecera de un mensaje de petición o respuesta del protocolo HTTP. Con la abreviación “equiv” para “equivalente”, el valor “refresh” como el campo de cabecera HTTP que se está simulando, y el valor “30” del atributo “content” vendría a ser en verdad el valor para el campo de cabecera, ya que “http-equiv” y “content” están relacionados al igual que “name” y “content” en los anteriores.


Los metadatos son usados por los navegadores (para tener certeza de cómo presentar el contenido), por los motores de búsqueda (para conocer el contenido rápidamente mediante las palabras claves), y por otros servicios web.



El elemento HTML <script>

El elemento <script> se usa para definir guiones JavaScript.

El guion JavaScript de abajo escribe “Hola JavaScript!” dentro de un elemento HTML con identificador “prueba”:

<script>
function unaFuncion {
    document.getElementById("prueba").innerHTML = "Hoja JavaScript!";
}
</script>

El elemento HTML <base>

El elemento <base> especifica la URL base para las URLs relativas de una página, o la URL por defecto para un enlace sin valor para su atributo href (<a href=“”>Un enlace</a>). Y especifica también el receptor (target) por defecto para todas las URLs de la misma página:

<base href="https://www.micasa5estrellas.com/imagenes/" target="_blank">