Diccionario Python

 

Definición de variables nombre=»Julián»
edad=18
Definición de listas frutas = [«Frutilla», «Ananá», «Sandia»] puntajes=[1,2,3,4,5] cantidad=len(puntajes)
notas = [] notas.append(8)
notas.remove(8)
print(notas)
len(notas)
sum(notas)
min(notas)
max(notas)
notas.count(10)
notas.reverse()
notas.sort()
Definición de diccionarios persona1={
«nombre»:»Julián»,
«apellido»:»Vega»,
«edad»:25
}
print(persona1[«apellido»])
persona1[«nacionalidad»]=»Argentina»
Diccionarios con listas persona1[«poderes»]=[«fuerza», «velocidad», «salto», «regeneración»] print(super1[«poderes»])
print(super1[«poderes»][1])

Listas con diccionarios artistas = []

artista1 = {
«nombreArtistico» : «Lali»,
«nombre» : «Mariana Esposito»,
«edad» : 31,
«nacionalidad» : «Argentina»
}

artista2 = {
«nombreArtistico» : «Duki»,
«nombre» : «Mauro Quiroga»,
«edad» : 26,
«nacionalidad» : «Argentina»
}
artistas.append(artista1)
artistas.append(artista2)
for artista in artistas:
print(artista[«nombreArtistico»])

Bucle FOR for artista in artistas:
print(artista[«nombreArtistico»])
 
Seguir leyendo

OSD en acción: Hackatón 2023 por un mundo sostenible

Con este lema, la Secretaría de Educación de la Municipalidad de Vicente López y Digital House Schools convocaron a estudiantes de 4to y 5to año a participar de una competencia interactiva (un «hackatón»), desafiándolos a utilizar sus habilidades en HTML y CSS para crear landing pages relacionadas con los Objetivos de Desarrollo Sostenible (ODS) propuestos por Naciones Unidos.

En síntesis, un evento de enlace entre:
– la tecnología: creando una landing page utilizando HTML y CSS, habilidades esenciales en el mundo digital actual,
– la sostenibilidad: ayudando a construir un mundo más sostenible, y contribuyendo a la conciencia y a la acción en los temas más importantes de sostenibilidad,

Seguir leyendo

Un carroussel de imágenes en HTML

Código HTML

En primer lugar creá un «div», y dentro del div colocá las imágenes. Tratá de que todas las imágenes tengan el mismo tamaño.

<div class=»contenedor»>
<img src=»imagen1.jpg» alt=»imagen1″>
<img src=»imagen2.jpg» alt=»imagen2″>
<img src=»imagen3.jpg» alt=»imagen3″>
</div>

Código CSS

Hacé que el div tenga una estructura de grid, con tantas columnas como imágenes.
Pero el secreto está en que todas las columnas tengan 100% de ancho.
Luego agregamos las propiedades animation y position.
Y finalizamos con la definición de los @keyframes

.contenedor {
display: grid;
grid-template-rows: 200px;
grid-template-columns: 100% 100% 100%;
animation: carrousel 15s infinite;
position: relative;
}
@keyframes carrousel {
from { right: 0%; }
50% { right: 100%;
Seguir leyendo

Guía del programador

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
Diccionario Python https://www.entramar.mvl.edu.ar/diccionario-python
BlackBox https://www.blackbox.ai/

 …

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