Excel: Operaciones con Celdas, Filas y Columnas

Explicamos cómo:

Insertar / Eliminar FILAS y COLUMNAS

Copiar, Pegar, Cortar // Opciones de Pegado

Copiar Formato

Modificar ALTURA

OCULTAR una FILA o COLUMNA

 

2024 - Trabajo Diagnóstico - Tecnología e Impacto Ambiental

 Investigación sobre: Tecnología e Impacto Ambiental

El objetivo de este trabajo es que exploren la intersección entre la tecnología y el medio ambiente, analizando cómo las innovaciones tecnológicas pueden tener un impacto tanto positivo como negativo en la salud del planeta.

Guía detallada - Ítems a desarrollar:

1) Introducción al Tema:

Proporcionar una visión general de la relación entre la tecnología y el medio ambiente, destacando la importancia de comprender cómo las decisiones tecnológicas pueden afectar la sostenibilidad global.

2) Impacto Positivo:
Identificar y describir tecnologías que han tenido un impacto positivo en el medio ambiente. Esto podría incluir, por ejemplo, avances en energías renovables, tecnologías de eficiencia energética o soluciones para la gestión de residuos.


3) Impacto Negativo:
Identificar cómo algunas tecnologías pueden tener impactos negativos en el medio ambiente. Esto podría incluir la generación de residuos electrónicos, la contaminación asociada con la fabricación de dispositivos, o el agotamiento de recursos naturales para la producción de tecnología.


4) Ciclo de Vida del Producto:
Investigar cuál es el ciclo de vida completo de un producto tecnológico, desde su fabricación hasta su desecho. Esto puede incluir la extracción de materias primas, la producción, la distribución, el uso y el reciclaje.


5) Estrategias de Sostenibilidad:
Investigar y proponer estrategias y prácticas que las empresas y los consumidores pueden adoptar para minimizar el impacto ambiental de la tecnología. Esto podría incluir la promoción de la reparación en lugar de la sustitución, el reciclaje responsable o la elección de productos con certificaciones ambientales.


6) Innovaciones Futuras:
Explorar investigaciones y desarrollos tecnológicos futuros que tengan como objetivo mitigar el impacto ambiental.


7) Conclusiones y Reflexiones Personales:
Incluir una reflexión y conclusión final sobre cómo la tecnología puede desempeñar un papel en la preservación del medio ambiente. ¿Qué responsabilidad tenemos los consumidores y las empresas en este contexto?

¿Qué hay que entregar?

Una PRESENTACIÓN usando la herramienta que más les guste (Powerpoint, Google Slides, Canva, Genially, ....) desarrollando cada uno de los ítems detallados. Mínimo 8 diapositivas, Máximo 10.

Se evaluará:
- Calidad de la presentación  - se tendrá en cuenta el uso de herramientas avanzadas ya vistas en los años anteriores

- Claridad en la explicación
- Uso de lenguaje apropiado

HTML - Clase 3: Nuevas Etiquetas

Creamos un nuevo documento para ir probando cada una de las etiquetas nuevas que vamos a aprender.

Usar VISUAL STUDIO CODE.

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.

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 <input>

Es una de las etiquetas más importante 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.
• checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Se pueden seleccionar varios a la vez.
• file: Control que permite al usuario seleccionar un archivo.
• hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
• password: Control de línea simple cuyo valor permanece oculto.
• radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este elemento. Los botones radio que tengan el mismo valor para su atributo name están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.
• submit: Botón que envía el formulario. Etiqueta Representa una etiqueta para un elemento en una interfaz de usuario. 

Etiqueta <label>

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

Representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos .

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:

Observen las etiquetas label e input, y los  atributos type y placeholder.

Se ve así 👇

Agregamos  el control Sexo con un Radio para contestar.

Usé DIV para separarlo y que aparezca en el renglón de abajo. 

Agregamos  el control Hobbies con un Checkbox para contestar.

Observen que primero va  el INPUT y luego el label. 

Prueben invertirlos para entender por qué alteramos el orden.

Etiqueta SELECT para MENÚ DESPLEGABLE 

 

Se ve así 👇

ACLARACIÓN SOBRE EL ATRIBUTO ID: 

El valor de este atributo permite relacionar un control con una etiqueta. Por ejemplo, si un control tiene por id el valor id=”email”, esto significa que ese control está relacionado con la etiqueta (label) cuyo atributo for es for=”email”.

Área para escribir texto  (textarea) y luego los botones para enviar y borrar.

Multimedia: 

¿Qué es HTML 5?

HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. 

Esta nueva versión y en conjunto con CSS3,(que veremos más adelante) define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades.

Etiqueta audio: permite insertar un archivo mp3 para su reproducción desde la página.

atributos: 

• src: El origen de donde se encuentra el audio que se va a insertar
• controls: Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de video, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
• 
  
  
  
  
• 

Etiqueta VIDEO: Se utiliza para incrustar un video en la página.

Atributos:

• poster: una imagen para mostrar el resultado hasta que el usuario reproduzca o busque. Si no se especifica, se muestra el primer cuadro.
• src: ubicación del video
• controls: se usa para que el navegador muestre los controles para pausa, play, ...

Etiquetas semánticas: ¿Qué son?

Semántica: Perteneciente o relativo al  significado de las palabras. 

En HTML son  aquellas etiquetas que dan un significado a las partes del documento. 

Por decirlo de otra forma, estamos ante etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.

Las etiquetas HTML semánticas no solo son más fáciles de leer y comprender por los buscadores y desarrolladores web, sino que son más accesibles para los lectores con deficiencias visuales y mejoran tu posicionamiento en los buscadores.

• <header>: la etiqueta de encabezamiento define el contenido introductorio de una página o sección.
• <nav>: la etiqueta de navegación se utiliza para los enlaces de navegación. Puede anidarse dentro de la etiqueta <header>, pero las etiquetas <nav> de navegación secundaria también suelen usarse en otras secciones de la página.
• <main>: esta etiqueta contiene el contenido principal (también llamado cuerpo) de una página. Solo debería haber una etiqueta <main> por página.
• <section>: utilizar <section> es una forma de agrupar contenidos que tratan sobre temas similares. Las etiquetas de sección son diferentes a las de artículo, no son necesariamente autónomas, sino que forman parte de algo más. 
• <aside>: un elemento "aside" define el contenido de menor importancia. Suele emplearse para las barras laterales, que incluyen información complementaria pero no esencial (por ejemplo, para la visualización de la página en celular, puede haber contenido no relevante que puede no mostrarse).
• <footer>: usa <footer> en la parte inferior de una página. La etiqueta suele incluir información de contacto, derechos de autor y navegación por la web.

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 01. Práctica HTML etiquetas básicas

Abrimos la guía - Documento PDF UTN.BA DAV Prácticas Diseño WEB 01

 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.

Trabajo Diagnóstico 2024 - Presentación / Animación en SCRATCH

Este proyecto tiene como objetivo sumergirnos en el mundo de las tecnologías emergentes, investigando a fondo una de ellas y presentando sus hallazgos de manera clara y estructurada.

Investiga y presenta información sobre alguna de las siguientes tecnologías emergentes:

• inteligencia artificial
• realidad virtual
• Internet de las cosas (IoT)
• vehículos autónomos
• impresión 3D.

Deben explicar su funcionamiento, aplicaciones y posibles impactos en la sociedad.

La presentación / animación deberá incluir:

1. Una introducción a la tecnología elegida. Esto debería incluir una definición clara, su origen, y la evolución que ha experimentado hasta el momento.
2. Explicación sobre su funcionamiento y principios básicos
3. Ejemplos de Aplicaciones Prácticas
4. Explicación del Impacto en la Sociedad y la Economía ¿Cómo ha cambiado o podría cambiar la forma en que vivimos y trabajamos?

Trabajo Diagnóstico 2024

En un documento de Google, les pido que investiguen sobre Vehículos Autónomos.

La investigación debe contener:

1) Introducción a la Tecnología: Incluir definición, origen y cómo ha evolucionado hasta la actualidad

2) Explicación sobre su Funcionamiento y Principios Básicos: ¿Cómo funciona este tipo de vehículos?

3) Ejemplos de Aplicaciones Prácticas: ¿Cómo y dónde se utilizan o podrían utilizar?

4) ¿Qué pasará en el futuro? : Tu opinión sobre lo que sucederá en el futuro con esta tecnología.

Consignas para el documento:

Título centralizado, fuente a elección, tamaño 18, subrayado

Cada uno de los títulos de los puntos a desarrollar, debe escribirse en la misma fuente, negrita, tamaño 14, y en otro color.

Para los párrafos, deben utilizar la misma fuente, tamaño 12, otro color, sin negrita.

Incluir imágenes.

Incluir como referencia los sitios de internet de donde se obtuvo la información (OBLIGATORIO)