organize the information of the video-articles

This commit is contained in:
Jesús 2019-04-12 11:59:11 -05:00
parent c864a650de
commit 4f9419993e
No known key found for this signature in database
GPG Key ID: F6EE7BC59A315766
22 changed files with 142 additions and 55 deletions

View File

@ -15,11 +15,13 @@ Title: Citizenfour
# Citizenfour
En enero de 2013, **Laura Poitras** comenzó a recibir correos electrónicos
cifrados firmados por un tal **"Citizenfour"**
<details markdown="span">
<summary>Mostrar Más</summary>
En enero de 2013, **Laura Poitras** comenzó a recibir correos electrónicos
cifrados firmados por un tal **"Citizenfour"**, que le aseguraba tener
pruebas de los programas de vigilancia ilegales dirigidos por la NSA
[...] que le aseguraba tener pruebas de los programas de vigilancia
ilegales dirigidos por la NSA
en colaboración con otras agencias de inteligencia en todo el mundo.
Cinco meses más tarde, junto con los periodistas **Glenn Greenwald** y
**Ewen MacAskill** voló a **Hong Kong** para el primero de muchos encuentros
@ -28,7 +30,3 @@ Para sus encuentros, viajó siempre con una cámara.
La película resultante es la historia que se desarrolla ante nuestros
ojos en este documental.
</details>
<p class="has-text-right">
<small><strong>VideoTime: </strong>1h 48min 40sec</small>
</p>

View File

@ -16,14 +16,13 @@ Title: ¿Cómo generar Freak Spot?
# ¿Cómo generar Freak Spot?
Alguno que otro usuario se ha preguntado alguna vez
cómo generar el sitio web [freakspot][site]{:target="_blank" rel="noopener noreferrer"},
la verdad es que es bastante sencillo una vez explicado.
Es por ello que en el siguiente vídeo se detallan los pasos a seguir.
<details markdown="span">
<summary>Mostrar Más</summary>
Alguno que otro usuario se ha preguntado alguna vez
cómo generar el sitio web [freakspot][site], la verdad es que es bastante sencillo
una vez explicado. Es por ello que en el siguiente vídeo se detallan
los pasos a seguir.
<div class="mt-2">
<ol>
<li>Clonación del repositorio e ingreso al directorio de trabajo

View File

@ -16,6 +16,8 @@ Title: Codificación HTML5
# Codificación HTML5 4/32
La etiqueta `<span>` se utiliza para agrupar elementos en línea en un documento.
<details markdown="span">
<summary>Mostrar Más</summary>
Código de ayuda:
@ -23,7 +25,9 @@ Código de ayuda:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
~~~~
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
</details>
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,15 @@ Title: Etiqueta a
# Etiqueta a 9/32
Si el elemento `a` tiene un atributo href, entonces representa un hipervínculo (un ancla de hipertexto).
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<a>` en la [w3schools][w3school]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3school]: https://www.w3schools.com/tags/tag_a.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,16 @@ Title: Etiqueta article
# Etiqueta article 13/32
Representa una sección de una página que consta de una composición que
forma parte independiente de un documento, página o sitio.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<article>` en la [w3schools][w3-article]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-article]: https://www.w3schools.com/tags/tag_article.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,16 @@ Title: Etiqueta aside
# Etiqueta aside 14/32
Representa una sección de una página que consiste en una información que está relacionado tangencialmente
con la información de alrededor del elemento aparte, y que podría considerarse separado de la información principal.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<aside>` en la [w3schools][w3-aside]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-aside]: https://www.w3schools.com/tags/tag_aside.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,13 +15,18 @@ Title: Etiqueta nav ul ol li
# Etiqueta nav ul ol li 8/32
- El elemento de navegación «nav» es una sección que contiene enlaces a otros documentos o partes del documento actual.
- El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante.
- El elemento ol representa una lista de artículos, donde los artículos han sido ordenados intencionalmente.
- El elemento li representa un elemento de lista.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<nav>` en la [w3schools][w3-nav]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<ul>` en la [w3schools][w3-ul]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<ol>` en la [w3schools][w3-ol]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<li>` en la [w3schools][w3-li]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-nav]: https://www.w3schools.com/tags/tag_nav.asp
@ -29,3 +34,5 @@ Title: Etiqueta nav ul ol li
[w3-ol]: https://www.w3schools.com/tags/tag_ol.asp
[w3-li]: https://www.w3schools.com/tags/tag_li.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,16 @@ Title: Etiqueta section
# Etiqueta section 12/32
Representa un documento genérico o sección de aplicación. En este contexto, una sección es una agrupación
temática de la información, normalmente con un encabezado, posiblemente con un pie de página.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<section>` en la [w3schools][w3-section]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-section]: https://www.w3schools.com/tags/tag_section.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,13 +15,19 @@ Title: etiquetas p y span
# Etiquetas p y span 10/32
El elemento `p` representa un párrafo y el elemento `span` no significa nada por sí solo,
pero puede ser útil cuando se usa junto con los atributos globales,
por ejemplo: class, lang o dir.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<p>` en la [w3schools][w3-p]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<span>` en la [w3schools][w3-span]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-p]: https://www.w3schools.com/tags/tag_p.asp
[w3-span]: https://www.w3schools.com/tags/tag_span.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,13 +15,18 @@ Title: Etiquetas strong y em
# Etiquetas strong y em 11/32
La etiqueta `strong` brinda una gran importancia a un parráfo, una palabra o una frase y
`em` representa el énfasis del estrés de sus contenidos.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más sobre la etiqueta `<strong>` en la [w3schools][w3-strong]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Más sobre la etiqueta `<em>` en la [w3schools][w3-em]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3-strong]: https://www.w3schools.com/tags/tag_strong.asp
[w3-em]: https://www.w3schools.com/tags/tag_em.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -16,11 +16,15 @@ Title: Header
# Header HTML5 5/32
Header representa el "encabezado" de un documento o sección de un documento.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más información sobre la etiqueta `<header>` en [w3schools][header]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[header]: https://www.w3schools.com/tags/tag_header.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -15,13 +15,23 @@ Title: hgroup
# Hgroup HTML5 7/32
Hgroup fue una etiqueta que apareció en HTML5, su función es agrupar las
etiquetas de títulos las `h`. Pero desde las versión 5.1 de HTML ya no se
recomienda debido a que tener demasiadas `h` de un mismo tipo traen problemas
de SEO.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Etiqueta hgroup en desuso.</p>
<p class="mb-0">Este elemento fue removido de la especificacion HTML5 (W3C), por favor no usar más.</p>
<p class="mb-0">Referencia: [https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup][mozilla-web]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Este elemento fue removido de la especificacion HTML5 por la W3C, por favor no usar más.</p>
<p class="mb-0">Referencia en [mozilla developers][mozilla-web]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[mozilla-web]: https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup
[validator]: https://validator.w3.org/
*[HTML]: Hyper Text Markup Language
*[HTML5]: Hyper Text Markup Language version 5
*[SEO]: Search Engine Optimization
*[W3C]: World Wide Web Consortium

View File

@ -16,12 +16,15 @@ Title: Introducción a HTML5
# Introducción a HTML5 1/32
HTML tiene una nueva versión desde hace unos años, hablamos de la versión 5 del mismo.
Trayendo consigo nuevas etiquetas, las llamadas etiquetas semánticas.
<details markdown="span">
<summary>Mostrar Más</summary>
<ul class="ml-3">
<li>[Respositorio oficial][html]{:target="_blank" rel="noopener noreferrer"} de HTML</li>
<li>[w3schools][w3c]{:target="_blank" rel="noopener noreferrer"}</li>
<li>[Documentación de la W3C][w3c.org]{:target="_blank" rel="noopener noreferrer"}</li>
<li>[Documentación][w3c.org]{:target="_blank" rel="noopener noreferrer"} de la W3C</li>
<li>[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</li>
</ul>
</details>
@ -30,3 +33,6 @@ Title: Introducción a HTML5
[w3c]: https://www.w3schools.com/html/default.asp
[w3c.org]: https://www.w3.org/TR/html/
[validator]: https://validator.w3.org/
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,19 @@ Title: Nuevas etiquetas de HTML5
# Nuevas etiquetas de HTML5 2/32
Las nuevas etiquetas de HTML5 ahora son semánticas, es decir que dan
sentido a la información escrita en una página web.
Podéis revisar en los enlaces de abajo o consultar en
[mozilla developers][mozilla-html5]{:target="_blank" rel="noopener noreferrer"}.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">Más información sobre HTML5 en [w3schools][w3c-html5]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Un [Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[w3c-html5]: https://www.w3schools.com/html/html5_intro.asp
[mozilla-html5]: https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
[validator]: https://validator.w3.org/
*[HTML5]: Hyper Text Markup Language version 5
*[W3C]: World Wide Web Consortium

View File

@ -16,9 +16,14 @@ Title: Sintaxis HTML5
# Sintaxis HTML5 3/32
En HTML5 se maneja una sintaxis simple sin tantos dolores de cabeza.
También coloco un enlace al [validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
para testear el código :).
A continuación se muestra la sintaxis básica.
<details markdown="span">
<summary>Mostrar Más</summary>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
Estructura básica:
~~~~{.html}
<!doctype html>
<html lang="en">
@ -33,3 +38,5 @@ Title: Sintaxis HTML5
</details>
[validator]: https://validator.w3.org/
*[HTML5]: Hyper Text Markup Language version 5
*[W3C]: World Wide Web Consortium

View File

@ -15,11 +15,16 @@ Title: Títulos en HTML5
# Títulos en HTML5 6/32
En el vídeo se explica de la importancia de las etiquetas
de título o también llamadas encabezados por su nombre en inglés
**heading**
<details markdown="span">
<summary>Mostrar más</summary>
<p class="mb-0">Más información sobre las etiquetas `h` en [w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.</p>
<p class="mb-0">[Validador][validator]{:target="_blank" rel="noopener noreferrer"}</p>
<p class="mb-0">Un [Validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C</p>
</details>
[titles]: https://www.w3schools.com/hTml/html_headings.asp
[validator]: https://validator.w3.org/
*[W3C]: World Wide Web Consortium

View File

@ -18,9 +18,8 @@ Title: Locutus de GNU
# Locutus de GNU
<details markdown="span">
<summary>Mostrar Más</summary>
Encontré [esta parodia](https://goblinrefuge.com/mediagoblin/u/locutus/m/locutus-de-gnu/)
Encontré [esta parodia][locutus]{:target="_blank" rel="noopener noreferrer"}
muy graciosa. Para entenderla al menos debéis saber qué son el software
libre y el software privativo. Espero que os guste.
</details>
[locutus]: https://goblinrefuge.com/mediagoblin/u/locutus/m/locutus-de-gnu/

View File

@ -15,19 +15,22 @@ Title: Prompt avanzado
# Prompt avanzado
<details markdown="span">
<summary>Mostrar Más</summary>
Muchas veces necesitamos del [intérprete de comandos][bash]
Mayormente necesitamos del [intérprete de comandos][bash]{:target="_blank" rel="noopener noreferrer"}
para realizar una que otra tarea, quizás resulte tedioso armar
nuestra propia configuración de `.bashrc`.
Pero como en la [World Wide Web][www] existe mucha información
útil, se ha logrado escribir una configuración prudente del ya
mencionado `.bashrc` para distros basadas en Arch como
[Hyperbola][hypersite] o [Parabola][parasite], en efecto estas
2 últimas son distros 100 % Libres.
<details markdown="span">
<summary>Mostrar Más</summary>
Pero como en la [World Wide Web][www]{:target="_blank" rel="noopener noreferrer"}
existe mucha información útil, se ha logrado escribir una
configuración prudente del ya mencionado `.bashrc` para distros
basadas en Arch como [Hyperbola][hypersite]{:target="_blank" rel="noopener noreferrer"} o
[Parabola][parasite]{:target="_blank" rel="noopener noreferrer"} , en efecto estas
2 últimas son [distros 100 % Libres][freedistros]{:target="_blank" rel="noopener noreferrer"}.
¿Y dónde consigo una copia?, sencillo puedes descargarlo desde
[notabug][notabug] bajo la Licencia [GPLv3][license].
[notabug][notabug]{:target="_blank" rel="noopener noreferrer"}
bajo la Licencia [GPLv3][license]{:target="_blank" rel="noopener noreferrer"}.
</details>
@ -35,5 +38,6 @@ mencionado `.bashrc` para distros basadas en Arch como
[www]: https://es.wikipedia.org/wiki/World_Wide_Web
[hypersite]: https://www.hyperbola.info/
[parasite]: https://www.parabola.nu/
[freedistros]: https://www.gnu.org/distros/free-distros.es.html
[notabug]: https://notabug.org/heckyel/hyperbash
[license]: https://www.gnu.org/licenses/gpl-3.0.html

View File

@ -14,19 +14,19 @@ Title: RMS en Dominio digital
# RMS en Dominio digital
El pasado 30 de mayo, [Richard M. Stallman][rms]{:target="_blank" rel="noopener noreferrer"}
se presentó en Argentina en el programa radial Dominio Digital.
Dado que hay bastantes puntos importantes que se tomaron
en cuenta durante el programa aquí os dejamos una copia de
la Entrevista en vídeo.
<details markdown="span">
<summary>Mostrar Más</summary>
El pasado 30 de mayo, [Richard M. Stallman][rms] se presentó en Argentina
en el programa radial Dominio Digital. Dado que hay bastantes
puntos importantes que se tomaron en cuenta durante el programa
aquí os dejamos una copia de la Entrevista en vídeo.
**Dominio Digital** es un programa sobre informática, emitido en Televisión
Argentina entre 1996 y 2011.En el año 2018 volvió en formato de radio.
Sus integrantes son **Claudio Regis** (Conductor) y **Daniela Gastaminza**,
**Alejandro Ponike** y **Daniel "Chacal"** Sentinelli (columnistas).
</details>
[rms]: https://es.wikipedia.org/wiki/Richard_Stallman

View File

@ -16,16 +16,19 @@ Title: Sin parar
# Sin parar
<details markdown="span">
<summary>Mostrar Más</summary>
«Desde que hace siglos apareciera el mayor invento creado por el hombre,
generación tras generación hay alguien encargado de revisarlo
minuciosamente [...] y que pueda seguir funcionando en todo el mundo sin
parar». Así comienza este cortometraje educativo sobre el sistema
capitalista. ¿Seguirá funcionando siempre **sin parar**?
El vídeo se encuentra bajo la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/">
<details markdown="span">
<summary>Mostrar Más</summary>
El vídeo se encuentra bajo la licencia <a href="http://creativecommons.org/licenses/by-sa/3.0/"
target="_blank" rel="noopener noreferrer">
<abbr title="Attribution-ShareAlike 3.0 Unported">CC BY-SA 3.0</abbr></a> y fue
obtenido de
[la instancia de Mediagoblin de Roaming Initiative](http://roaming-initiative.com/mediagoblin/u/rafapoverello/m/sin-parar/).
[la instancia de Mediagoblin de Roaming Initiative][sinparar]{:target="_blank" rel="noopener noreferrer"}
</details>
[sinparar]: http://roaming-initiative.com/mediagoblin/u/rafapoverello/m/sin-parar/

View File

@ -1,6 +1,6 @@
/*!
* Author: jesus e.
* Version: 1.2.2
* Version: 1.2.3
*/
@font-face {
font-family: 'Open Sans';
@ -19,7 +19,6 @@ body {
p {
line-height: 24px;
font-weight: 300;
}
a {
@ -443,6 +442,10 @@ input {
}
/* Main Content */
article ul, article ol {
margin-left: 1rem;
}
.main-videos h2 {
margin: 20px 0px 0px 0px;
font-weight: 900;

View File

@ -21,7 +21,7 @@
integrity="sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==">
<!-- Main Styling -->
<link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/styles.css" rel="stylesheet"
integrity="sha512-mKduf+g5XnY9yrr7FIa4RX+iprre7ZPora9ROTVIvPje3NCCitToxWlo0rmh+LhUlKTvtRWtFm70zBfqdNS/ow==">
integrity="sha512-p4cSeIVEYOeL0Opy7qudr1NODy0tjE64Y/IxR5tQtfSYOfl9I0vpzVDNaMWj516lgST/qhEE+OKX864TJYhPeQ==">
<!-- favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/favicon/favicon-192x192.png">