DECIMO GRADO
ALGORITMO
Tipos de Datos de un Algoritmo
Ø Datos Numéricos: Permiten representar valores escalares de
forma numérica, esto incluye a los números enteros y los reales. Este tipo de
datos permiten realizar operaciones aritméticas comunes.
Ø Datos Lógicos: Son aquellos que solo pueden tener dos
valores (cierto o falso) ya que representan el resultado de una comparación
entre otros datos (numéricos o alfanuméricos).
Ø Datos Alfanuméricos (String): Es una secuencia de
caracteres alfanuméricos que permiten representar valores identificables de
forma descriptiva, esto incluye nombres de personas, direcciones, etc. Es
posible representar números como alfanuméricos, pero estos pierden su propiedad
matemática, es decir no es posible hacer operaciones con ellos. Este tipo de
datos se representan encerrados entre comillas.
¿Qué es PSEINT?
PSeInt es
principalmente un intérprete de pseudocódigo. El proyecto nació como trabajo
final para la cátedra de Programación I de la carrera Ingeniería en Informática
de la Universidad nacional del Litoral, razón por la cual el tipo de pseudocódigo
que interpreta está basado en el pseudocódigo presentado en la cátedra de
Fundamentos de Programación de dicha carrera. Actualmente incluye otras
funcionalidades como editor y ayuda integrada, generación de diagramas de flujo
o exportación a código C++ (en etapa experimental).
El proyecto se distribuye como software libre bajo licencia
GPL.
Para descargarlo o
conseguir actualizaciones visite http://pseint.sourceforge.net
Ejercicios
Resueltos utilizando PSeint
1.
Escribir un
nombre y saludar
//Programa para Escribir un saludo con el nombre:
RPC Proceso
Escribir_nombre
Escribir
"Programa para saludar"; //muestra en pantalla:
"Progr...saludar"
Escribir "Escribe tu nombre"; //instrucción
Leer a; //ingresa por teclado un texto
Escribir "Hola! Tu nombre es: ", "
****", a, "****"; //muestra un saludo con el nombre escrito
FinProceso //fin del proceso
2. Sumar dos números ‘a’ y ‘b’
//Algoritmo para sumar dos números enteros 'a' y 'b'
desarrollado por RPC Proceso sumar_a_b //
Proceso:
¿qué desea hacer el 'programa'?: sumar a y b
Escribir
"ingrese a:" ; //escribe/muestra en pantalla
Leer a;
//introduce por teclado el valor de 'a'
Escribir
"ingrese b:" ;
Leer b;
//introduce por teclado el valor de 'b'
Suma<-(a+b); //operador Suma=a+b
Escribir
"La suma de a + b es:",Suma ; //escribe/muestra en pantalla + el
valor Suma FinProceso
NIVELACIONES CUARTO PERIODO
CUESTIONARIO REDES DE COMPUTADORAS
¿Cuál es la
división de las redes?
Personal, área
local, área metropolitana, área amplia. Internet
¿En qué se
diferencia las redes tipo bus de las de tipo anillo?
Las de tipo bus se
manda el mensaje y éste viaje de máquina en máquina y las máquinas no pueden
enviar mensajes sólo recibir. El mensaje tiene que estar completo para que se
vaya.
Las de tipo anillo
todas las computadoras pueden enviar y recibir mensajes y no hay necesidad que
el paquete esté completo para que se vaya.
¿En dónde se
pueden usar LANs?
En edificios,
campus universitarios, casas y áreas con cobertura pequeñ¿En qué se diferencian
las LANs de otro tipo de redes?
Tamaño, tecnología
de transmisión y tipología
¿En dónde se
pueden usar las MAN?
Básicamente se usan
en las ciudades o coberturas regionales.
¿En qué medida
leyes como sopa o la ley sinde se relacionan con las redes?
En la medida en
que estas iniciativas pretenden controlar el tráfico de la red con fines de
proteger la propiedad intelectual y los derechos de autor
¿Que tipo de usos
se le podría dar a las redes en unidades de información? Por qué
Para compartir
recursos de información
Para compartir
recursos físicos
Para ampliar la
cobertura en sus diferentes servicios
Medios de
transmisión no guiados
Infrarrojo
Radiofrecuencias
Microondas
Dispositivo cuyo propósito
es resolver los problemas de red debido a el ancho de banda
Switch
Tipos de servidores
Servidor de
archivos
Servidor de
impresiones
Servidor de correo
electrónico
Servidor de telefonía
Servidor de fax
Servidor proxy
Servidor de acceso
remoto
LISTADO PARA MAQUETAS
ACTIVIDAD CUARTO PERIODO
1. COMPONENTES DE UNA RED DE COMPUTADORAS.
para ver el documento dar Clic aquí
2. MEDIOS DE TRANSMISIÓN DE UNA RED DE COMPUTADORAS
Medios de transmisión
3. TOPOLOGIAS DE RED
Topologías de redes
Una topología de red es la estructura de equipos, cables y demás componentes en una red. La topología es tanto física como lógica: - La topología física describe cómo están conectados los componentes físicos de una red, es la conexión física de circuitos. - La topología lógica describe el modo en que los datos de la red fluyen a través de componentes físicos, la proporciona el software y es una conexión lógica. Existen cinco topologías básicas: Todos los equipos de una red están unidos a un cable contiguo. El paquete se transmite a todos los dispositivos de red en ese segmento. Las redes de ductos son consideradas como topologías pasivas. Las computadoras "escuchan" al ducto. Cuando éstas están listas para transmitir, ellas se aseguran que no haya nadie más transmitiendo en el ducto, y entonces ellas envían sus paquetes de información. Las redes de ducto basadas en contención (ya que cada computadora debe contender por un tiempo de transmisión) típicamente emplean la arquitectura de red ETHERNET. Características:
Los segmentos de cable de cada equipo en la red están conectados a un componente centralizado o concentrador (hub). Un concentrador es un dispositivo que conecta varios equipos juntos. En una topología en estrella, las señales se transmiten desde el equipo, a través del concentrador, a todos los equipos de la red. Características:
Los equipos están conectados con un cable de forma circular. No hay extremos con terminaciones. Las señales viajan alrededor del bucle en una dirección y pasan a través de cada equipo que actúa como repetidor para amplificar la señal y enviarla al siguiente equipo. Características: Cada equipo está conectado a cada uno del resto de los equipos por un cable distinto. Gracias
a los múltiples caminos que ofrece a través de los distintos dispositivos, es posible orientar el tráfico por trayectorias alternativas en caso de que algún nodo esté averiado u ocupado. Este tipo de tecnología requiere mucho cable (cuando se utiliza el cable como medio, pero puede ser inalámbrico también). Pero debido a la redundancia, la red puede seguir operando si una conexión se rompe. Una red con topología en malla ofrece una redundancia y fiabilidad superiores. Aunque la facilidad de solución de problemas y el aumento de la confiabilidad son ventajas muy interesantes, estas redes resultan caras de instalar, ya que utilizan mucho cableado. Una topología de árbol o topología jerárquica es aquella que combina características de la topología estrella con la de bus, se podría decir que es una combinación de ambas. Trabaja de la misma manera que la de bus y estrella por el modo de actuar del nodo ya que el nodo de interconexión trabaja en modo difusión, pues la información se propaga hacia todas las estaciones, solo que en esta topología las ramificaciones se extienden a partir de un punto raíz como la de estrella, a tantas ramificaciones como sean posibles, según las características del árbol. Esta topología trabaja de la misma manera que la de bus y estrella por el modo de actuar del nodo ya que el nodo de interconexión trabaja en modo difusión, pues la información se propaga hacia todas las estaciones, solo que en esta topología las ramificaciones se extienden a partir de un punto raíz como la de estrella, a tantas ramificaciones como sean posibles, según las características del árbol. Una similitud con la de topología de estrella es que los nodos del árbol están conectados a un concentrador central o hub que controla el tráfico de la red, pero no todos los nodos se conectan directamente al concentrador central. La mayoría de los dispositivos se conectan a un concentrador secundario que, a su vez, se conecta al concentrador central. http://www.eveliux.com/mx/Topologias-de-red.html http://www.bloginformatico.com/topologia-de-red.php http://redestipostopologias.blogspot.mx/2009/03/topologia-de-redes.html http://modul.galeon.com/aficiones1366341.html |
Historia de las redes
Se puede remontar a
1957 cuando Estados Unidos crearon la Advance Research Projects Agency (ARPA),
como organismo afiliado al departamento de defensa para impulsar el desarrollo
tecnológico.
La creación del ARPA,
Leonard Kleinrock, investigador del MIT escribía el primer libro sobre
tecnología basadas en la transmisión por un mismo cable de más de una
comunicación.
En 1965, la ARPA
patrocino un programa que trataba de analizar las redes de comunicación usando
computadoras. Mediante a este programa, la máquina TX-2 en el laboratorio
Lincoln del MIT y la AN/FSQ-32 del System Development Corporation de Santa
Mónica en California, se enlazaron directamente mediante una línea delicada
1200 bits por segundo.
En 1967, la ARPA
convoca una reunión en Ann Arbor (Michigan), donde se discuten por primera vez
aspectos sobre la futura ARPANET.
En 1968 la ARPA no
espera más y llama a empresas y universidades para que propusieran diseños, con
el objetivo de construir la futura red. La universidad de California gana la
propuesta para el diseño del centro de gestión de red y la empresa BBN.
En 1969, año clave en
las redes de computadoras, ya que se construye la primera red de computadoras
de la historia, denominada ARPANET estaba compuesta por 4 nodos situados en
UCLA (Universidad de California de Santa Bárbara, L.A), SRI (Stanford Research
Institute), UCBS (Universidad de California de Santa Bárbara, L.A), UTA.
En 1970 la ARPANET
comienza a utilizar para sus comunicaciones un protocolo Host-to-host. Este
protocolo se denomina NCP y es el predecesor del actual TCP/IP que se utiliza
en toda la Internet.
En 1971 la ARPANET
estaba compuesta por 15 nodos y 23 máquinas que se unían mediante conmutación
de paquetes. Ese mismo año Ray Tomlinson realiza un programa de e-mail para
distribuir mensajes a usuarios concretos a través de ARPANET.
En 1972 se elige el
popular @ como tecla de puntuación para la separación del nombre del usuario y
de la máquina donde estaba dicho usuario. Hicieron una demostración pública y
en esa misma demostración se realiza el primer chat.
En 1973 se produce la
primera conexión internacional de la ARPANET. Dicha conexión se realiza con el
colegio universitario de Londres. La ARPANET contaba ya con 2000 usuarios y el
75% de su tráfico lo generaba el intercambio de correo electrónico.
En 1974, Cerf y Kahn
publican un artículo, protocolo para interconexión de redes de paquetes, que
especificaban con detalle el diseño del protocolo de control de transmisión
(TCP).
En 1975, prueban los
primeros enlaces vía satélite cruzando dos océanos (Hawai a Inglaterra) con las
primeras pruebas de TCP de la mano de Stanford, UCLA y UCL.
El 27 de octubre de
1980 hubo una parada generalizada de la ARPANET da los primeros avisos sobre
los peligros de la misma. Ese mismo año se crea redes particulares como la
CSNET que proporciona servicios de red científicos sin acceso a la ARPANET.
En 1982, la DCA y la
ARPA nombran a TCP e IP como el conjunto de protocolos TCP/IP de comunicación a
través de la ARPANET.
En 1985 se establecen
responsabilidades para el control de los nombres de dominio y así el ISI asume
la responsabilidad de ser la raíz para la resolución de los nombres de dominio.
Conceptos básicos de redes.
1. ¿Qué es una red? Una red es un conjunto de dispositivos físicos "hardware" y
de programas "software", mediante el cual podemos comunicar computadoras para
compartir recursos (discos, impresoras, programas, etc.) así como trabajo (tiempo de cálculo, procesamiento de datos, etc.). A cada una de las
computadoras conectadas a la red se le denomina un nodo.
2. ¿Qué es una red de computadora? Es un sistema de comunicación, ya que permite comunicarse con otros u suarios y compartir archivos . Es decir es un sistema de
comunicaciones que conecta a varias unidades y que les permite
intercambiar información. Se entiende por red al conjunto
inter conectado de computadoras. Se dice que dos computadoras están interconectadas, si éstos son
capaces de intercambiar información. La conexión no necesita hacerse
a través de cables , también puede hacerse mediante el uso
de láser, microondas y sistema de comunicación. 3. ¿Para qué nos sirven las redes? Para poder compartir archivos y recursos, por lo general se conectan
para estar en comunicación por ejemplo una impresora puede estar conectada a varias computadoras para
asi no tener varias impresoras. ¿Qué es el Hardware? Son todos los dispositivos y componentes físicos que realizan las
tareas de entrada y salida, también se conoce al hardware como la
parte dura o física del computador. La mayoría de las computadoras están organizadas de la siguiente forma: Escáner, Mouse, etc.) y salida
(Monitor, Impresoras, Plotters, Parlantes, etc.) y permiten la comunicación
entre el computador y el usuario.
4. ¿Qué es el software? Se conoce
como software al equipamiento lógico o soporte lógico de un
sistema informático , que comprende el conjunto de los
componentes lógicos necesarios que hacen posible la realización de
tareas específicas, en contraposición a
los componentes físicos que son llamados hardware.
5. Uso de redes de computadora
Las versiones de "software" para redes están
disponibles con un ahorro en el precio comparativamente bajo a la
compra de licencias de copias individuales. Los programas y
sus archivos de datos se pueden guardar en
un servidor de archivos al que pueden accesar muchos usuarios de la red a la misma vez. Ejemplos: En en windows 7 hay un
denominado grupo del hogar, conocemos drive que es provisto por Gmail, filezilla entre otros. Entre los recursos de la red se incluyen las
impresoras, los "Plotters" y los
dispositivos de almacenamiento como torres opticas o de disco. De esta forma la
red proporciona un enlace de comunicación que permite que los
usuarios compartan estos dispositivos. Estos dispositivos son de gran importancia ya que completan las tareas
que realizamos por ejemplo en la PC al realizar una impresión. Un servidor de bases
de datos es una aplicación ideal para una red. Una función de la red
denominada bloqueo de registros
permite que varios usuarios puedan accesar a la vez a un archivo sin corromper
los datos. Con el bloqueo de registros se asegura que dos usuarios no
pueden accesar al mismo registro simultáneamente. |
TALLER DE NIVELACION GRADO DECIMO
1.
Elaborar
un mapa conceptual en Word sobre la energía dada por el docente.
2.
Desarrollar
una sopa de letras sobre su energía con una tabla de 25 por 25 que contengo 15
palabras.
3.
Elaborar
un esquema de como funciona su energía a partir de imágenes con todos los
elementos desde su fuente hasta que llega a los hogares.
4.
Examen
sobre cuestionario montado en la plataforma ( https://actinformaticapilarista.blogspot.com/p/decimo-grado.html
)
Cuestionario sobre energías renovables
1.
Que es
la energía
Es la capacidad que tiene las cosas o seres vivos para producir cambios.
2.
Tipos
de energías
Mecánica
calorífica
eléctrica
química,
luminosa,
sonora.
3.
Cual es
la fuente de energía mas utilizada en los países desarrollados.
Energía solar
4.
¿De
los restos de la cosecha se obtiene?
Biomasa
5.
Los humos
contaminantes producen
Lluvia acida
6.
¿Del
movimiento de las aguas se obtiene?
La energía hidráulica
7.
¿Del
uranio se obtiene?
La energía nuclear
8.
¿Del
viento se obtiene?
La energía eólica
9.
¿Decimos
que existen fuentes de energía no renovables por qué?
Se agotan y tardan muchísimo tiempo en volver a producirse.
10.
¿Hay algún
tipo de energía libre de impacto ambiental?
No,
todas las energías por limpias que sean causan algún tipo impacto ambiental,
por pequeño que sea.
11. Cuáles son las fuentes de energías no
renovables
Carbón
Petróleo
Gas natural
Uranio
Plutonio
12. Propiedades de la energía
Se transforma
Se transfiere
Se almacena
Se transporta
13, el
sector energético en Colombia es regulado por
Ministerio
de minas y energia
TEMA DEL PERIODO ENERGIA
OBJETIVOS GENERALES:
Los objetivos generales a
conseguir en el tercer periodo del grado decimo son los siguientes:
·
Identificar los principales elementos del entorno natural social y
cultural, analizando su organización, sus características e interacciones.
·
Comportarse de acuerdo con los hábitos de salud
y cuidado personal que se derivan del conocimiento del cuerpo humano, mostrando
una actitud de aceptación y respeto por las diferencias individuales
(edad, sexo, características físicas, personalidad).
·
Participar en actividades de grupo adoptando un
comportamiento responsable, constructivo y solidario, respetando los principios
básicos del funcionamiento democrático.
·
Reconocer y
Apreciar la pertenencia a grupos sociales y culturales con
características propias, valorando las diferencias con otros grupos y la
necesidad del respeto a los Derechos Humanos.
·
Analizar algunas
manifestaciones de la intervención humana en el medio, valorándola críticamente
y adoptando un comportamiento en la vida cotidiana de defensa y recuperación
del equilibrio ecológico.
·
Interpretar,
expresar e interpretar hechos, conceptos y procesos del
medio natural, social y cultural mediante códigos numéricos, gráficos,
cartográficos y otros.
·
Utilizar las
tecnologías de la información y la comunicación para obtener información y como
instrumento para aprender y compartir conocimientos, valorando su contribución
a la mejora de las condiciones de vida de todas las personas.
·
Planificar y Realizar
proyectos, dispositivos y aparatos sencillos con una finalidad
previamente establecida, utilizando el conocimiento de las propiedades
elementales de algunos materiales, sustancias y objetos.
OBJETIVOS
DIDACTICOS
·
Analizar las diferentes fuentes de
energía que utiliza nuestra sociedad.
·
Conocer y diferenciar las fuentes de
energía renovable y no renovable.
·
Identificar qué produce los distintos
tipos de energía.
·
Analizar en su totalidad las energías renovables.
·
Explicar algunos problemas derivados de
la producción y utilización de la energía.
·
Valorar y desarrollar cómo usamos las
fuentes de energía y en qué afectan a nuestro entorno.
LISTA DE GRUPOS ENERGIAS 10-01
GRUPO |
INTEGRANTES |
TEMA |
1 |
AIDYMAR MEJIA TOMMY MEJIA ROBERT PEREIRA |
GEOTERMICA |
2 |
NATHALIA
MARTINEZ DANNA LARA ELKIN LARA FRANKLIN
MERCADO |
EOLICA |
3 |
CAROLAYN ESQUIVEL DANIELA NISPERUZA ALISSON NUÑEZ |
BIOMASA |
4 |
YISLENIS CORONADO TAISHA
DELPRADO DAYANA LERMA |
HIDRICA |
5 |
JAIME MENDOZA BRALLAN DIAZ ALEJANDRO VILLAR |
BIOMASA |
6 |
ANGIE
FERNANDEZ KEREN GAMEZ PATRICIA
PERALTA |
SOLAR |
7 |
CARMEN MARTINEZ MAYERLIS BRAVO TATIANA QUIROZ |
HIDRAULICA |
8 |
NATALIA
SERRANO DANNA VILLA YUMALHAY TORDECILLA |
TERMODINAMICA
|
9 |
YURYAIS LOPEZ JAILIMAR MORALES |
GEOTERMICA |
10 |
JULIO CHOLES YANILITH
GUERRERO MAIRON OCHOA |
SOLAR |
10-02
GRUPO |
INTEGRANTES |
TEMA |
1 |
LORAINIS CONRADO ILDA ARIZA YORLEIDIS VARGAS |
GEOTERMICA |
2 |
SHAROL REDONDO LAURA GOMEZ YERALDIN LOPEZ |
EOLICA |
3 |
EDUARDO JIMENEZ ENRIQUE ROSADO DELCO MURGAS |
BIOMASA |
4 |
GREICY
GARAVITO LUISA ANAYA ZHARICK RODELO
|
HIDRICA |
5 |
KEILIN MOVIL YULIANIS GOMEZ ROSI DELUQUE |
BIOMASA |
6 |
ARISLEIDA
REDONDO GABRIELA
GUZMAN MARYIS MIER |
SOLAR |
7 |
oscar vergara amaury bolaño jorge delprado |
hidrica |
8 |
luisa del prado kised cantilla luna lopez |
termodinámica |
9 |
yudis ramirez edgar gomez deiner duarte |
geotermica |
10 |
yeila zabaleta alexa romo jelka jaraba |
solar |
Actividad 1
1.
Realizar
un mapa conceptual sobre tu tema asignado.
(cada integrante del grupo debe realizar su mapa conceptual)
FECHA DE ENTREGA :01/08/2022
Actividad 2
Resolver las siguientes preguntas
Actividad 3
Elaborar en alguna de las herramientas de office una sopa de letras con los
conceptos mas relevantes de la energía.
actividad 4
· elabora
un esquema (con imágenes creadas con formas o descargadas) de la distribución de
su energía asignada, desde que se produce la energía eléctrica hasta que se
consume en los hogares, esta energía debe ser transformada.
· contesta
las siguientes preguntas:
-
donde se produce esta energía
-
como se transporta
-
que elementos se utiliza
para generar esta energía.
ACTIVIDADES DE NIVELACIÓN SEGUNDO PERIODO GRADO DECIMO
ACTIVIDAD
NOTA
REALIZAR UN
TRABAJO BIEN PRESENTADO SOBRE LOS SIGUIENTES TEMAS:
HTML
·
Definición
·
Características
·
Ventajas y desventajas
·
Etiquetas
·
Imágenes
·
Videos
·
Hipervínculos
·
ccs
Sobre 7.0
Actividad en clase
sobre un cuento dado por el docente y se debe insertar:
-
imagen de fondo de pantalla
-
color de letras
-
4 imágenes
-
Enlace
-
video
Sobre 7.0
Pasar al tablero y encontrar el error en la
etiqueta
Sobre 7.0
EXAMEN sobre cuestionario dado
Sobre 7.0
NOTAS10-02
NOTAS10-01
CUESTIONARIO DE NIVELACIÓN GRADO DECIMO
HTML es un
lenguaje de programación?
Falso
Que es HTML
es un lenguaje de marcado que define la estructura de tu contenido.
Partes de un
elementos de html son:
1. La etiqueta de
apertura: consiste en el nombre del elemento (en este caso, p), encerrado
por paréntesis angulares (< >) de apertura y cierre.
Establece dónde comienza o empieza a tener efecto el elemento —en este caso,
dónde es el comienzo del párrafo—.
2. La etiqueta de
cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento
—en este caso dónde termina el párrafo—.
3. El contenido: este es el
contenido del elemento, que en este caso es sólo texto.
4. El elemento: la etiqueta de
apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Atributos de html
Los atributos contienen información adicional
acerca del elemento, la cual no quieres que aparezca en el contenido real del
elemento. Aquí class es el nombre del atributo
y editor-note el valor del atributo. En
este caso, el atributo class permite darle al elemento un nombre
identificativo, que se puede utilizar luego para apuntarle al elemento
información de estilo y demás cosas.
Un atributo debe tener siempre:
1.
Un espacio entre este y el
nombre del elemento (o del atributo previo, si el elemento ya posee uno o más
atributos).
2.
El nombre del atributo,
seguido por un signo de igual (=).
3.
Comillas de apertura y de
cierre, encerrando el valor del atributo.
Los atributos siempre se incluyen en la etiqueta de
apertura de un elemento, nunca en la de cierre.
ETIQUETAS HTML
<p> se utilizan para encerrar párrafos de texto; los usarás
frecuentemente para el marcado de contenido de texto regular:
<p>Este es un simple parrafo</p>
Mucho del contenido web está dado por listas, así
que HTML tiene elementos especiales para ellas. El marcado de listas se realiza
siempre en al menos dos elementos. Los dos tipos de listas más comunes son las
listas ordenadas y las desordenadas:
1.
Las
listas desordenadas son aquellas en las
que el orden de los items no es relevante, como en una lista de compras. Estas
son encerradas en un elemento <ul> (unordered list).
2.
Las
listas ordenadas son aquellas en las
que el orden sí es relevante, como en una receta. Estas son encerradas en un
elemento <ol> (ordered list).
Los vínculos o enlaces son muy importantes —son los
que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un
vínculo simple — <a> — la a es la abreviatura de la palabra inglesa
«anchor» («ancla»). Para convertir algún texto dentro de un párrafo en
un vínculo, sigue estos pasos:
1.
Elige algún texto. Nosotros
elegimos «Manifesto Mozilla».
2.
Encierra el texto en un
elemento <a>, así:
<a>Manifesto
Mozilla</a>
3.
Proporciónale al elemento
<a> un atributo href, así:
<a
href="">Manifesto Mozilla</a>
4.
Completa el valor de este
atributo con la dirección web con la que quieras conectar al vínculo:
<a
href="https://www.mozilla.org/es-AR/about/manifesto/">Manifesto
Mozilla</a>
ACTIVIDADES DE NIVELACIÓN SEGUNDO PERIODO GRADO DECIMO |
|
ACTIVIDAD |
NOTA |
REALIZAR UN
TRABAJO BIEN PRESENTADO SOBRE LOS SIGUIENTES TEMAS: HTML ·
Definición ·
Características ·
Ventajas y desventajas ·
Etiquetas ·
Imágenes ·
Videos ·
Hipervínculos ·
ccs |
Sobre 7.0 |
Actividad en clase
sobre un cuento dado por el docente y se debe insertar: -
imagen de fondo de pantalla -
color de letras -
4 imágenes -
Enlace -
video |
Sobre 7.0 |
Pasar al tablero y encontrar el error en la
etiqueta |
Sobre 7.0 |
EXAMEN sobre cuestionario dado |
Sobre 7.0 |
Etiquetas HTMLDefinición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >
, que tienen funciones y usos específicos y se utilizan para escribir código HTML.
Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>
. Donde <etiqueta>
es la etiqueta de apertura y </etiqueta>
es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos. Leer mas... ¿Que son las etiquetas HTML?
En la siguiente tabla se enlista todas las etiquetas disponibles en HTML.
Etiqueta Descripción <!-- --> Etiqueta para escribir comentarios en HTML. <!DOCTYPE> Declaración del tipo de documento. <a> Etiqueta para incluir enlaces (links) hacia otras páginas o documentos. <abbr> Indicar una abreviación o acrónimo. <acronym> Indicar un acrónimo. <address> Etiqueta para incluir información de contacto. <applet> Insertar un applet en la página html. <area> Define un area de una imágen en donde se puede hacer clic. <article> Etiqueta semántica de HTML5 que indica la hubicación de un artículo. <aside> Etiqueta semántica de HTML5 para indicar una barra lateral <audio> Insertar audio. <b> Convierte el texto a negritas. <base> Definir una URL raíz para los enlaces relativos de nuestra página. <basefont> Especifica tamaño, color y fuente por defecto de la página. <bdi> Aisla parte de un texto que podría estar en otro idioma o formato. <bdo> Cambia la dirección del texto. <big> Aumenta el tamaño del texto. <blockquote> Citar contenido de otro sitio web dentro de un bloque. <body> Etiqueta que define el cuerpo de un documento HTML. <br> Indica una salto de línea. <button> Crear un botón en donde se puede hacer clic. <canvas> Etiqueta para definir un contenedor o lienzo para crear gráficos. <caption> Define el título de una tabla. <center> Centra el contenido. <cite> Cita o referencia de algún libro, película, artículo o algún trabajo de otro autor. <code> Indica que el texto es código fuente de algún lenguaje informático. <col> Especifíca propiedades de atributos de las columnas de una tabla. <colgroup> Define un grupo de columnas de una tabla para darles formato. <datalist> Crea una lista de opciónes para una caja de texto input. <dd> Define un término en una lista de definiciones. <del> Indica invalidez a un fragmento de texto tachandolo con una línea horizontal. <details> Especifica detalles que el usuario puede desplegar u ocultar. <dfn> Marca un término o definición. <dialog> Mostrar una caja de diálogo. <dir> Define una lista de directorios. <div> Crea un bloque. <dl> Define una lista de definiciones. <dt> Define un término en una lista de definiciones. <em> Enfatizar parte del texto. <embed> Crea un contenedor para una aplicación externa. <fieldset> Agrupa campos de un formulario relacionados entre si. <figcaption> Escribir una leyenda o texto asociado a una figura o imagen. <figure> Define un contenedor de figuras como imágenes, fotos, diagramas, etc. <font> Da formato al texto (fuente, tamaño, color, etc.). <footer> Define el pie de página. <form> Para definir un formulario. <frame> Define una ventana o frame de una página externa dentro de un frameset. <frameset> Define un frameset dentro del cual puede haber varios frames. <h1> ... <h6> Encabezados de HTML <head> Etiqueta que define la cabecera de un documento HTML. <header> Para indicar el encabezado de una página. <hr> Indica un cambio en la temática de la página y queda señalado con una línea horizontal. <html> Etiqueta que indica el inicio y final de un documento HTML. <i> Muestra el texto en itálica. <iframe> Define una ventana o frame interno. <img> Etiqueta para insertar imágenes. <input> Añade un cuadro de entrada de texto a un formulario. <ins> Indica que el texto a sido insertado en lugar de otro. <kbd> Indica texto introducido por medio del teclado. <keygen> Encriptar datos de un formulario. <label> Define una etiqueta relacionada a un elemento <input> de un formulario. <legend> Escribe un nombre o leyenda en un cuadro generado por la etiqueta <fieldset>. <li> Define un elemento de una lista. <link> Realiza un enlace entre la página y un elemento o recurso externo. <main> Indica el contenido principal de una página. <map> Permite dividir una imagen para hacer clic en distintas áreas de la misma. <mark> Remarca un texto de un color. <menu> Permite crear un menú personalizado al hacer clic derecho con el mouse. <menuitem> Define un elemento de un menu creado con la etiqueta <menu>. <meta> Define los metadatos que van dentro de la etiqueta <heaad> <meter> Indica una medida dentro de un rango representada por una barra progresiva. <nav> Define una grupo de enlaces de navegación. <noframes> Muestra un contenido alterno en caso de que los frames no sean soportados. <noscript> Muestra un contenido altero en caso de que un script no sea soportado. <object> Insertar objetos embebidos como audio, video o aplets. <ol> Define una lista ordenada numericamente o alfabeticamente. <optgroup> Agrupa opciones relacionadas en una lista desplegable. <option> Define una opcion en una lista desplegable. <output> Indica el resultado de salida de una operación. <p> Para escribir un párrafo. <param> Define paramentros de un objeto de la etiqueta <object>. <pre> Etiqueta para escribir texto pre-formateado. <progress> Etiqueta para insertar una barra prograsiva. <q> Encierra un segmento de texto entre comillas. <s> Tacha texto con una linea horizontal. <samp> Indica que el texto es un ejemplo de salida de un programa de computadora. <script> Etiqueta para insertar un script. <section> Define una seccion de la página. <select> Define una lista desplegable en un formulario. <small> Etiqueta que cambia el texto a un tamaño mas pequeño. <source> Indica la dirección de un recurso de audio o video. <span> Define una sección de un texto. <strike> Indica invalidez a un fragmento de texto tachandolo con una línea horizontal. <strong> Marca texto importante del documento en negrita. <style> Etiqueta para agregar un estilo CSS dentro del documento HTML. <sub> Indicar una subíndice. <summary> Define un encabezado visible dentro de una etiqueta <details> <sup> Indicar una superíndice. <table> Inserta una tabla en la página. <tbody> Define el cuerpo de una tabla. <td> Agregar una columna en una tabla <textarea> Define un área de texto para ingresar texto desde un formulario. <tfoot> Indica el contenido que forma el pie de una tabla. <th> Agrega una "columa encabezado" a una tabla. <thead> Define el encabezado de una tabla. <time> Indica una hora o fecha. <title> Indica el título de la página. <tr> Inserta una fila o renglón en una tabla. <track> Especifica tracks de texto para elementos multimedia de audio o video. <tt> Texto teletipo. <u> Definir texto subrayado. <ul> Define una lista <var> Indica que el texto es una variable. <video> Insertar un video. <wbr> Indica un posible cambio de linea en el texto segun el tamaño del contenedor.
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 cúal es su función.
Entonces, ¿qué es
HTML en realidad?
HTML no es un lenguaje de programación; es un lenguaje de marcado que
define la estructura de tu contenido. HTML consiste en una serie de elementos
que usarás para encerrar diferentes partes del contenido para que se vean o
comporten de una determinada manera. Las etiquetas de encierre pueden hacer de
una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar
palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la
siguiente línea de contenido:
Mi
gato es muy gruñon
Si quieres especificar que se trata de un párrafo, podrías encerrar el
texto con la etiqueta de párrafo (<p>):
<p>Mi
gato es muy gruñon</p>
Explora este párrafo en mayor profundidad.
Las partes principales del elemento son:
- La
etiqueta de apertura: consiste en el nombre
del elemento (en este caso, p), encerrado por paréntesis angulares (<
>) de apertura y cierre. Establece dónde comienza o empieza a tener
efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
- La
etiqueta de cierre: es igual que la
etiqueta de apertura, excepto que incluye una barra de cierre (/) antes
del nombre de la etiqueta. Establece dónde termina el elemento —en este
caso dónde termina el párrafo—.
- El
contenido: este es el contenido del elemento, que en este
caso es sólo texto.
- El
elemento: la etiqueta de apertura, más la etiqueta de
cierre, más el contenido equivale al elemento.
Los elementos pueden también tener atributos, que se ven así:
Los atributos contienen información adicional acerca del elemento, la cual
no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En este caso, el
atributo class permite darle al
elemento un nombre identificativo, que se puede utilizar luego para apuntarle
al elemento información de estilo y demás cosas.
Un atributo debe tener siempre:
- Un
espacio entre este y el nombre del elemento (o del atributo previo, si el
elemento ya posee uno o más atributos).
- El
nombre del atributo, seguido por un signo de igual (=).
- Comillas
de apertura y de cierre, encerrando el valor del atributo.
Los atributos siempre se incluyen en la etiqueta de apertura de un
elemento, nunca en la de cierre.
Nota: el atributo con valores simples que no contengan
espacios en blanco ASCII (o cualesquiera de los caracteres " ' ` = < >) pueden permanecer sin
entrecomillar, pero se recomienda entrecomillar todos los valores de atributo,
ya que esto hace que el código sea más consistente y comprensible.
Puedes también colocar elementos dentro de otros elementos —esto se
llama anidamiento—. Si, por ejemplo, quieres resaltar una palabra
del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un
elemento <strong>, que
significa que dicha palabra se debe enfatizar:
<p>Mi
gato es <strong>muy</strong> gruñon.</p>
Debes asegurarte que los elementos estén correctamente anidados: en el
ejemplo de abajo, creaste la etiqueta de apertura del elemento <p> primero,
luego la del elemento <strong>, por lo
tanto, debes cerrar esta etiqueta primero, y luego la de <p>. Esto es incorrecto:
<p>Mi
gato es <strong>muy gruñon.</p></strong>
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se
encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran
solapados, el navegador web tratará de adivinar lo que intentas decirle, pero
puede que obtengas resultados inesperados. Así que, ¡no lo hagas!
Algunos elementos no poseen contenido, y son llamados elementos
vacíos. Toma, por ejemplo, el elemento <img> de
nuestro HTML:
<img
src="images/firefox-icon.png" alt="Mi imagen de prueba">
Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es porque un elemento de imagen no
encierra contenido al cual afectar. Su propósito es desplegar una imagen en la
página HTML, en el lugar en que aparece.
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos
no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son
combinados para formar una página HTML entera. Vuelve a visitar el código de tu
ejemplo en index.html (que viste
por primera vez en el artículo Manejo de archivos):
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina de
prueba</title>
</head>
<body>
<img
src="images/firefox-icon.png" alt="Mi imagen de prueba">
</body>
</html>
Tienes:
- <!DOCTYPE
html> — el tipo de documento. Es un preámbulo
requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los
tipos de documento actuaban como vínculos a un conjunto de reglas que el
código HTML de la página debía seguir para ser considerado bueno, lo que
podía significar la verificación automática de errores y algunas otras
cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto
antiguo que a nadie le importa, pero que debe ser incluido para que todo
funcione correctamente. Por ahora, eso es todo lo que necesitas saber.
- <html></html> — el elemento <html>. Este elemento encierra todo el contenido de la página entera y, a
veces, se le conoce como el elemento raíz (root element).
- <head></head> — el elemento <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"> — <meta>. Este elemento establece el juego de caracteres que tu documento usará
en utf-8, que incluye
casi todos los caracteres de todos los idiomas humanos. Básicamente, puede
manejar cualquier contenido de texto que puedas incluir. No hay razón para
no establecerlo, y puede evitar problemas en el futuro.
- <title></title> — el elemento <title> establece el título de tu página, que es el título 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> — el elemento <body>. Encierra todo el contenido que deseas mostrar a los
usuarios web que visiten tu página, ya sea texto, imágenes, videos,
juegos, pistas de audio reproducibles, y demás.
Presta atención nuevamente al elemento imagen <img>:
<img
src="images/firefox-icon.png" alt="Mi imagen de prueba">
Como ya se dijo antes, incrusta una imagen en la página, en la posición en
que aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o ubicación) de
tu archivo de imagen.
También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la
imagen, y que podría ser accedido por usuarios que no pueden ver la imagen,
quizás porque:
- Son
ciegos o tienen deficiencias visuales. Los usuarios con impedimentos
visuales usualmente utilizan herramientas llamadas Lectores de
pantalla (Screen Readers), los cuales les leen el texto contenido
en el atributo alt.
- Se
produjo algún error en el código que impide que la imagen sea cargada.
Como ejemplo, modifica deliberadamente la ubicación dentro del
atributo src para
que este sea incorrecto. Si guardas y recargas la página, deberías ver algo
así en lugar de la imagen:
La frase clave acerca del texto alt de arriba es «texto que debería
describir la imagen». El texto alt debe proporcionarle al lector la suficiente
información como para que este tenga una buena idea de qué muestra la imagen.
Por lo que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un
texto mucho mejor para el logo de Firefox sería: «El logo de Firefox:
un zorro en llamas rodeando la Tierra».
Prueba a dar con mejores textos alt para tu imagen.
Nota: Descubre más acerca de la accesibilidad en el módulo de aprendizaje sobre la accesibilidad.
Esta sección cubrirá algunos de los elementos HTML básicos que usarás para
el marcado de texto.
Los elementos de encabezado permiten especificar que ciertas partes del
contenido son encabezados, o subencabezados del contenido. De la misma forma
que un libro tiene un título principal, y que a su vez puede tener títulos por
cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede
tenerlos también. HTML posee seis niveles de encabezados, <h1> (en-US)–<h6> (en-US), aunque probablemente solo llegues a usar 3-4 como mucho:
<h1>Mi
título principal</h1>
<h2>Mi
título de nivel superior</h2>
<h3>Mi
subtítulo</h3>
<h4>Mi
sub-subtítulo</h4>
Intenta ahora añadir un título apropiado para tu página HTML, antes de tu
elemento <img>.
Nota: verás que el encabezamiento de nivel 1 tiene un
estilo implícito. No utilices elementos de encabezado para hacer el texto más
grande o más oscuro, porque este elemento se utiliza por accesibilidad y otras razones como el posicionamiento en buscadores (Search
Engine Optimization, SEO). Intenta crear una secuencia significativa de
encabezados en tus páginas, sin saltarte niveles.
Como se explicó más arriba, los elementos <p> se utilizan
para encerrar párrafos de texto; los usarás frecuentemente para el marcado de
contenido de texto regular:
<p>Este
es un simple parrafo</p>
Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de
cuando estudiaste ¿Cuál será la apariencia de tu sitio web?),
colocados directamente debajo del elemento <img>.
Mucho del contenido web está dado por listas, así que HTML tiene elementos
especiales para ellas. El marcado de listas se realiza siempre en al menos dos
elementos. Los dos tipos de listas más comunes son las listas ordenadas y las
desordenadas:
- Las
listas desordenadas son aquellas en las
que el orden de los items no es relevante, como en una lista de compras.
Estas son encerradas en un elemento <ul> (unordered
list).
- Las
listas ordenadas son aquellas en las que el orden sí es
relevante, como en una receta. Estas son encerradas en un elemento <ol> (ordered
list).
Cada elemento de la lista se coloca dentro de un elemento <li> (list
item).
Por ejemplo, si quieres transformar parte del siguiente párrafo en una
lista:
<p>En
Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que
trabajan juntos... </p>
Podrías hacer lo siguiente:
<p>En
Mozilla, somos una comunidad de</p>
<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>constructores</li>
</ul>
<p>trabajando
juntos... </p>
Intenta agregar una lista ordenada o desordenada en tu página de ejemplo.
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la
web—. Para implementar un vínculo, necesitas usar un vínculo simple — <a> — la a es
la abreviatura de la palabra inglesa «anchor» («ancla»). Para convertir
algún texto dentro de un párrafo en un vínculo, sigue estos pasos:
- Elige
algún texto. Nosotros elegimos «Manifesto Mozilla».
- Encierra
el texto en un elemento <a>, así:
<a>Manifesto
Mozilla</a>
- Proporciónale
al elemento <a> un atributo href, así:
<a
href="">Manifesto Mozilla</a>
- Completa
el valor de este atributo con la dirección web con la que quieras conectar
al vínculo:
<a
href="https://www.mozilla.org/es-AR/about/manifesto/">Manifesto
Mozilla</a>
Podrías obtener resultados inesperados si al comienzo de la dirección web
omites la parte https:// o http:// llamada protocolo. Así que luego del marcado del vínculo,
haz clic en él para asegurarte que te dirige a la dirección deseada.
href podría parecer, en principio, una opción un tanto oscura para un
nombre de atributo. Si tienes problemas para recordarla, recuerda que se
refiere a hypertext reference (referencia
de hipertexto).
Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.
Las etiquetas o tags son la forma de escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>
. Donde <etiqueta>
es la etiqueta de apertura y </etiqueta>
es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos. Leer mas... ¿Que son las etiquetas HTML?
En la siguiente tabla se enlista todas las etiquetas disponibles en HTML.
Etiqueta | Descripción |
---|---|
<!-- --> | Etiqueta para escribir comentarios en HTML. |
<!DOCTYPE> | Declaración del tipo de documento. |
<a> | Etiqueta para incluir enlaces (links) hacia otras páginas o documentos. |
<abbr> | Indicar una abreviación o acrónimo. |
<acronym> | Indicar un acrónimo. |
<address> | Etiqueta para incluir información de contacto. |
<applet> | Insertar un applet en la página html. |
<area> | Define un area de una imágen en donde se puede hacer clic. |
<article> | Etiqueta semántica de HTML5 que indica la hubicación de un artículo. |
<aside> | Etiqueta semántica de HTML5 para indicar una barra lateral |
<audio> | Insertar audio. |
<b> | Convierte el texto a negritas. |
<base> | Definir una URL raíz para los enlaces relativos de nuestra página. |
<basefont> | Especifica tamaño, color y fuente por defecto de la página. |
<bdi> | Aisla parte de un texto que podría estar en otro idioma o formato. |
<bdo> | Cambia la dirección del texto. |
<big> | Aumenta el tamaño del texto. |
<blockquote> | Citar contenido de otro sitio web dentro de un bloque. |
<body> | Etiqueta que define el cuerpo de un documento HTML. |
<br> | Indica una salto de línea. |
<button> | Crear un botón en donde se puede hacer clic. |
<canvas> | Etiqueta para definir un contenedor o lienzo para crear gráficos. |
<caption> | Define el título de una tabla. |
<center> | Centra el contenido. |
<cite> | Cita o referencia de algún libro, película, artículo o algún trabajo de otro autor. |
<code> | Indica que el texto es código fuente de algún lenguaje informático. |
<col> | Especifíca propiedades de atributos de las columnas de una tabla. |
<colgroup> | Define un grupo de columnas de una tabla para darles formato. |
<datalist> | Crea una lista de opciónes para una caja de texto input. |
<dd> | Define un término en una lista de definiciones. |
<del> | Indica invalidez a un fragmento de texto tachandolo con una línea horizontal. |
<details> | Especifica detalles que el usuario puede desplegar u ocultar. |
<dfn> | Marca un término o definición. |
<dialog> | Mostrar una caja de diálogo. |
<dir> | Define una lista de directorios. |
<div> | Crea un bloque. |
<dl> | Define una lista de definiciones. |
<dt> | Define un término en una lista de definiciones. |
<em> | Enfatizar parte del texto. |
<embed> | Crea un contenedor para una aplicación externa. |
<fieldset> | Agrupa campos de un formulario relacionados entre si. |
<figcaption> | Escribir una leyenda o texto asociado a una figura o imagen. |
<figure> | Define un contenedor de figuras como imágenes, fotos, diagramas, etc. |
<font> | Da formato al texto (fuente, tamaño, color, etc.). |
<footer> | Define el pie de página. |
<form> | Para definir un formulario. |
<frame> | Define una ventana o frame de una página externa dentro de un frameset. |
<frameset> | Define un frameset dentro del cual puede haber varios frames. |
<h1> ... <h6> | Encabezados de HTML |
<head> | Etiqueta que define la cabecera de un documento HTML. |
<header> | Para indicar el encabezado de una página. |
<hr> | Indica un cambio en la temática de la página y queda señalado con una línea horizontal. |
<html> | Etiqueta que indica el inicio y final de un documento HTML. |
<i> | Muestra el texto en itálica. |
<iframe> | Define una ventana o frame interno. |
<img> | Etiqueta para insertar imágenes. |
<input> | Añade un cuadro de entrada de texto a un formulario. |
<ins> | Indica que el texto a sido insertado en lugar de otro. |
<kbd> | Indica texto introducido por medio del teclado. |
<keygen> | Encriptar datos de un formulario. |
<label> | Define una etiqueta relacionada a un elemento <input> de un formulario. |
<legend> | Escribe un nombre o leyenda en un cuadro generado por la etiqueta <fieldset>. |
<li> | Define un elemento de una lista. |
<link> | Realiza un enlace entre la página y un elemento o recurso externo. |
<main> | Indica el contenido principal de una página. |
<map> | Permite dividir una imagen para hacer clic en distintas áreas de la misma. |
<mark> | Remarca un texto de un color. |
<menu> | Permite crear un menú personalizado al hacer clic derecho con el mouse. |
<menuitem> | Define un elemento de un menu creado con la etiqueta <menu>. |
<meta> | Define los metadatos que van dentro de la etiqueta <heaad> |
<meter> | Indica una medida dentro de un rango representada por una barra progresiva. |
<nav> | Define una grupo de enlaces de navegación. |
<noframes> | Muestra un contenido alterno en caso de que los frames no sean soportados. |
<noscript> | Muestra un contenido altero en caso de que un script no sea soportado. |
<object> | Insertar objetos embebidos como audio, video o aplets. |
<ol> | Define una lista ordenada numericamente o alfabeticamente. |
<optgroup> | Agrupa opciones relacionadas en una lista desplegable. |
<option> | Define una opcion en una lista desplegable. |
<output> | Indica el resultado de salida de una operación. |
<p> | Para escribir un párrafo. |
<param> | Define paramentros de un objeto de la etiqueta <object>. |
<pre> | Etiqueta para escribir texto pre-formateado. |
<progress> | Etiqueta para insertar una barra prograsiva. |
<q> | Encierra un segmento de texto entre comillas. |
<s> | Tacha texto con una linea horizontal. |
<samp> | Indica que el texto es un ejemplo de salida de un programa de computadora. |
<script> | Etiqueta para insertar un script. |
<section> | Define una seccion de la página. |
<select> | Define una lista desplegable en un formulario. |
<small> | Etiqueta que cambia el texto a un tamaño mas pequeño. |
<source> | Indica la dirección de un recurso de audio o video. |
<span> | Define una sección de un texto. |
<strike> | Indica invalidez a un fragmento de texto tachandolo con una línea horizontal. |
<strong> | Marca texto importante del documento en negrita. |
<style> | Etiqueta para agregar un estilo CSS dentro del documento HTML. |
<sub> | Indicar una subíndice. |
<summary> | Define un encabezado visible dentro de una etiqueta <details> |
<sup> | Indicar una superíndice. |
<table> | Inserta una tabla en la página. |
<tbody> | Define el cuerpo de una tabla. |
<td> | Agregar una columna en una tabla |
<textarea> | Define un área de texto para ingresar texto desde un formulario. |
<tfoot> | Indica el contenido que forma el pie de una tabla. |
<th> | Agrega una "columa encabezado" a una tabla. |
<thead> | Define el encabezado de una tabla. |
<time> | Indica una hora o fecha. |
<title> | Indica el título de la página. |
<tr> | Inserta una fila o renglón en una tabla. |
<track> | Especifica tracks de texto para elementos multimedia de audio o video. |
<tt> | Texto teletipo. |
<u> | Definir texto subrayado. |
<ul> | Define una lista |
<var> | Indica que el texto es una variable. |
<video> | Insertar un video. |
<wbr> | Indica un posible cambio de linea en el texto segun el tamaño del contenedor. |
Editor de HTML textual
Un editor de HTML textual muestra el código línea a línea, exactamente como se ha escrito.
Es adecuado para: desarrolladores con experiencia, que desean tener un mayor control sobre su código y evitar el relleno innecesario.
Editor de HTML WYSIWYG
WYSIWYG son las siglas en inglés de “Lo que ves es lo que obtienes” (“What You See Is What You Get”). Cuando diseñas una página en un editor WYSIWYG sabes exactamente el aspecto que tendrá sin necesidad de subirla o probarla. La mayoría de estas herramientas cuentan con funcionalidades de diseño tipo arrastrar y soltar, por lo que son muy fáciles de usar.
Es adecuado para: programadores con poca experiencia y a los que les importa más el diseño que el código.
¿Hay editores de HTML gratuitos?
Existe una lista interminable de herramientas de programación útiles, pero si estás aprendiendo a programar o arrancando tu empresa de diseño web, es posible que no cuentes con mucho dinero para invertir en ellas.
Por suerte para ti, existen bastantes editores de HTML gratuitos y de código abierto; en este artículo, sin ir más lejos, figuran 14 opciones por orden alfabético, separadas en dos secciones (texto y WYSIWYG) y acompañadas de una breve descripción de sus capacidades.
Editores de HTML textuales gratuitos
Recuerda que si deseas usar este tipo de editores, deberás contar con amplios conocimientos de HTML (o del lenguaje de programación que quieras emplear), ya que este software te ayudará a solventar errores, pero no escribirá el código por ti.
Aptana Studio es un IDE de código abierto personalizable. Además de HTML5, puede emplearse para editar CSS, JavaScript, PHP, Ruby, Rails y Python. Se integra con Git para facilitar el control de versiones y puede implementar protocolos FTP, SFTP, FTPS y Capistrano. Se actualizó por última vez en marzo de 2017.
Arachnophilia es un editor de HTML de código abierto desarrollado en Java; Paul Lutus, su creador, boicotea los productos de Microsoft. Es compatible con Unicode y puede usarse para editar proyectos en PHP, Perl, C++, Java y JavaScript. También cuenta con un cliente FTP integrado que facilita la implementación. Se actualizó por última vez en noviembre de 2016.
3. Bluefish
El editor de código abierto Bluefish puede ejecutarse en Linux, Mac OS X, FreeBSD, OpenBSD y Solaris. Es compatible con protocolos FTP, SFTP, HTTP, HTTPS, WebDAV y CIFS. En el caso de proyectos grandes, Bluefish puede abrir más de 500 documentos de manera simultánea y recupera automáticamente los cambios realizados en los mismos si el sistema falla mientras estás editando. También es compatible con otros lenguajes, como C++, Google Go, Java, Perl, PHP, Python y R. Se actualizó por última vez en enero de 2017.
Responsive Site Designer cuenta con un editor textual de HTML gratuito. Si buscas un entorno de tipo WYSIWYG, también está disponible su “Visual Editor” con un coste adicional. CoffeeCup puede crear archivos HTML y CSS, además de editar los archivos web existentes. También es posible actualizar el contenido de las páginas mediante su biblioteca de componentes.
5. Eclipse
Eclipse ofrece distintos plugins (entre los que se encuentra un editor de HTML) en su kit de herramientas web de código abierto para desarrolladores. También cuenta con plugins para la edición de CSS, JSON y JavaScript. Su página web advierte que “puede resultar confuso para los nuevos usuarios” que solo deseen editar código HTML. Por ello, probablemente no sea la opción idónea para los novatos, pero los programadores expertos pueden apreciar la flexibilidad de Eclipse. Se actualizó por última vez en julio de 2017.
6. Komodo IDE
Komodo IDE de ActiveState ofrece licencias de pago y, además, una versión reducida de su software de forma gratuita. Esta versión sin cargo incluye algunas de las sólidas funciones de la versión de pago, como las herramientas de depuración y autocompletado. También permite editar otros lenguajes como Python, Perl y Node.js.
7. Microsoft Visual Studio Community
Si no eres como Paul Lutus, el creador de Arachnophilia, que boicotea a Microsoft, deberías probar la edición gratuita “Community” del IDE Visual Studio de Microsoft, que admite hasta cinco usuarios. Aunque las versiones de pago ofrecen funciones más avanzadas, la versión gratuita incluye todas las herramientas esenciales de edición de HTML. Además, algunas de sus funcionalidades son útiles para el desarrollo de aplicaciones móviles, como la posibilidad de compartir código entre Android e iOS.
8. NetBeans
NetBeans es un IDE gratuito y de código abierto que te ayudará a desarrollar proyectos en HTML5, PHP, JavaScript, C++ y otros lenguajes. Ofrece plantillas y generadores de código, así como herramientas de gestión de proyectos para organizar equipos y proyectos de envergadura. También tiene una gran tienda de plugins y permite a los desarrolladores programar y compartir los suyos propios. Se actualizó por última vez en septiembre de 2016.
9. Notepad++
Notepad++, disponible únicamente para usuarios de Windows, es un editor gratuito y de código abierto programado en C++. Su interfaz de usuario es totalmente personalizable, por lo que el usuario puede decidir cómo quiere destacar y cerrar la sintaxis. Además, si te preocupa el medio ambiente, te interesará saber que Notepad++ trata de reducir las emisiones de carbono con la creación de programas que necesiten menos potencia de CPU para su ejecución. Se actualizó por última vez en agosto de 2017.
10. NoteTab Light
NoteTab deja claro en su descripción de producto que no es un software para aquellos que prefieran editores de tipo WYSIWYG, pero también es una buena opción para quienes busquen un editor específico de HTML gratuito. Sus creadores afirman que su método minimalista para destacar la sintaxis facilita la lectura del código HTML o CSS en comparación con otros editores. Además, cuenta con atajos de teclado para la introducción de fragmentos de código personalizables, por lo que no es necesario perder tiempo copiando y pegando fragmentos de un proyecto a otro. Si buscas un conjunto más completo de características, NoteTab también ofrece versiones “Standard” y “Pro” de su producto.
11. PSPad
PSPad es otra solución disponible únicamente para Windows. Algunos de los productos de esta lista no han sido ideados para su uso comercial (especialmente los que cuentan con versiones de pago), pero PSPad es siempre gratuito y permite el uso comercial y administrativo sin coste alguno. Este software ofrece plantillas de código y funciones de corrección ortográfica y autocorrección. Se actualizó por última vez en marzo de 2017.
Editores de HTML WYSIWYG gratuitos
Los diseñadores y programadores principiantes pueden usar la mayoría de estos editores. Algunos de ellos generan el código a medida que se arrastran y colocan los elementos en el lugar deseado de la página; otros muestran el código y permiten editarlo según las necesidades del usuario, apareciendo los cambios en pantalla y facilitando la modificación del diseño en tiempo real.
12. BlueGriffon
BlueGriffon ofrece versiones de pago de su producto, pero la gratuita cuenta con las herramientas básicas necesarias para el diseño de páginas web. Es uno de los tres editores WYSIWYG de esta lista y, según su página web, está “recomendado oficialmente por el gobierno de Francia como herramienta de creación web para la administración nacional”. Así pues, si confías en el gusto de los franceses en cuanto a editores de HTML, esta es la herramienta adecuada.
BlueGriffon permite visualizar el código fuente y el diseño WYSIWYG al mismo tiempo. Así puedes rastrear el código y, a la vez, asegurarte de que tu diseño se ve perfecto. También cuenta con capacidades de edición de CSS y SVG. Las funciones adicionales de la versión de pago del producto incluyen características orientadas al diseño, como editor a pantalla completa, cuentagotas para la selección de color y advertencias de número de palabras.
13. NetObjects Fusion Essentials
NetObjects Fusion se describe como un “generador de HTML en lugar de un editor de HTML”. Su función de diseño, del tipo arrastrar y soltar, muestra la página tal como la verán los usuarios. La versión gratuita permite crear páginas web en HTML5 con galerías de imágenes, formularios y funciones de comercio electrónico.
14. SeaMonkey
SeaMonkey es una “suite de aplicaciones de internet todo en uno” de código abierto compuesta por navegador, cliente de correo electrónico, chat y herramientas de desarrollo web, entre las que se incluye un editor de HTML. Quizás no sea la opción ideal para los que busquen únicamente un editor de HTML, pero será una buena solución para aquellos desarrolladores que quieran una experiencia de internet integral. El proyecto ha sido desarrollado por Mozilla y, por ello, usa buena parte del código fuente de Firefox y Thunderbird. Se actualizó por última vez en julio de 2017.
PRIMER PERIODO
Cuestionario
1. ¿Qué es un diagrama de flujo? R.- El diagrama de flujo o diagrama de acti
vidades es la representación gráfica d
el algoritmo o proceso. Se utiliza en dis
ciplinas como programación, economía, procesos industriales y psicología cognitiva
2. ¿Cuál es el objetivo de los diagramas de flujo?
R.- Representar gráficamente las distintas etapas de un proceso y sus interacciones, para facilitar la comprensión de su funcionamiento.
3. ¿Qué representan los símbolos en un diagrama de flujo?
Óvalo o Elipse: Inicio y término (Abre y/o cierra el diagrama).
Rectángulo: Actividad (Representa la ejecución de una o más actividades o procedimientos).
Rombo: Decisión (Fórmula una pregunta o cuestión).
Círculo: Conector (Representa el enlace de actividades con otra dentro de un procedimiento).
Triángulo boca abajo: Archivo definitivo (Guarda un documento en forma permanente).
Triángulo boca arriba: Archivo temporal (Proporciona un tiempo para el almacenamiento del documento).
4. ¿Qué representan las líneas en un diagrama de flujo?
R.- El seguimiento de diagrama
5. ¿Cómo se lee un diagrama de flujo?
R.- De manera vertical como de arriba para abajo
6. ¿Qué es una estructura o diagrama de flujo secuencial?
R.- muestra la interacción de un conjunto de objetos en una aplicación a través del tiempo y se modela para cada caso de uso.
7. ¿Qué es un algoritmo?
R.- Un Algoritmo, se puede definir como una secuencia de instrucciones que representan un modelo de solución para determinado tipo de problemas
8. ¿Qué es una variable?
R.- En programación, las variables son espacios reservados en la memoria que, como su nombre indica, pueden cambiar de contenido a lo largo de la ejecución de un programa
9. ¿Qué es una constante?
R.- En programación, una constante es un valor que no puede ser alterado durante la ejecución de un programa.
Una constante corresponde a una longitud fija de un área reservada en la memoria principal del ordenador, donde el programa almacena valores fijos.
10. ¿Qué es una asignación?
R.- El valor que se le da a una variable
11. ¿Qué es un proceso?
R.- Un proceso puede informalmente entenderse como un programa en ejecución. Formalmente un proceso es «Una unidad de actividad que se caracteriza por la ejecución de una secuencia de instrucciones, un estado actual, y un conjunto de recursos del sistema asociados»
12. ¿Qué es el pseudocódigo?
R.- En ciencias de la computación, y análisis numérico el pseudocódigo (o falso lenguaje) es una descripción informal1 de alto nivel de un algoritmo informático de programación, compacto e informal, que utiliza las convenciones estructurales de un lenguaje de programación verdadero, pero que está diseñado para la lectura humana en lugar de la lectura mediante máquina, y con independencia de cualquier otro lenguaje de programación. Normalmente, el pseudocódigo omite detalles que no son esenciales para la comprensión humana del algoritmo, tales como declaraciones de variables, código específico del sistema y algunas subrutinas.
13. ¿Qué es el diagrama de flujo condicional?
R.- comparan una variable contra otro(s)valor (es), para que en base al resultado de esta comparación, se siga un curso de acción dentro del programa
14. ¿Cuál es el diagrama de flujo repetitivo?
R.- Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones varias veces.
R.- El diagrama de flujo o diagrama de acti
vidades es la representación gráfica d
el algoritmo o proceso. Se utiliza en dis
ciplinas como programación, economía, procesos industriales y psicología cognitiva
2. ¿Cuál es el objetivo de los diagramas de flujo?
R.- Representar gráficamente las distintas etapas de un proceso y sus interacciones, para facilitar la comprensión de su funcionamiento.
3. ¿Qué representan los símbolos en un diagrama de flujo?
Óvalo o Elipse: Inicio y término (Abre y/o cierra el diagrama).
Rectángulo: Actividad (Representa la ejecución de una o más actividades o procedimientos).
Rombo: Decisión (Fórmula una pregunta o cuestión).
Círculo: Conector (Representa el enlace de actividades con otra dentro de un procedimiento).
Triángulo boca abajo: Archivo definitivo (Guarda un documento en forma permanente).
Triángulo boca arriba: Archivo temporal (Proporciona un tiempo para el almacenamiento del documento).
4. ¿Qué representan las líneas en un diagrama de flujo?
R.- El seguimiento de diagrama
5. ¿Cómo se lee un diagrama de flujo?
R.- De manera vertical como de arriba para abajo
6. ¿Qué es una estructura o diagrama de flujo secuencial?
R.- muestra la interacción de un conjunto de objetos en una aplicación a través del tiempo y se modela para cada caso de uso.
7. ¿Qué es un algoritmo?
R.- Un Algoritmo, se puede definir como una secuencia de instrucciones que representan un modelo de solución para determinado tipo de problemas
8. ¿Qué es una variable?
R.- En programación, las variables son espacios reservados en la memoria que, como su nombre indica, pueden cambiar de contenido a lo largo de la ejecución de un programa
9. ¿Qué es una constante?
R.- En programación, una constante es un valor que no puede ser alterado durante la ejecución de un programa.
Una constante corresponde a una longitud fija de un área reservada en la memoria principal del ordenador, donde el programa almacena valores fijos.
10. ¿Qué es una asignación?
R.- El valor que se le da a una variable
11. ¿Qué es un proceso?
R.- Un proceso puede informalmente entenderse como un programa en ejecución. Formalmente un proceso es «Una unidad de actividad que se caracteriza por la ejecución de una secuencia de instrucciones, un estado actual, y un conjunto de recursos del sistema asociados»
12. ¿Qué es el pseudocódigo?
R.- En ciencias de la computación, y análisis numérico el pseudocódigo (o falso lenguaje) es una descripción informal1 de alto nivel de un algoritmo informático de programación, compacto e informal, que utiliza las convenciones estructurales de un lenguaje de programación verdadero, pero que está diseñado para la lectura humana en lugar de la lectura mediante máquina, y con independencia de cualquier otro lenguaje de programación. Normalmente, el pseudocódigo omite detalles que no son esenciales para la comprensión humana del algoritmo, tales como declaraciones de variables, código específico del sistema y algunas subrutinas.
13. ¿Qué es el diagrama de flujo condicional?
R.- comparan una variable contra otro(s)valor (es), para que en base al resultado de esta comparación, se siga un curso de acción dentro del programa
14. ¿Cuál es el diagrama de flujo repetitivo?
R.- Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones varias veces.
Algoritmo
En informática, un algoritmo es una secuencia de instrucciones secuenciales, gracias al cual pueden llevarse a cabo ciertos procesos y darse respuesta a determinadas necesidades o decisiones. Se trata de conjuntos ordenados y finitos de pasos, que nos permiten resolver un problema o tomar una decisión.
Partes de un algoritmo
Todo algoritmo debe constar de las siguientes partes:
- Input o entrada. El ingreso de los datos que el algoritmo necesita para operar.
- Proceso. Se trata de la operación lógica formal que el algoritmo emprenderá con lo recibido del input.
- Output o salida. Los resultados obtenidos del proceso sobre el input, una vez terminada la ejecución del algoritmo.
¿Para qué sirve un algoritmo?
Dicho muy llanamente, un algoritmo sirve para resolver paso a paso un problema. Se trata de una serie de instrucciones ordenadas y secuenciadas para guiar un proceso determinado.
En las Ciencias de la computación, no obstante, los algoritmos constituyen el esqueleto de los procesos que luego se codificarán y programarán para que sean realizados por el computador.
Tipos de algoritmos
Existen cuatro tipos de algoritmos en informática:
- Algoritmos computacionales. Un algoritmo cuya resolución depende del cálculo, y que puede ser desarrollado por una calculadora o computadora sin dificultades.
- Algoritmos no computacionales. Aquellos que no requieren de los procesos de un computador para resolverse, o cuyos pasos son exclusivos para la resolución por parte de un ser humano.
- Algoritmos cualitativos. Se trata de un algoritmo en cuya resolución no intervienen cálculos numéricos, sino secuencias lógicas y/o formales.
- Algoritmos cuantitativos. Todo lo contrario, es un algoritmo que depende de cálculos matemáticos para dar con su resolución.
Características de los algoritmos
Los algoritmos presentan las siguientes características:
- Secuenciales. Los algoritmos operan en secuencia, debe procesarse uno a la vez.
- Precisos. Los algoritmos han de ser precisos en su abordaje del tema, es decir, no pueden ser ambiguos o subjetivos.
- Ordenados. Los algoritmos se deben establecer en la secuencia precisa y exacta para que su lectura tenga sentido y se resuelva el problema.
- Finitos. Toda secuencia de algoritmos ha de tener un fin determinado, no puede prolongarse hasta el infinito.
- Concretos. Todo algoritmo debe ofrecer un resultado en base a las funciones que cumple.
- Definidos. Un mismo algoritmo ante los mismos elementos de entrada (input) debe dar siempre los mismos resultados.
Ejemplos de algoritmos
Un par de ejemplos posibles de algoritmo son:
Algoritmo para elegir unos zapatos de fiesta:
- INICIO
- Entrar a la tienda y buscar la sección de zapatos de caballero.
- Tomar un par de zapatos.
- ¿Son zapatos de fiesta?
SI: (ir al paso 5) – NO: (volver al paso 3)
- ¿Hay de la talla adecuada?
SI: (ir al paso 6) – NO: (volver al paso 3)
- ¿El precio es pagable?
SI: (ir al paso 7) – NO: (volver al paso 3)
- Comprar el par de zapatos elegido.
- FIN
Fuente: https://concepto.de/algoritmo-en-informatica/#ixzz7P93r9OGO
Fuente: https://concepto.de/algoritmo-en-informatica/#ixzz7P93Mv084
Comentarios
Publicar un comentario