Bitácora digital
(Ejemplo)
[Link]
[Link]
[Link]
Objetivos de desarrollo sostenible
ODS
Los Objetivos de Desarrollo Sostenible (ODS) son el corazón de la Agenda 2030 y
muestran una mirada integral, indivisible y una colaboración internacional
renovada. En conjunto, construyen una visión del futuro que queremos.
Gracias a su visión de largo plazo, constituirán un apoyo para cada país en su senda
hacia un desarrollo sostenido, inclusivo y en armonía con el medio ambiente, a
través de políticas públicas e instrumentos de planificación, presupuesto,
monitoreo y evaluación.
Son:
- Universales
- Transformadores
- Civilizatorios
Interfaces y códigos para diseño
web (HTML, CSS, JS)
Parte 2
Es un editor de código y como otros
VS Code se apega a otras interfaces de
desarrollo de código.
Se puede desarrollar C, C++, C#, Java,
¿Qué es Visual JS Python, HYML, CSS, PHP y más.
Studio Code? Cuenta con:
- Editor
- Side Bar (Barra lateral)
- Status Bar (Barra de Estado)
- Activity Bar (Barra de Actividades)
- Panels (Paneles)
Intefaz de Visual Studio Code
[Link]
<b></b>
Apariencia de <i></i>
caracteres <sup></sup>
<sub></sub>
¡¡Más etiquetas!!
Apariencia de <br />
espacio <hr />
<b>
<b> Esta etiqueta que resume la palabra BOLD hace que los caracteres
aparezcan marcados en negrita.
Puede anidarse y presentar un caracter o conjunto de caracteres visualmente
en negrita, no implica algún significado adicional.
<i>
<i> Esta etiqueta que resume la palabra ITALIC hace que los caracteres
aparezcan marcados en cursiva.
Puede anidarse y presentar un caracter o conjunto de caracteres visualmente
en cursiva, no implica algún significado adicional.
<sup>
<sup> Esta etiqueta que resume la palabra SUPERSCRIPT corresponde a un
sufijo para la descripción de orden numérico y conceptos matemáticos de
potencia.
Puede anidarse y presentar un caracter o conjunto de caracteres visualmente
más pequeños y en la parte superior respecto del texto adicional.
<sub>
<sub> Esta etiqueta que resume la palabra SUBSCRIPT se usa para notas de pie
(referencias) o fórmulas químicas.
Puede anidarse y presentar un caracter o conjunto de caracteres visualmente
más pequeños y en la parte inferior respecto del contenido adicional.
<br />
<br /> Esta etiqueta que resume la palabra BREAK realiza un salto de linea. Si
se quiere introducir una línea en medio de un párrafo se puede usar <br />
Puede anidarse, pero no tiene contenido como tal.
<hr />
<hr /> Esta etiqueta que resume las palabras HORIZONTAL RULES realiza un
salto de linea. Se usa para separar ideas ,temas o escenas
Puede anidarse, pero no tiene contenido como tal.
Semántica
Existen algunos elementos que no tienen intención de afectar la estructura de
una página web, pero estos dan una información extra a las páginas. A esto le
conocemos como marcado semántico.
Sintáxis:
- Reglas y regulaciones para escribir cualquier sentencia en un lenguaje.
- Este no irrumpe en los significados.
- Está relacionado con la gramática y estructura de un lenguaje.
Semántica:
- Hace referencia a un significado asociado con la(s) sentencia(s).
- Interpreta el programa fácilmente.
- Se basa en la sintáxis.
<strong>
<strong> Esta etiqueta indica que el contenido es importante, le da énfasis al
contenido, por ese motivo al igual que la etiqueta <bold> le da el formato en
letra negrita al contenido.
<em>
<em> Esta etiqueta indica que el contenido es importante, le da énfasis al
contenido, por ese motivo al igual que la etiqueta <i> le da el formato en letra
cursiva al contenido.
<blockquote>
<blockquote> El elemento es usado para citas largas, como en caso de usar
elemento de párrafo <p> anidado externamente.
Este puede generar una sangría en la visibilidad de nuestro documento HTML
sin CSS, sin embargo, CSS puede modificar esto.
<abbr>
<abbr> Es usado para abreviaturas y acrónimos. Lleva siempre un atributo de
tito título, para especificar la palabra completa.
En HTML4 se separaba en dos etiquetas para los acrónimos, <acronym> y el
mismos parar abreviatura, en HTML5 se usa para ambos.
<cite>
<cite> Se usa cuando queremos hacer referencia a un libro, grabación, artículo
o documento e indica la procedencia de la cita.
Suele mostrar el contenido en cursiva.
<dfn>
<dfn> Se usa cuando por primera vez se explica una terminología, ya sea
académico o alguna jerga.
Algunos navegadores imprimen el contenido en cursiva, no suele pasar en
Chrome o Safari.
Listas
Hemos revisado 2 tipos de lista, <ol> y <ul>, la diferencia de uno a otro es el
orden de los elementos de lista.
Tenemos un tercer tipo de lista, que son las listas de definición donde:
<dl>:
Crea la lista donde se incluirán los términos y sus definiciones.
<dt>:
Es el elemento que declara el término.
<dd>;
Es el elemento en el que se declara la definición.
Listas anidadas
Es posible anidar una lista dentro de otra. En caso de las listas sin orden
específico, la viñeta suele variar respecto de la lista donde se encuentra
anidada.
Atributos
Es información adicional acerca de los elementos en HTML.
Siempre se escriben en la etiqueta inicial o de apertura del elemento y su
valor debe estar siempre entre “”.
Veremos a continuación los atributos para imágenes en nuestro desarrollo en
HTML.
- src: fuente u origen.
- alt: descripción de la imagen (en caso no se haga visible).
- Title: Título de la imagen.
- Height: Especifica el ancho de la imagen (pixeles).
- Width: Especifica el alto de la imagen (pixeles).
RESOLUCIÓN DE IMAGEN
Las imágenes creadas para WEB deben ser almacenadas en 72 ppi.
Mientras mayor sea la resolución, el peso o tamaño del documento
será mayor, esto conlleva a mayor tiempo de carga dependiendo
del usuario final y mayor gasto en datos.
Video y audio
Solo es admitido por navegadores a partir del 2002.
Deben estar en formato FLV
Veremos a continuación los atributos para imágenes en nuestro desarrollo en
HTML.
- src: fuente u origen.
- alt: descripción de la imagen (en caso no se haga visible).
- Title: Título de la imagen.
- Height: Especifica el ancho de la imagen (pixeles).
- Width: Especifica el alto de la imagen (pixeles).
TIMELINE
Las tecnologías web cambian rápidamente
y/o evolucionan. A continuación, se muestra
los cambios en animación, video y audio en la
web.
<div>
<div> Permite agrupar un conjunto de elementos que se encuentran juntos en
un block-level box.
Usando el tributo id o class se puede usar estilos de CSS a todo el grupo
contenido por las etiquetas <div>.
<span>
<span> Contiene una sección de texto que queremos diferenciar del resto
usando CSS usando los atributos correspondientes. Este texto suele mostrarse
en mayúsculas para resaltar del resto del contenido.
Video Flash en nuestra página WEB
Para esto debemos tomar en cuenta que solo se admiten objetos
SWF.
Agregar Video MP4
[Link] el origen del video.
[Link]
[Link] de inicio
[Link] controles o autoplay
Formato contenedor
Un códec comprime o
descomprime archivos
multimedia, como canciones
o vídeos. El Reproductor de
Windows Media y otras
aplicaciones utilizan códecs
para reproducir y crear
archivos multimedia.
[Link]
Listado de Formatos y códecs utilizados
Video alternativo
Se usa este método cuando nuestro video no es admisible por algunos
navegadores, entonces se usa otro origen.
Segmento de video
Se usa este recurso (valor) cuando solo queremos mostrar un
segemento del video.
En el primer caso partir del segundo 15 y el segundo solo entre los
segundos 25 y 45.
