El Zoológico de las Sílabas

 

Estrategia, primavera y plantas

  ¡A pensar! 

Debemos hacer que pase el agua hacia las flores

¡Las hacemos crecer!

A PENSAR

 EN ESTE JUEGO NO SE PUEDEN SUPERPONER LAS LINEAS

EMPEZAMOS con POWERPOINT

 POWERPOINT es un programa de MICROSOFT que sirve para hacer presentaciones.

HOY comenzamos a aprenderlo.

Busca en la barra de tareas el ícono de la aplicación 👇

Haciendo UN CLIC se abrirá el programa en tu pantalla.

Selecciona PRESENTACIÓN en  BLANCO.

¡ATENTOS A LA EXPLICACIÓN! 

Les voy a enseñar a usarlo.

Vamos a hacer una PRESENTACIÓN donde cada uno se presenta y cuenta cómo es su familia, dónde vive y  si tiene mascotas. Si quieren contar algo más sobre ustedes, ¡obviamente pueden hacerlo!

¿CONSTRUIMOS USANDO LAS FORMAS?

 

MEMOTEST de ALIMENTOS SALUDABLES

 

¡AYUDAMOS AL OSO A COMER!

 

HTML - Clase 2: Comenzamos con las etiquetas

  Etiquetas

Etiquetas <h1> - <h6>

Las siguientes etiquetas permiten la definición de encabezados o títulos dentro del documento web.

La etiqueta se representa mediante las etiquetas, siendo X un número entre 1 y 6, que establece el nivel del encabezado.

Se ve así 👇 

Etiqueta <p>
Se utilizan para encerrar párrafos de texto; los usaremos frecuentemente para el marcado de contenido de texto.

Etiqueta <ul>

Permite definir una lista desordenada (“Unordered List”). Esta etiqueta es a su vez contenedora de otras etiquetas, siendo estas últimas las que componen cada uno de los elementos de los que está compuesta la lista.

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de especificar el texto que compone el elemento de la lista.

Etiqueta <ol>

Permite definir listas o viñetas ordenadas (“Ordered List”), bien con numeración o alfabéticamente. 

Para especificar un elemento en la lista se ha de utilizar la etiqueta <li> </li>, en la que se ha de especificar el texto que compone el elemento de la lista. Una lista puede contener como elemento de lista, otra lista, es decir se pueden crear listas anidadas.

Si uso <ol type="A"> estoy indicando que deseo usar letras en vez de números . Probar type="a" y type= "I"

Etiqueta <a>

Sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles. Los navegadores suelen visualizar los enlaces con una serie de colores predefinidos, aunque estos se pueden cambiar.

Los enlaces no visitados se visualizan normalmente con el color azul, los enlaces visitados con el color púrpura y por último los enlaces activos mediante el color rojo.

Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder.

La sintaxis de la etiqueta a usa los atributos href y target.

• href: Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web.  

                                                    Observen dónde se abre la página

• target: El atributo permite especificar el destino por defecto para todos los enlaces. El más común es: _blank que especifica que el destino sea una nueva ventana del navegador, o una nueva pestaña.
  
   Observen dónde se abre la página ahora con el atributo TARGET

 👉¡IMPORTANTE!

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman “anchors” en inglés, que se puede traducir literalmente como “anclas”.

URL ABSOLUTA y URL RELATIVA: 

El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

Por ejemplo, http://www.google.com es la url completa o ABSOLUTA de la página principal de Google.

Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web.

EJEMPLO

Si tenemos página publicada en: 

http://www.ejemplo.com/ruta1/ruta2/pagina1.html 

y queremos incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html. 

Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página.

Considerando el mismo ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html

URL relativa: /ruta1/ruta2/pagina2.html

Etiqueta <img>

La etiqueta <img>, permite definir una imagen en el documento web. Técnicamente la imagen no está insertada dentro del documento, ya que lo que se hace es realizar un enlace a la misma, encargándose el navegador de situar en el documento. Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. Usa los siguientes atributos: 

• src: permite especificar  la ubicación de la  imagen, bien mediante una ruta absoluta o relativa.
• alt: permite especificar un texto alternativo para la imagen. Este texto alternativo es visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario utiliza un lector de pantalla.

Aclaración: la imagen está en la misma carpeta que el documento html. Estoy usando una referencia relativa.

El archivo mariposa.png se encuentra en una carpeta DISEÑO WEB - HTML y CSS dentro de otra carpeta, MATERIAL UTN en el ESCRITORIO de mi computadora y usuario.

La ruta ABSOLUTA sería:

 

C:\Users\Silvana\Desktop\MATERIAL UTN\DISEÑO WEB - HTML y CSS\mariposa.png

En las urls dentro de un documento HTML, El blanco se escribe con su representación hexadecimal %20. (observar la dirección al ver el documento html)

 

Etiqueta <div>

La etiqueta <div> sirve para crear secciones o agrupar contenidos.
Un contenedor div sirve principalmente para contener a otros elementos HTML. Aunque nos permite posicionar grupos y áreas, div no tiene su propio significado semántico en HTML. Su tarea principal es, por tanto, crear y delimitar áreas que luego puedan ser formateadas mediante CSS. El contenedor div no influye en el diseño o el contenido de una página web. En un principio, dentro de un contenedor div se puede colocar casi cualquier contenido fluido. En HTML, div no tiene ningún efecto sobre la presentación del contenido, sino que únicamente lo delimita.

HTML - CLASE 1

 Diseño Web – HTML y CSS  - HTML etiquetas básicas

1) ¿Qué es HTML? 

 Definiéndolo de forma sencilla, “HTML es lo que se utiliza para crear la mayoría las páginas web de Internet”. Más concretamente, HTML es el lenguaje con el que se “escriben” estas páginas web.

Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.

2) Breve Historia

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para compartir documentos.

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre “HTML Tags” (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un standard se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force).

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el standard HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer standard oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium).

HOY estamos usando la versión 5 de HTML.

Especificación oficial

El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML. Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en las siguientes direcciones:

👉 Especificación oficial de HTML 5.2 https://www.w3.org/TR/html52/

Características básicas

HTML Les un  Lenguaje de etiquetas.

¿Qué significa etiquetas específicas?

Es un conjunto de etiquetas que usaremos para encerrar diferentes partes del contenido o elementos para que se vean o comporten de una determinada manera.

Estos elementos suelen tener etiquetas de inicio y cierre para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.

<etiqueta> </etiqueta>

Ejemplo:

<p>Esta etiqueta es para indicar que este texto es un párrafo</p>

<title>Esta es la etiqueta donde colocaremos el título de la página</title>

Elementos HTML: Un elemento HTML Es la combinación de: 

<etiqueta de APERTURA> CONTENIDO </etiqueta de CIERRE>

 

 

El primer documento HTML

Este es el texto - la separación del margen no es obligatoria, pero sirve para visualizar mejor el documento.

<!DOCTYPE html>

<html>

     <head>

              <title>El primer documento HTML</title>

     </head>

     <body>

             <p>Contenido de nuestro primer document de HTML</p>

    </body>

</html>

Explicación de cada elemento:

<!DOCTYPE html> Definición del tipo de documento.

 <html> </html> Especifica el principio y fin del documento HTML, entre las etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento 

<head> </head> Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.

<meta charset="UTF-8"> Este elemento establece que nuestro documento usará  el juego de caracteres utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. (UTF-8 : 8 bit Unicode Transformation Format - Unicode es un estándar global que asigna un número único a cada carácter)  (en nuestro ejemplo no está esta etiqueta pero será automáticamente insertada por cualquier editor).

<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita. 

<body> </body> Es donde se encuentra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea textos, imágenes, videos, audios, formulario, etc.

LA TABLA PITAGORICA

USAMOS PIXILART PARA DIBUJAR FRACCIONES

 ENTRAMOS AQUI

https://www.pixilart.com/draw?ref=home-page

Piensa rápido

 Movete con las flechas,  

¡Pensá rápido para no caerte! 

Este juego nos ayuda a coordinar ojo 🙄 mano🖐

¡A prestar mucha atención!

 

¡A prestar mucha atención!

¿Qué monstruo es? Utilizamos pensamiento lógico

DIBUJAMOS EN ESPEJO

 

JUEGO DE ESTRATEGIA

¡Un panal de abejas Multicolor!

Este juego de estrategia es para pensar rápidamente, 

llena la linea para que desaparezca y sumar puntos.

ARMAMOS LA PALABRA!!

 

Hoy trabajamos con ANIMALES

 

 Ingresamos a esta página 👉https://www.prepostseo.com/tool/es/online-text-editor 

¿Qué es?

¡Es una página donde podemos escribir!

Escribimos los nombres de 5 animales que estaban en la sopa.

 A PENSAR CON ESTE ROMPECABEZAS 👇

Buscamos los iguales👇

SUMAMOS

¡Creamos un PAISAJE de PRIMAVERA!

DICTADO GRÁFICO

¡Sigue las órdenes que aparecen en el centro vas a ver qué se dibuja!

 

¡Coloreamos DINOSAURIOS!

¡Vamos a PINTAR!

Herramientas en TINKERCAD: Ajustar la REJILLA / OCULTAR / MOSTRAR / BLOQUEAR / DESBLOQUEAR / MULTICOLOR / MINECRAFT y BLOQUES

 Veamos este video para aprender a qué se refiere AJUSTAR la REJILLA

OCULTAR / MOSTRAR / BLOQUEAR / DESBLOQUEAR

Veamos los primeros minutos de este video:

SIMETRÍA

MULTICOLOR

Multicolor en Bajo Relieve

👉Cómo usar la REGLA 

Visualización en BLOQUES y MINECRAFT

 

TINKERCAD - SIMLAB

 En TINKERCAD podemos darle movimiento a los objetos, usando SIMLAB.

Sim Lab te permite agregar gravedad y materiales a cualquier diseño 3D . Tan pronto como le des CLIC al botón de play, los objetos intentarán moverse según sus características y los efectos de la gravedad.

ACTIVIDAD:

 Buscar el dominó en las formas SIMLAB y luego armar la estructura y la simulación.

DESAFÍO TINKERCAD con SIMLAB

¿QUIÉN PUEDE HACER LO MISMO QUE SE HACE EN EL VIDEO?