Codificar: otro modo de dibujar

Desde lejos, la figura geométrica luce sencilla. Caras equidistantes, ángulos rectos y cuatro bordes simétricos. Sin embargo, delinear un cuadrado implica seguir un método. Avanzar, girar noventa grados y volver a avanzar. Sobre el papel, el lápiz alterna sus trazos para generar una secuencia precisa. Ajustes mediante, la receta que define al algoritmo nos invita a intentar nuevos diseños.

Replicar un hexágono -por ejemplo- requiere instrucciones análogas, aunque hará falta modificar algunos parámetros. En particular, debemos incrementar la cantidad de lados (iteraciones) a seis y reducir los grados de rotación a sesenta.

Bajo este enfoque, code.org redobla la apuesta. De hecho, los juegos que la plataforma plantea describen gráficos más …

Seguir leyendo

Guía del programador web

Diccionario HTML

https://www.entramar.mvl.edu.ar/diccionario-html
Diccionario CSS

https://www.entramar.mvl.edu.ar/diccionario-css
Página para editar y probar código https://replit.com
Página para subir imágenes https://es.imgbb.com
Selector de colores

https://www.google.com/search?q=color+picker
Una barra de navegación en HTML https://www.entramar.mvl.edu.ar/una-barra-de-navegacion-en-html
Un carrousel de imágenes en HTML https://www.entramar.mvl.edu.ar/un-carroussel-de-imagenes-en-html

 …

Seguir leyendo

Diccionario CSS

 

Selectores de etiqueta p { }
Selectores de clase .clase { }
Selectores de id .id { }
Pseudoselector “mouse over” :hover { }
Pseudoselector “al hacer clic” :active { }

 

Color de texto color: blue;
color: #0000FF;
color: rgb(0, 0, 256);
Color de fondo background-color: lightblue;
Ancho y alto width: 20%;
height: 120px;
Bordes border: 2px solid black;
Ancho / Estilo / Color
Estilos: solid, dotted, dashed, double, groove
Bordes redondeados border-radius: 10px;
Sombreados box-shadow: 5px 10px 20px red;
Desplazamiento horizontal / Desplazamiento vertical /  Ancho del difuminado / Color
Márgenes margin: 10px 5px 10px 5px;
o
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
Relleno padding:
Seguir leyendo

Diccionario HTML

Estructura básica <!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Título de la pestaña del navegador</title>
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!–Comentario–>
</body>
</html>
Secciones principales <header></header>
<main></main>
<footer></footer>
Otras secciones <section></section>
<article></article>
<div></div>
Párrafo <p></p>
Texto destacado <span></span>
Niveles de encabezado <h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Lista no ordenada <ul></ul>
<ul type=”disc”> genera viñetas con forma de disco
<ul type=”square”> genera viñetas cuadradas
Lista ordenada <ol></ol>
<ol type=”A”> genera listas ordenadas alfabéticamente
Lista (ítems) <li></li>
Imágenes <img src=”link_a_la_imagen” alt=”descripcion_de_la_imagen”>
Enlaces <a href=”link_al_enlace”>Página externa</a>
<a href=”#seccion_interna”>Sección interna</a>
Código incrustado <iframe></iframe>
Videos de YouTube, Mapas de Google Maps, Audios de SoundCloud, Presentaciones
Seguir leyendo

Una barra de navegación en HTML

Código HTML

Una barra de navegación puede ir en cualquier lugar de la página, pero en general se coloca arriba, en el header, antes del encabezado principal (h1).
En HTML se usan las etiquetas <nav> y </nav> para delimitarla.
Y dentro del bloque nav construimos una lista no ordenada con los ítems que queremos que haya en el menú.
Además, a cada ítem le agregamos un link para que al hacer clic nos lleve a la sección de la página que queramos.

<header>
<nav>
<ul>
<li><a href=”#inicio”>Inicio</a></li>
<li><a href=”#productos”>Productos</a></li>
<li><a href=”#contacto”>Contacto</a></li>
</ul>
</nav>
<h1>Título de la página</h1>
</header>
<main>
<h2 id=”inicio”></h2>
<h2 id=”productos”></h2>
<h2 id=”contacto”></h2>
</main>

Código CSS

¿Cómo hacemos …

Seguir leyendo

Dictados gráficos

Los “dictados gráficos” son una actividad educativa que combina elementos de lenguaje y arte para fomentar la creatividad y el desarrollo de habilidades cognitivas y motoras en los niños. En lugar de escribir palabras o frases, los niños crean representaciones visuales. Estas actividades también estimulan y desarrollan las habilidades de percepción visual en diferentes planos: derecha-izquierda, arriba-abajo, diagonal ascendente y descendente-derecha, diagonal ascendente y descendente-izquierda.

Replicar estos ejercicios perceptivo-motores de lateralidad y orientación espacial estimulan y desarrollan la estructuración espacial en el papel. Las actividades contribuyen a la interiorización y maduración de las nociones espaciales, así como al afianzamiento de la distribución y de la posición en el espacio.

La …

Seguir leyendo

Lenguaje de programación. Primeros pasos en la escuela Emma

Los niños y niñas de esta edad tienen una mente curiosa y están ansiosos por aprender, por lo que es un buen momento para empezar a construir una base sólida en pensamiento computacional.

Los estudiantes de la Escuela Primaria Municipal, Emma Pérez Ferreira comenzaron a dar los primeros pasos en lenguaje de programación. Compartimos la secuencia de experiencias llevadas a cabo en las últimas clases…

Realizaron diversas actividades transitando un paso a paso para afianzar conceptos.

Comenzaron aprendiendo el Concepto de Algoritmo:  es una serie de pasos o instrucciones ordenadas que se siguen para resolver un problema o realizar una tarea específica. Un algoritmo es como una receta que se …

Seguir leyendo