11° INETA

 

11°2022 INETA PRIMER PERIODO

ACTIVIDADES 11° PRIMER PERIODO TECNOLOGÍA E INFORMÁTICA 

El desarrollo de actividades en el primer periodo enmarcado con el retorno después de 2 años de pandemia, trae consigo inmensos retos por parte de estudiantes, padres de familia, y personal docente.

Inicia el desarrollo de actividades haciendo un recuento de conceptos previos como lo son manejo de Excel, para este caso la temática ordenar y filtrar, siguiente la temática HTML.

ORDENAR Y FILTRAR

Ordenar los datos es una parte esencial del análisis de datos. Puede que desee poner una lista de nombres en orden alfabético, compilar una lista de niveles de inventario de productos de mayor a menor u ordenar filas por colores o por iconos. Ordenar los datos ayuda a verlos y a comprenderlos mejor, así como a organizarlos y encontrarlos más fácilmente y a tomar decisiones más eficaces.

Puede ordenar datos por texto (de la A a la Z o de la Z a la A), números (de menor a mayor o de mayor a menor) y fechas y horas (de más antiguos a más recientes y de más recientes a más antiguos) en una o varias columnas. También puede ordenar por una lista personalizada que cree (como Grande, Medio y Pequeño) o por formato, incluido el color de celda, el color de fuente o el conjunto de iconos.

Tomado de Ordenar datos en un rango o tabla (microsoft.com)

La herramienta Filtrar nos permite mostrar sólo los datos que cumplen con los criterios que hemos especificado.

Si hacemos clic en el botón Filtro, dentro del grupo de herramientas Ordenar y Filtrar de la barra Modificar, aparecerá en el encabezado de cada columna un triángulo que muestra que tenemos un desplegable. Según el tipo de filtro que apliquemos se nos mostrarán más o menos datos de nuestra tabla. Es importante saber que esta herramienta no borra ni modifica los datos de la tabla, simplemente deja de mostrar algunos datos.

En el caso de los filtros también podemos aplicar Filtros personalizados que variarán según el tipo de valor al que estamos aplicando del filtro.

Tomado de Excel - Ordenar y filtrar datos en Excel. | Saber Programas

El siguiente es un video explicativo de la temática 

Ahora abordaremos HTML desde un punto básico

Lenguaje de programación

Conocer cómo funciona el lenguaje de programación y cómo se interrelaciona con nosotros a través de software nos permite mejorar nuestra productividad y conseguir ese algo que nos diferencie de la competencia.

A lo largo de los años, los lenguajes de programación han aumentado su potencia y flexibilidad para, de esa forma, llevar a cabo las tareas complejas que la innovación y las nuevas tecnologías de información y comunicación (TIC) nos exigen.

Todas las máquinas y dispositivos requieren un lenguaje de programación para cumplir sus funciones. Si conoces cuáles permiten que estos las realicen adecuadamente, entonces tendrás un plus que te permitirá alcanzar tus objetivos en menos tiempo.

¿Quieres saber más? Continúa leyendo para aprender sobre éste interesante (y necesario) tema.

• ¿Qué es un lenguaje de programación?
• ¿Qué tipos de lenguaje de programación existen?
• ¿Para qué sirven los lenguajes de programación?
• ¿Qué softwares de programación existen?
• En resumen

¿Qué es un lenguaje de programación?

Es un lenguaje formal que, mediante una serie de instrucciones, le permite a un programador escribir un conjunto de órdenes, acciones consecutivas, datos y algoritmos para, de esa forma, crear programas que controlen el comportamiento físico y lógico de una máquina.

Mediante este lenguaje se comunican el programador y la máquina, permitiendo especificar, de forma precisa, aspectos como:

• cuáles datos debe operar un software específico;
• cómo deben ser almacenados o transmitidos esos datos;
• las acciones que debe tomar el software dependiendo de las circunstancias variables.

Para explicarlo mejor (en otras y con menos palabras), el lenguaje de programación es un sistema estructurado de comunicación, el cual está conformado por conjuntos de símbolos, palabras claves, reglas semánticas y sintácticas que permiten el entendimiento entre un programador y una máquina.

HTML 

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cual es su función.

Características 

• Puede ser creado y editado con cualquier editor básico de textos.

• Es multiplataforma, o sea, puede ser visualizado por cualquier navegador de cualquier sistema operativo.

• No diferencia entre mayúsculas y minúsculas.

• Utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto así como también las imágenes y demás elementos en la pantalla del ordenador.

• Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fin.

• Lenguaje estático.

• Es utilizado para la creación de páginas web.

• Los documentos HTML son documentos de hipertexto que aparecen enlazando a otros documentos.

REGLAS DE HTML:

Obligatorio:

• delimitar el ámbito de las etiquetas (salvo excepciones)
• etiqueta interna se cierra antes que externa
• etiquetas a nivel de bloque pueden contener etiquetas a nivel de línea, pero no al revés
• etiquetas no sensitivas a mayúsculas
• en vez de espacios agregar raya al piso

Pero no está de más cumplir además con XHTML:

• Cerrar todos los tags, ie: <p> ... </p>, <li> ... </li>
• Incluir marca de cierre para tags vacíos, ie: <hr />, <br />
• Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" />
• Todos los tags en minúsculas
• Terminar con </html>

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 

Recomendaciones:

Es importante siempre recordar abrir y cerrar correctamente cada etiqueta para evitar problemas, pues mencionaré, pues de no hacerlo puede generar que tu página web luzca extremadamente diferente, más si aplicamos diseño en ella.

También es recomendable escribir las etiquetas con letras minúsculas, no generara ningún problema escribirlas en mayúsculas, pero si puede generar confusión en el navegador al intentar interpretarlo en otro lenguaje web.

Veamos un ejemplo:

<!Doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Titulo de Pestaña</title>

  </head>

  <body>

    <p>Hola mundo</p>

    <p>Como están todos, Bienvenidos INETISTAS</p>

  </body>

</html>

Al guardar el código anterior y visualizarlo en pantalla podemos observar un resultado como el siguiente:

Etiquetas 

el texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML.

Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:

• El carácter “menor que” <
• Una palabra o carácter que determina qué etiqueta se está escribiendo
• Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”
• El carácter “mayor que” >

En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es importante tener constancia de la existencia de ellas.

Los elementos HTML suelen dividirse en tres partes. Esta combinación de las tres crea un elemento HTML.

• Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento. Está envuelta en corchete de apertura y cierre. Por ejemplo, puedes usar la etiqueta de inicio <p> para crear un párrafo.
• Contenido: El contenido es el resultado que ve la audiencia.
• Etiqueta de cierre: Es lo mismo que la etiqueta de apertura, pero con una barra inclinada delante del nombre del elemento. Es decir, </p> para finalizar un párrafo.

¿Cuáles son las etiquetas HTML básicas?

Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación, las explicamos:

• <body> para el contenido
• <head> para información sobre el documento
• <div> división dentro del contenido
• <a> para enlaces
• <strong> para poner el texto en negrita
• <br> para saltos de línea
• <H1>…<H6> para títulos dentro del contenido
• <img> para añadir imágenes al documento
• <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
• <p> para parágrafos
• <span> para estilos de una parte del texto

<body> </body>

Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.

Si deseamos poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.

Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> (bg de background).

<head></head>

La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…

<div> </div>

Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.

<a> </a>

Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.

Enlaces internos entre archivos .html

Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto.html el código sería así:

<a href="contacto.html">Contáctenos</a>

Enlaces externos

Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro,  tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que conviene copiarla del navegador. En este caso, es común usar el atributo target="" que nos permite abrir el enlace en una pestaña nueva. Por ejemplo, si quisiera poner un vínculo a Google y que éste abra en pestaña nueva, sería así: 

<a href="https://google.com" target="_blank">Ir a Google</a>

<br>

Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.

<H1> </H1> …. <H6> </H6>

Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.

<img src="URL o nombre del archivo"/>

Insertar imagen en HTML desde una carpeta

Para insertar una imagen que esté almacenada en la misma carpeta que nuestro documento HTML, solo colocaremos su nombre y extensión en el valor del atributo src de la siguiente manera:

Ejemplo para insertar desde carpeta:

<img src="koala.jpg"/>

Que es un atributo en HTML

Un atributo HTML es un valor o propiedad que añades a una etiqueta HTML. Este otorgará una propiedad o comportamiento específico a la propia etiqueta.

ACTIVIDADES DE NIVELACIÓN 

Es este espacio podrá acceder al documento que esté acorde al grado que usted pertenezca, por lo tanto presione sobre el icono que represente su grado exacto. Dicho esto recuerde que debe leer con atención la anterior información ya que de ella se han creado las actividades, así también debe tener en cuenta que debe tener su propio correo electrónico de GMAIL y desarrollar solo la competencia que perdió y la actividad correspondiente a cada competencia que haya reprobado. Si no sabe como crear un correo electrónico presione en el siguiente enlace Presione aquí

No olvide presionar sobre las imágenes de PDF donde podrá acceder a las actividades.

     11°01

  11°02