miércoles, 20 de noviembre de 2024

HTML: Los FORMULARIOS

 Formularios:

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación.
Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (más adelante veremos cómo enviar los datos de un formulario).
El HTML de un formulario web está compuesto por uno o más controles de formulario.
Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento <input> aunque hay algunos otros elementos que también hay que conocer.

Primero, se recomienda diseñar el formulario. Tiene que ser simple y conciso: solicita sólo los datos que necesitas.

Etiquetas para crear un  formulario:

Etiqueta <form>
Permite definir un formulario de datos, utilizados para transferir datos al servidor. Un formulario puede contener a su vez, elementos de entrada como pueden ser campos de texto, casillas de verificación, botones de radio, botones de envió, listas de selección, áreas de texto, etc. 

Etiqueta <label>
Representa una etiqueta para un elemento en una interfaz de usuario. 

Etiqueta <input>
Es una de las etiquetas más importantes para la solicitud de datos mediante formularios, ya que es la que permite especificar los tipos de datos que se quieren solicitar para su posterior envió.
La etiqueta permite mediante uno de sus atributos especificar el tipo de dato a solicitar, de forma que se pueda componer un formulario que solicite los datos acordes a una estructura idónea para la recepción de los mismos por parte del servidor.

Distintos tipos de datos:
  • text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.
  • email: campo para direcciones de correo
  • password: Control de línea simple cuyo valor permanece oculto.
  • date: campo de fecha
  • submit: Botón que envía el formulario.   
  • reset: Botón que  anula el formulario.   
Etiqueta <textarea>
Representa un control para la edición multilínea de texto sin formato.


 ACLARACIÓN SOBRE los FORMULARIOS:
En este nivel vemos sólo la estética del formulario. 
El funcionamiento de un formulario, para guardar los datos que se ingresan se realiza con programación usando PHP. 

EJEMPLO INICIAL:
SE VE ASÍ: 👇




domingo, 10 de noviembre de 2024

ROBÓTICA: SENSOR ULTRASÓNICO y SERVO MOTOR - Barrera de PEAJE

 



¿CÓMO SE PROGRAMA?



ROBÓTICA: EL SERVO MOTOR


Servomotor (también llamado Servo) es un dispositivo que tiene la capacidad de ubicarse en cualquier posición dentro de su rango de operación, y mantenerse estable en dicha posición. Está conformado por un motor, una caja reductora y un circuito de control.
Sólo puede girar entre 0 y 180 grados.

Se utiliza mucho para crear BARRERAS.
Por eso, nuestra primera práctica será abrir y cerrar una "barrera"

¿Cómo se programa?
Se utiliza esta orden 👇 dentro del grupo MOTORES.
Si queremos una barrera que ABRA y CIERRE permaneciendo en cada posición 2 segundos...
la programación será:
Debemos tener en cuenta que tanto el conector como los ángulos pueden variar.




martes, 5 de noviembre de 2024

HTML: TABLAS

 Tablas


Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos.
En general, sirven para representar información tabulada, en filas y columnas.
Para componerlas se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una etiqueta de <table>. Estas etiquetas son las siguientes: <table> <th> <tr> <td>



Se verá así: 
Combinación de Columnas:
El atributo colspan  permite realizar la combinación de varias columnas en una sola. Para especificar el valor del atributo, se debe indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un valor numérico encerrado entre comillas dobles.


Combinación de filas:
También se puede realizar la combinación de filas, mediante el atributo rowspan. Observen en qué fila agregué el atributo rowspan. Agregué más alumnos para que tenga más sentido.


domingo, 27 de octubre de 2024

ROBÓTICA: SENSOR de ULTRASONIDO - Ejercicio Nro 2

 ¿Pensaron alguna vez cómo funciona el sensor de estacionamiento de un auto?

¿Qué hace el siguiente programa?

¿Por qué los autos tienen sensor atrás y no adelante? 🤔


¡CONSTRUYAN Un Móvil y prueben!

Ideas para construir algo rápido


¡Aquí 👇 una prueba rápida que armé para probarlo!








miércoles, 23 de octubre de 2024

CSS

  CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.

CSS es la mejor forma de separar los contenidos de su presentación y es imprescindible para crear páginas web complejas.

¿Para qué sirve CSS?

El código CSS hace la vida más fácil al desarrollador al separar las estructuras de un documento HTML de su presentación. 

Dicho de otro modo, el HTML actuaría como es esqueleto de la web, definiendo su estructura básica, y el CSS añadiría toda la capa de presentación sobre el que la web define su aspecto final.

Cómo incluir CSS en un documento HTML

1) en el mismo documento, mediante la etiqueta STYLE dentro de la etiqueta <head> - sólo sirve para muy poquitos estilos



2) en un documento externo, enlazado desde el HTML principal 

¡ESTE ES EL QUE USAREMOS!

estilos.css será nuestra página de estilos.
rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
Así se ve 👇

3) Incluir CSS en los elementos HTML

Este es último método para incluir estilos CSS en documentos HTML, es el menos utilizado, ya que el principal inconveniente es que, si se quiere hacer una modificación en los estilos definidos, es necesario modificar todos los elementos en todas las páginas.

¿Cómo funciona CSS?
Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que este nos es presentado.
Las reglas se componen de dos elementos:
- Selector : para definir a qué elementos debe aplicarse la regla
Propiedades: cada una con su valor 
¡observen cómo se escribe!


Propiedades básicas:
  • font-family: se refiere a la(s) fuente(s) que deseamos usar en nuestro texto. Se definen 3. El navegador va a buscar la 1ra tipografía, si no está, va a usar la 2da, si tampoco está buscará la 3ra. Si la defino para BODY la va a usar en todo el documento.
  • font-size: define tamaño de la fuente 
  • color: color de la fuente 
  • text-align: alineación de los textos. 
  • background-color: cambiar el color de fondo del elemento. 
  • width: establece el ancho. 
  • height: establece el alto. 
  • border: permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, color y/o estilo.
  • margin: define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. (margin-top, margin-right, margin-bottom, margin-left).

  • padding: define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento. Cada una de las propiedades establece la separación entre el lateral de los contenidos y el borde lateral de la caja. Es el espacio que hay DENTRO de un elemento.
            Padding: 10px 20px   👉va a usar 10 arriba y abajo, 20 en derecha e izquierda

           Padding: 10px 20px 5px  0px  los aplica en sentido horario arriba, derecha, abajo, izquierda



Colores Hexadecimales:
Un color se puede identificar en CSS de diferentes maneras. 
Puede ser por su nombre, por su combinación de RGB (RED GREEN BLUE) o por su   valor HEXADECIMAL.

Dos opciones para seleccionar un color y obtener su valor hexadecimal y su combinación RGB
1) escribir COLORPICKER en google


TODAS LAS PROPIEDADES CSS 👉

PARA TENER EN CUENTA: 

👉Si necesitamos que un elemento use otra fuente, la cambiaremos en su css 

👉Cuando las propiedades se repiten, el navegador usa la idea de la cascada o herencia. SI hay valor específico para un elemento, usará ese, si no, el que se hereda.

👉Cuando trabajamos en un proyecto con varios html, usaremos 1 único archivo CSS. Vincularemos el mismo CSS en todos los html.

👉Si necesitamos diferenciar un párrafo de otro... CREAREMOS UNA REGLA de ESTILO asociada a un selector de clase. A ese selector de clase le daremos un nombre que debe comenzar con . Por ejemplo: .txt_magenta

¡Un selector de clase NO ESTA ASOCIADO a ningún elemento! 

Donde querramos usarlo,  dentro del html  escribiremos class=txt_magenta 

EJEMPLO! 

OBSERVEN el archivo .CSS👀

y el archivo HTML:👀


Y así se ve:



viernes, 11 de octubre de 2024

ROBÓTICA - REPASO UN MOTOR

¿Qué hace esta programación?

Para  CONTROLAR LA VELOCIDAD,
se puede CAMBIAR EL PORCENTAJE a 50% por ejemplo. VALORES NEGATIVOS hacen mover al motor hacia ATRÁS.👇

¡ACTIVIDADES!
- Construir un móvil
- Hacerlo mover hacia adelante
- Hacerlo mover hacia adelante y hacia atrás
- Agregar un LED: El led debe prenderse de color VERDE cuando va hacia ADELANTE y ROJO cuando va hacia ATRÁS
- ¡Agregamos SONIDO! Un sonido cuando va hacia adelante y otro cuando va hacia atrás.

¡GUARDAMOS CADA UNA de LAS VERSIONES DEL PROGRAMA!

jueves, 3 de octubre de 2024

miércoles, 25 de septiembre de 2024

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.

jueves, 15 de agosto de 2024

EXCEL - Validación de DATOS

 La Validación de Datos se utiliza para controlar la información ingresada en las celdas.

EN EXCEL: Para configurarlo, vamos a la pestaña DATOS y VALIDACIÓN DE DATOS.

EN HOJA de CÁLCULO: 

Este es el ejercicio que vamos a resolver, ya lo asigné en Classroom.

En este ejemplo, en las columnas B a F, sólo deben permitirse  los valores G (GANADO), E (EMPATADO) y P (PERDIDO)

miércoles, 7 de agosto de 2024

EXCEL: Aprendemos a ORDENAR y FILTRAR

 Ingresa al siguiente link y descarga el archivo Ordenar y Filtrar.

Presta atención a las indicaciones y resuelve.
👇


 VIDEO  para EXCEL  👇

VIDEO PARA Hoja de CÁLCULO de GOOGLE 👇



jueves, 1 de agosto de 2024

Avanzamos en EXCEL Formato condicional // CONTAR.SI.CONJUNTO()

Accedemos al archivo de trabajo en a carpeta compartida: 

Aprendemos FORMATO CONDICIONAL y lo implementamos en el ejercicio descargado.

1) Usando la tabla del ejercicio, crear reglas de formato condicional para:


- mostrar con relleno ROJO las notas inferiores a 4
- mostrar con relleno AMARILLO las notas entre 4 y 6
- mostrar con relleno VERDE las notas superiores a 6

2) Copiar los datos a otra hoja y crear reglas de formato condicional para:

- mostrar con BANDERA ROJA las notas inferiores a 4
- mostrar con BANDERA AMARILLA las notas entre 4 y 6
- mostrar con BANDERA VERDE las notas superiores a 6

3) Copiar los datos a otra hoja. Mostrar los datos usando las reglas de BARRAS de DATOS  de formato condicional. Entiendes lo que se muestra?

CONTAR.SI.CONJUNTO()
La función CONTAR. SI. CONJUNTO en Excel nos permite contar los elementos de un rango que cumplen con TODOS los criterios definidos. Esta función nos permite especificar hasta 127 criterios. Deben cumplirs TODOS los criterios especificados.

Se escribe así: =CONTAR.SI.CONJUNTO(rango1;criterio1;rango2;criterio2...)

=CONTAR.SI.CONJUNTO(B2:B16, "Hombre", C2:C16, ">18")

ACLARACIÓN:
Para los que usan Hoja de Cálculo de Google,  la función es COUNTIFS(...)

jueves, 25 de julio de 2024

ROBÓTICA: Trabajamos con MOTORES

 Mirá esta construcción simple: 


Mirá esta programación 👇
Este es el resultado:👇👀

SI quieren CONTROLAR LA VELOCIDAD,
pueden CAMBIAR EL PORCENTAJE a 50% por ejemplo. VALORES NEGATIVOS hacen mover al motor hacia ATRÁS.




¡ACTIVIDADES!
- Construir un móvil
- Hacerlo mover hacia adelante
- Hacerlo mover hacia adelante y hacia atrás
- Agregar un LED: El led debe prenderse de color VERDE cuando va hacia ADELANTE y ROJO cuando va hacia ATRÁS
- ¡Agregamos SONIDO! Un sonido cuando va hacia adelante y otro cuando va hacia atrás.

¡GUARDAMOS CADA UNA de LAS VERSIONES DEL PROGRAMA!





ROBÓTICA - Actividad con LEDs y SENSOR de LUZ

 Esto es lo que hay que programar 👇

Una vez que funcione, deben crear una construcción y usarlo...


RECORDAMOS la PROGRAMACIÓN de UN LED:  👇

RECORDAMOS la PROGRAMACIÓN del SENSOR de LUZ:👇

ROBÓTICA: Sensor de Luz (LDR)

El sensor de luz LDR o foto resistor sirve para detectar y medir la intensidad de luz del ambiente. 

Es un sensor muy pequeño y sencillo de utilizar. Se trata de una foto resistencia (LDR) sensible a la luz, y ofrece una resistencia mayor o menor en función de la cantidad de luz recibida. Son sensores ideales para proyectos de iluminación o cualquier proyecto que necesite detectar la luz ambiente.


¡Mirá qué fácil lo programamos!