Laravel 13 + Filament 5 admin panel and REST API for a non-profit developer collective, backed by the Pireon OAuth identity server. The public site is a separate, server-rendered application consuming /api/public/v1. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1357 lines
59 KiB
HTML
1357 lines
59 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Manual de uso · Panel del colectivo</title>
|
|
<style>
|
|
/* ── Página ─────────────────────────────────────────────────────────── */
|
|
@page { size: A4; margin: 20mm 18mm 18mm; }
|
|
|
|
:root {
|
|
--ink: #1a1c22;
|
|
--muted: #5b6070;
|
|
--line: #d9dce4;
|
|
--accent: #4338ca;
|
|
--accent-soft: #eef0fd;
|
|
--warn: #9a3412;
|
|
--warn-soft: #fff5ed;
|
|
--ok: #14532d;
|
|
--ok-soft: #f0fdf4;
|
|
--code-bg: #f4f5f8;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 10.5pt;
|
|
line-height: 1.55;
|
|
color: var(--ink);
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
/* ── Portada ────────────────────────────────────────────────────────── */
|
|
.cover {
|
|
height: 247mm;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
page-break-after: always;
|
|
}
|
|
.cover .eyebrow {
|
|
font-size: 10pt; letter-spacing: .18em; text-transform: uppercase;
|
|
color: var(--accent); font-weight: 700; margin-bottom: 14mm;
|
|
}
|
|
.cover h1 { font-size: 30pt; line-height: 1.15; margin: 0 0 6mm; letter-spacing: -.02em; }
|
|
.cover .sub { font-size: 13pt; color: var(--muted); max-width: 120mm; line-height: 1.5; margin: 0 0 16mm; }
|
|
.cover .rule { width: 28mm; height: 3px; background: var(--accent); margin: 12mm 0; }
|
|
.cover dl { display: grid; grid-template-columns: 34mm 1fr; gap: 2.5mm 6mm; font-size: 10pt;
|
|
margin: 0; padding-top: 6mm; border-top: 1px solid var(--line); max-width: 120mm; }
|
|
.cover dt { color: var(--muted); }
|
|
.cover dd { margin: 0; font-weight: 600; }
|
|
|
|
/* ── Estructura ─────────────────────────────────────────────────────── */
|
|
h2 {
|
|
font-size: 17pt; letter-spacing: -.01em; margin: 0 0 5mm;
|
|
padding-bottom: 2.5mm; border-bottom: 2px solid var(--accent);
|
|
page-break-after: avoid;
|
|
}
|
|
h2 .num { color: var(--accent); margin-right: 3mm; }
|
|
h3 { font-size: 12pt; margin: 8mm 0 2mm; page-break-after: avoid; }
|
|
h4 { font-size: 10.5pt; margin: 6mm 0 1mm; color: var(--muted);
|
|
text-transform: uppercase; letter-spacing: .06em; page-break-after: avoid; }
|
|
section { page-break-before: always; }
|
|
section#toc { page-break-before: avoid; }
|
|
p { margin: 0 0 3mm; }
|
|
ul, ol { margin: 0 0 3mm; padding-left: 5mm; }
|
|
li { margin-bottom: 1.5mm; }
|
|
strong { font-weight: 700; }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
|
|
code {
|
|
font-family: "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 9pt; background: var(--code-bg); padding: .5mm 1.2mm;
|
|
border-radius: 2px;
|
|
}
|
|
pre {
|
|
background: var(--code-bg); border-left: 3px solid var(--accent);
|
|
padding: 3mm 4mm; font-size: 8.5pt; line-height: 1.45;
|
|
overflow: hidden; white-space: pre-wrap; word-break: break-word;
|
|
margin: 0 0 4mm; page-break-inside: avoid;
|
|
}
|
|
pre code { background: none; padding: 0; }
|
|
|
|
/* ── Avisos ─────────────────────────────────────────────────────────── */
|
|
.note, .warn, .tip {
|
|
padding: 3mm 4mm; margin: 0 0 4mm; font-size: 9.5pt;
|
|
border-radius: 3px; page-break-inside: avoid;
|
|
}
|
|
.note { background: var(--accent-soft); border-left: 3px solid var(--accent); }
|
|
.warn { background: var(--warn-soft); border-left: 3px solid #ea580c; color: var(--warn); }
|
|
.tip { background: var(--ok-soft); border-left: 3px solid #16a34a; color: var(--ok); }
|
|
.note p:last-child, .warn p:last-child, .tip p:last-child { margin-bottom: 0; }
|
|
.label { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 8pt; display: block; margin-bottom: 1mm; }
|
|
|
|
/* ── Tablas ─────────────────────────────────────────────────────────── */
|
|
table { width: 100%; border-collapse: collapse; font-size: 9pt; margin: 0 0 4mm; page-break-inside: avoid; }
|
|
th, td { text-align: left; padding: 2mm 2.5mm; border-bottom: 1px solid var(--line); vertical-align: top; }
|
|
th { background: var(--code-bg); font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; }
|
|
td.c, th.c { text-align: center; }
|
|
.yes { color: #16a34a; font-weight: 700; }
|
|
.no { color: #cbd0da; }
|
|
.part { color: #ea580c; font-weight: 700; }
|
|
|
|
/* ── Índice ─────────────────────────────────────────────────────────── */
|
|
.toc { list-style: none; padding: 0; margin: 0; }
|
|
.toc li { display: flex; gap: 4mm; padding: 2mm 0; border-bottom: 1px dotted var(--line); }
|
|
.toc .n { color: var(--accent); font-weight: 700; width: 8mm; flex: none; }
|
|
.toc .t { font-weight: 600; }
|
|
.toc .d { color: var(--muted); font-weight: 400; }
|
|
|
|
.lead { font-size: 11pt; color: var(--muted); margin-bottom: 6mm; }
|
|
.footer-note { margin-top: 10mm; padding-top: 3mm; border-top: 1px solid var(--line);
|
|
font-size: 8.5pt; color: var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ══ PORTADA ══════════════════════════════════════════════════════════ -->
|
|
<div class="cover">
|
|
<div class="eyebrow">Manual de uso</div>
|
|
<h1>Panel del colectivo</h1>
|
|
<div class="rule"></div>
|
|
<p class="sub">
|
|
Cómo publicar proyectos, buscar gente, conectar los repositorios de Gitea
|
|
y llevar la web en castellano, inglés y catalán.
|
|
</p>
|
|
<dl>
|
|
<dt>Dirigido a</dt><dd>Quien usa el panel, no quien lo despliega</dd>
|
|
<dt>Panel</dt><dd>/admin</dd>
|
|
<dt>Identidad</dt><dd>oauth.pireon.dev</dd>
|
|
<dt>Web pública</dt><dd>Proyecto Astro aparte</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<!-- ══ ÍNDICE ═══════════════════════════════════════════════════════════ -->
|
|
<section id="toc">
|
|
<h2><span class="num">·</span>Índice</h2>
|
|
<ul class="toc">
|
|
<li><span class="n">1</span><span><span class="t">Qué es este panel</span> — <span class="d">y qué no es</span></span></li>
|
|
<li><span class="n">2</span><span><span class="t">Entrar por primera vez</span> — <span class="d">login y permisos iniciales</span></span></li>
|
|
<li><span class="n">3</span><span><span class="t">Cómo funcionan los idiomas</span> — <span class="d">lo que conviene entender antes de escribir nada</span></span></li>
|
|
<li><span class="n">4</span><span><span class="t">Proyectos</span> — <span class="d">crear, publicar, decisiones y postmortem</span></span></li>
|
|
<li><span class="n">5</span><span><span class="t">La vitrina</span> — <span class="d">servicios, clientes, testimonios y charlas</span></span></li>
|
|
<li><span class="n">6</span><span><span class="t">Convocatorias</span> — <span class="d">buscar gente de forma que funcione</span></span></li>
|
|
<li><span class="n">7</span><span><span class="t">El buzón</span> — <span class="d">quién ha escrito y cómo contestarle</span></span></li>
|
|
<li><span class="n">8</span><span><span class="t">Imágenes</span> — <span class="d">qué subir y qué escribir en el texto alternativo</span></span></li>
|
|
<li><span class="n">9</span><span><span class="t">Miembros</span> — <span class="d">perfiles, altas y bajas</span></span></li>
|
|
<li><span class="n">10</span><span><span class="t">Tecnologías y el radar</span></span></li>
|
|
<li><span class="n">11</span><span><span class="t">Repositorios de Gitea</span> — <span class="d">y las tareas para empezar</span></span></li>
|
|
<li><span class="n">12</span><span><span class="t">Páginas y categorías</span></span></li>
|
|
<li><span class="n">13</span><span><span class="t">Pedir revisión</span> — <span class="d">cuando puedes escribir pero no publicar</span></span></li>
|
|
<li><span class="n">14</span><span><span class="t">Enlaces que se rompen</span> — <span class="d">redirecciones y URLs que nadie encuentra</span></span></li>
|
|
<li><span class="n">15</span><span><span class="t">Salud del sitio</span> — <span class="d">qué está mal y no se ve desde aquí</span></span></li>
|
|
<li><span class="n">16</span><span><span class="t">Modo mantenimiento</span></span></li>
|
|
<li><span class="n">17</span><span><span class="t">Roles y permisos</span> — <span class="d">quién puede hacer qué</span></span></li>
|
|
<li><span class="n">18</span><span><span class="t">Dudas frecuentes</span></span></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- ══ 1 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">1</span>Qué es este panel</h2>
|
|
<p class="lead">Es donde se gestiona el contenido de la web del colectivo. La web en sí es otra cosa.</p>
|
|
|
|
<p>
|
|
El panel y la web pública son <strong>dos aplicaciones separadas</strong>. Aquí se
|
|
escribe y se organiza el contenido; la web que ven los visitantes está hecha en
|
|
Astro y vive en otro proyecto, y lee de aquí a través de una API.
|
|
</p>
|
|
|
|
<p>Esto tiene una consecuencia práctica que conviene tener clara desde el principio:</p>
|
|
|
|
<div class="note">
|
|
<span class="label">Lo que se ve y lo que no</span>
|
|
<p>
|
|
En este panel <strong>no hay previsualización de la web</strong>. Lo que escribes aquí
|
|
es el dato; el aspecto lo pone Astro. Si quieres ver cómo queda algo, míralo
|
|
en la web pública, no aquí.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Qué gestiona cada sitio</h3>
|
|
<table>
|
|
<tr><th>Esto se cambia en…</th><th>…este sitio</th></tr>
|
|
<tr><td>Tu nombre, tu email, si tu cuenta está activa</td><td><code>oauth.pireon.dev</code></td></tr>
|
|
<tr><td>Tu rol y tus permisos dentro del panel</td><td>Este panel</td></tr>
|
|
<tr><td>Proyectos, miembros, convocatorias, páginas</td><td>Este panel</td></tr>
|
|
<tr><td>Colores, tipografías, maquetación</td><td>El proyecto de Astro</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Dicho de otro modo: el servidor de identidad dice <strong>quién eres</strong>, este panel
|
|
decide <strong>qué puedes hacer aquí</strong>, y Astro decide <strong>cómo se ve</strong>.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ══ 2 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">2</span>Entrar por primera vez</h2>
|
|
|
|
<p>
|
|
En <code>/admin</code> tienes un formulario normal: tu <strong>email</strong> y tu
|
|
<strong>contraseña</strong>. Las mismas de siempre.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Tu cuenta no vive en este panel, vive en el servidor de identidad del colectivo.
|
|
Eso significa que la contraseña se cambia allí, no aquí, y que es la misma para
|
|
todo lo demás. Pero no tienes que saber nada de eso para entrar: escribes tus
|
|
credenciales y ya está.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
<span class="label">Si te equivocas varias veces</span>
|
|
<p>
|
|
Tras cinco intentos fallidos el panel te hace esperar un rato. No es que te haya
|
|
bloqueado la cuenta: es para que nadie pueda ir probando contraseñas.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>La primera vez entras sin permisos</h3>
|
|
<p>
|
|
Tu cuenta en el panel se crea automáticamente <em>en el momento de tu primer login</em>,
|
|
y empieza con el rol más bajo. Verás el panel, pero casi todo estará en solo lectura.
|
|
</p>
|
|
<p>
|
|
Alguien con rol <strong>administrador</strong> tiene que darte el rol que te toque desde
|
|
<strong>Administración → Usuarios</strong>. Hasta entonces no podrás crear ni editar.
|
|
</p>
|
|
|
|
<div class="warn">
|
|
<span class="label">Ojo</span>
|
|
<p>
|
|
Si tu registro todavía no está aprobado, o tu cuenta está desactivada, el panel
|
|
te lo dirá al entrar. Eso se resuelve con quien administre las cuentas del
|
|
colectivo, no desde aquí.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Cambiar el idioma del panel</h3>
|
|
<p>
|
|
Arriba a la derecha hay un selector con la bandera del idioma actual. El panel
|
|
está en castellano, inglés y catalán. Tu elección se guarda en tu cuenta, así
|
|
que la próxima vez ya entrarás en tu idioma.
|
|
</p>
|
|
<div class="note">
|
|
<p>
|
|
El idioma del <strong>panel</strong> y el idioma del <strong>contenido</strong> que editas son cosas
|
|
distintas. Puedes tener el panel en catalán y estar escribiendo la ficha de un
|
|
proyecto en inglés.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 3 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">3</span>Cómo funcionan los idiomas</h2>
|
|
<p class="lead">Esta sección atraviesa todo lo demás. Merece la pena leerla entera una vez.</p>
|
|
|
|
<p>
|
|
La web está en <strong>castellano, inglés y catalán</strong>. El castellano es el
|
|
<strong>idioma principal</strong>. En los formularios verás pestañas, una por idioma,
|
|
y la principal lleva una estrella (★).
|
|
</p>
|
|
|
|
<h3>Qué es obligatorio y qué no</h3>
|
|
<ul>
|
|
<li>El <strong>idioma principal es obligatorio</strong>: sin él no puedes guardar.</li>
|
|
<li>Los otros dos son opcionales. Si los dejas vacíos, la web muestra el texto en
|
|
castellano en su lugar, en vez de aparecer en blanco.</li>
|
|
</ul>
|
|
|
|
<div class="tip">
|
|
<span class="label">Consejo</span>
|
|
<p>
|
|
No traduzcáis todo por inercia. Un postmortem largo quizá no compensa en los tres
|
|
idiomas; la página de «únete», sí. El inglés os abre a gente de fuera y el catalán
|
|
os ancla en la comunidad local — decidid a conciencia qué va en cada uno.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Ver qué falta por traducir</h3>
|
|
<p>
|
|
En los listados hay una columna de <strong>traducciones</strong> con las tres etiquetas de
|
|
idioma. En <span class="yes">verde y mayúsculas</span> las que están traducidas;
|
|
en <span class="no">gris y minúsculas</span> las que faltan. De un vistazo sabes
|
|
qué queda pendiente sin abrir cada ficha.
|
|
</p>
|
|
<p>
|
|
Hay un tercer estado, en naranja y con una admiración —<strong>CA!</strong>—, que es el
|
|
que más cuesta ver de otra manera: esa traducción existe, pero el texto original
|
|
cambió después de hacerla.
|
|
</p>
|
|
<p>
|
|
En el listado de páginas hay además un filtro <strong>«Sin traducir a…»</strong> para sacar
|
|
directamente todo lo que falta en un idioma concreto.
|
|
</p>
|
|
|
|
<h3>Cuando el original cambia después de traducirse</h3>
|
|
<p>
|
|
Es lo que pasa de verdad, y es peor que una traducción que falta: la que falta
|
|
se ve, y esta no. Alguien corrige el castellano de un proyecto, el catalán se
|
|
queda como estaba, y a partir de ahí la web dice dos cosas distintas según el
|
|
idioma en que la leas. Nada se rompe, así que nadie se entera.
|
|
</p>
|
|
<p>
|
|
El panel lo detecta solo, mirando el historial de cambios: sabe cuándo se tocó
|
|
por última vez cada idioma de cada campo. Si el castellano se movió después que
|
|
el catalán, la etiqueta del catalán sale con la admiración, y en
|
|
<strong>Salud del sitio</strong> aparece desde cuándo lleva a la deriva.
|
|
</p>
|
|
<p>
|
|
Para ponerlo al día basta con editar ese idioma. En cuanto lo guardas, la
|
|
etiqueta vuelve a verde.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Cambiar el <strong>slug</strong> no cuenta: renombrar la dirección castellana no hace
|
|
que el texto catalán deje de ser cierto. Y un idioma vacío no está
|
|
desactualizado, está sin traducir, que ya sale en gris.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Los slugs van por idioma</h3>
|
|
<p>
|
|
El slug es la parte final de la dirección web. Cada idioma tiene el suyo, y se
|
|
rellena solo a partir del título mientras no lo toques:
|
|
</p>
|
|
<pre><code>castellano /proyectos/gestor-de-socios
|
|
inglés /en/projects/membership-manager
|
|
catalán /ca/projectes/gestor-de-socis</code></pre>
|
|
<p>
|
|
Dos registros no pueden compartir slug <em>en el mismo idioma</em>, pero el mismo
|
|
slug en idiomas distintos es perfectamente válido.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<span class="label">Al cambiar un slug publicado</span>
|
|
<p>
|
|
El panel apunta la dirección vieja y la manda sola a la nueva, así que los
|
|
enlaces que alguien hubiera compartido siguen funcionando. Aun así, cambia
|
|
slugs de cosas publicadas solo si hace falta: cada cambio deja una
|
|
redirección más que mantener.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 4 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">4</span>Proyectos</h2>
|
|
<p class="lead">Lo que habéis construido. Es el corazón de la web.</p>
|
|
|
|
<h3>Crear uno</h3>
|
|
<p>
|
|
<strong>Colectivo → Proyectos → Crear</strong>. Lo mínimo es el título y el slug en
|
|
castellano. El resto se puede completar después.
|
|
</p>
|
|
|
|
<table>
|
|
<tr><th>Campo</th><th>Para qué sirve</th></tr>
|
|
<tr><td>Frase resumen</td><td>Una línea. Es lo que se ve en el listado de la web.</td></tr>
|
|
<tr><td>Descripción</td><td>Qué es el proyecto y qué resuelve.</td></tr>
|
|
<tr><td>Estado</td><td>Idea, en marcha, en pausa, terminado o archivado.</td></tr>
|
|
<tr><td>Para quién</td><td>La ONG o asociación destinataria. Vale la pena rellenarlo.</td></tr>
|
|
<tr><td>Tecnologías</td><td>Alimenta los filtros y el radar.</td></tr>
|
|
<tr><td>Responsable y participantes</td><td>Miembros del colectivo implicados.</td></tr>
|
|
<tr><td>Busca gente</td><td>Lo saca en la sección de colaboración de la web.</td></tr>
|
|
</table>
|
|
|
|
<h3>Decisiones y postmortem</h3>
|
|
<p>
|
|
Es la sección plegada del formulario, y es la que hace que un proyecto merezca
|
|
la pena leerse en vez de solo mirarse:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Decisiones técnicas</strong> — por qué elegisteis lo que elegisteis, y qué descartasteis.</li>
|
|
<li><strong>Postmortem</strong> — qué salió mal y qué aprendisteis.</li>
|
|
</ul>
|
|
|
|
<div class="tip">
|
|
<span class="label">Por qué esto importa</span>
|
|
<p>
|
|
Una consultora comercial no puede publicar «este proyecto lo hicimos mal y esto
|
|
aprendimos». Vosotros sí, y es justo el contenido que otros desarrolladores leen
|
|
y comparten. Un proyecto abandonado con un buen escrito vale más que tres fichas
|
|
vacías.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Publicar</h3>
|
|
<p>
|
|
Un proyecto <strong>no aparece en la web hasta que tiene fecha de publicación</strong>.
|
|
Mientras el campo esté vacío, es un borrador que solo veis vosotros.
|
|
</p>
|
|
<p>
|
|
Para publicarlo, rellena <strong>Publicado el</strong>, o usa el botón <strong>Publicar</strong>
|
|
del listado, que le pone la fecha actual.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Publicar es un <strong>permiso aparte</strong> de editar. Si el campo de fecha te aparece
|
|
bloqueado, es que tu rol puede escribir pero no poner cosas en la web. Pídeselo
|
|
a un administrador.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Ordenar y destacar</h3>
|
|
<p>
|
|
El listado se puede reordenar arrastrando las filas, y ese orden es el que usa la
|
|
web. El interruptor <strong>Destacado</strong> sube el proyecto por delante del resto.
|
|
</p>
|
|
<h3>Programar y caducar</h3>
|
|
<p>
|
|
Hay dos fechas, y las dos son opcionales:
|
|
</p>
|
|
<table>
|
|
<tr><th>Campo</th><th>Qué hace</th></tr>
|
|
<tr><td>Fecha de publicación</td><td>Si la pones en el futuro, no sale en la web hasta que llegue ese momento.</td></tr>
|
|
<tr><td>Retirar el</td><td>Al llegar, desaparece sola de la web.</td></tr>
|
|
</table>
|
|
<p>
|
|
No hace falta que nadie esté pendiente: la web mira las fechas cada vez que
|
|
alguien la visita. En la lista, el estado dice «Programada» o «Caducada» con
|
|
el cuándo, para que no parezca publicado algo que no se está viendo.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">Para qué sirve de verdad</span>
|
|
<p>
|
|
Para lo que tiene fecha de caducidad: el aviso de un taller, una campaña,
|
|
una convocatoria de un evento concreto. Ponedle la fecha al crearlo y
|
|
olvidaos; retirar cosas a mano es justo lo que nadie se acuerda de hacer.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- ══ 5 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">5</span>La vitrina</h2>
|
|
<p class="lead">Las cuatro cosas con las que se monta la portada.</p>
|
|
|
|
<p>
|
|
Un proyecto cuenta lo que ya se ha hecho. Para que la web además explique
|
|
<em>qué se puede pedir</em>, para quién se ha trabajado y qué dice la gente,
|
|
hay cuatro apartados más.
|
|
</p>
|
|
|
|
<h3>Servicios</h3>
|
|
<p>
|
|
Lo que ofrecéis. Cada uno con su frase resumen —es la línea que se lee en la
|
|
tarjeta de la portada— y su descripción.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">Enlazad proyectos</span>
|
|
<p>
|
|
Un servicio que no puede señalar un trabajo real es una promesa. En la lista
|
|
de servicios, los que no tienen ninguno salen con el número en naranja.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Clientes</h3>
|
|
<p>
|
|
Las entidades para las que habéis trabajado, con su logo. Antes esto se escribía
|
|
a mano en cada proyecto, así que la misma asociación escrita dos veces eran dos.
|
|
Ahora se elige de una lista, y si no está podéis crearla sin salir del proyecto.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
La casilla <strong>«Se puede mostrar»</strong> es importante: salir en la web
|
|
de otro es decisión de la entidad. Si no está marcada, no aparece en ningún
|
|
sitio. Y una entidad sin ningún proyecto publicado tampoco sale en el muro de
|
|
logos.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Testimonios</h3>
|
|
<p>
|
|
Lo que dijeron de vosotros. No se cuelgan «de la portada» sino de un cliente, un
|
|
proyecto o un servicio, y así cada página enseña los suyos.
|
|
</p>
|
|
|
|
<div class="warn">
|
|
<span class="label">El idioma original</span>
|
|
<p>
|
|
Escribid en la pestaña del idioma en que <em>realmente</em> lo dijeron, y
|
|
marcadlo en «Idioma original». Las otras pestañas son traducciones vuestras:
|
|
traducir una cita es ponerle palabras en la boca a alguien, así que la web
|
|
avisa de que está traducida.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Charlas</h3>
|
|
<p>
|
|
Dónde habéis contado lo que hacéis: evento, ciudad, fecha y el enlace al vídeo.
|
|
Si indicáis quién la dio, sale también en su perfil sin escribirlo dos veces.
|
|
</p>
|
|
<p>
|
|
El título <strong>no se traduce</strong>, y es a propósito: es el nombre de una
|
|
charla que se dio una vez y en un idioma. Lo que sí se traduce es el resumen.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ══ 6 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">6</span>Convocatorias</h2>
|
|
<p class="lead">Cómo pedir ayuda de forma que alguien realmente se apunte.</p>
|
|
|
|
<p>
|
|
Una convocatoria es una petición de colaboración. Puede colgar de un proyecto
|
|
concreto o ser general del colectivo (dejando el campo Proyecto vacío).
|
|
</p>
|
|
|
|
<h3>Lo importante: decir cuánto tiempo pedís</h3>
|
|
<p>
|
|
En un colectivo por hobby lo escaso no es el dinero, es el tiempo. Por eso hay dos
|
|
campos que parecen menores y son los que hacen todo el trabajo:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Horas por semana</strong></li>
|
|
<li><strong>Semanas</strong> de duración estimada</li>
|
|
</ul>
|
|
|
|
<table>
|
|
<tr><th>En vez de escribir…</th><th>…decid esto</th></tr>
|
|
<tr><td>«Buscamos frontend»</td><td>«Frontend · 4h/semana · 8 semanas · React · sin fecha límite»</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Con lo segundo, alguien decide en diez segundos si puede. Con lo primero, no
|
|
decide nada y sigue navegando.
|
|
</p>
|
|
|
|
<h3>Qué se lleva quien colabora</h3>
|
|
<p>
|
|
Hay un campo específico para esto. El trabajo no remunerado necesita un
|
|
intercambio explícito: aprender algo concreto, portfolio real, referencias,
|
|
mentoría. Decirlo abiertamente suma, no resta.
|
|
</p>
|
|
|
|
<h3>Estados</h3>
|
|
<table>
|
|
<tr><th>Estado</th><th>Significa</th></tr>
|
|
<tr><td>Abierta</td><td>Se ve en la web y se puede responder.</td></tr>
|
|
<tr><td>Cubierta</td><td>Alguien la cogió. Desaparece de la web.</td></tr>
|
|
<tr><td>Cerrada</td><td>Ya no la buscáis. Desaparece de la web.</td></tr>
|
|
</table>
|
|
|
|
<div class="tip">
|
|
<span class="label">Fecha de cierre</span>
|
|
<p>
|
|
Si pones fecha de cierre, la convocatoria desaparece sola de la web al llegar
|
|
el día, y poco después el panel la marca como cerrada él solo. Es la forma de
|
|
que no se queden convocatorias fantasma abiertas meses.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 7 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">7</span>El buzón</h2>
|
|
<p class="lead">La otra mitad de una convocatoria: quien la lee y contesta.</p>
|
|
|
|
<p>
|
|
Cuando alguien rellena un formulario de la web —respondiendo a una convocatoria
|
|
o escribiendo por su cuenta— el mensaje llega a <strong>Colectivo → Buzón</strong>
|
|
y suena la campana de arriba a la derecha. No llega ningún correo a nadie salvo
|
|
que se haya configurado aparte.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
El número naranja al lado de «Buzón» son personas esperando respuesta. Es el
|
|
único número del panel que mide el tiempo de otra gente, no el vuestro.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Dos tipos de mensaje</h3>
|
|
<table>
|
|
<tr><th>Tipo</th><th>Quién escribe</th></tr>
|
|
<tr><td>Quiere ayudar</td><td>Alguien que ofrece unas horas, con o sin convocatoria concreta.</td></tr>
|
|
<tr><td>Pide ayuda</td><td>Una entidad o asociación que necesita que le echéis una mano.</td></tr>
|
|
</table>
|
|
<p>
|
|
Llegan por el mismo sitio pero suelen ir a personas distintas, así que el buzón
|
|
tiene una pestaña para cada uno.
|
|
</p>
|
|
|
|
<h3>El circuito</h3>
|
|
<table>
|
|
<tr><th>Estado</th><th>Qué significa</th></tr>
|
|
<tr><td>Sin responder</td><td>Acaba de llegar. Nadie la ha tocado.</td></tr>
|
|
<tr><td>Contactada</td><td>Alguien ya le ha escrito. Queda registrado quién.</td></tr>
|
|
<tr><td>Aceptada</td><td>Se incorpora.</td></tr>
|
|
<tr><td>Descartada</td><td>No sale adelante. Contestad igualmente.</td></tr>
|
|
<tr><td>Spam</td><td>Basura. Se guarda por si acaso, no se borra.</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
El botón <strong>Responder</strong> abre el correo con el asunto ya puesto. En
|
|
cuanto marcáis una solicitud como contactada, el panel guarda quién lo hizo: es
|
|
lo que evita que a la misma persona le escriban dos o no le escriba nadie.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">Notas</span>
|
|
<p>
|
|
Cada solicitud tiene un campo de notas internas para el resto del equipo — qué
|
|
hablasteis, en qué quedó. Quien escribió no ve nada de eso.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Contestad en su idioma</h3>
|
|
<p>
|
|
La ficha indica en qué idioma escribió la persona. No siempre es el vuestro.
|
|
</p>
|
|
|
|
<h3>Sobre el spam</h3>
|
|
<p>
|
|
La web tiene una trampa invisible para robots. Lo que cae en ella se marca como
|
|
spam pero <strong>no se borra</strong>: la trampa se equivoca de vez en cuando —un
|
|
gestor de contraseñas demasiado servicial basta— y una persona real no puede
|
|
desaparecer por eso. Si el buzón se llena de basura, mirad la pestaña de spam
|
|
antes de dar nada por perdido.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Los mensajes contienen datos personales de gente ajena al colectivo. Por eso el
|
|
rol <strong>viewer</strong> no ve el buzón, aunque vea todo el contenido de la
|
|
web.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 8 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">8</span>Imágenes</h2>
|
|
<p class="lead">Subid la buena. Del resto se encarga el panel.</p>
|
|
|
|
<p>
|
|
Cuando subís una imagen —la portada de un proyecto, la destacada de una página,
|
|
un avatar— el panel calcula solo todo lo demás: sus medidas, versiones más
|
|
pequeñas para móviles y un borrón de color que la web pinta mientras carga.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">Subid la grande</span>
|
|
<p>
|
|
Nunca se amplía una imagen: de una de 500px no sale una de 1600. Al revés sí,
|
|
así que subid el original bueno y dejad que el panel haga las pequeñas.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>El texto alternativo</h3>
|
|
<p>
|
|
Debajo de cada imagen hay un campo de <strong>texto alternativo</strong>, con una
|
|
pestaña por idioma. Es lo que lee alguien que no puede ver la imagen —con un
|
|
lector de pantalla, o porque la imagen no ha cargado.
|
|
</p>
|
|
|
|
<table>
|
|
<tr><th>En vez de…</th><th>…escribid</th></tr>
|
|
<tr><td>«captura.png»</td><td>«El panel de socios de la asociación, con el listado de altas del mes»</td></tr>
|
|
<tr><td>«foto del equipo»</td><td>«Cinco personas alrededor de una mesa en el taller de octubre»</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Describid <em>lo que se ve</em>, no lo que la imagen significa. Si la imagen es
|
|
puramente decorativa y no aporta información, dejadlo vacío a propósito: es la
|
|
forma correcta de decir «esto no hay que leerlo».
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
El texto alternativo va con el sitio donde se usa la imagen, no con el archivo.
|
|
La misma foto puede necesitar una descripción distinta en un proyecto y en un
|
|
listado.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Los avatares no llevan texto alternativo</h3>
|
|
<p>
|
|
No hay campo, y es a propósito: el texto alternativo de un retrato es el nombre
|
|
de la persona, que el panel ya sabe.
|
|
</p>
|
|
|
|
<h3>La galería de un proyecto</h3>
|
|
<p>
|
|
Además de la portada, cada proyecto tiene una pestaña <strong>Galería</strong>
|
|
dentro de su ficha. Ahí van las capturas, y sobre todo el antes y el después:
|
|
es lo que hace que se entienda qué cambió.
|
|
</p>
|
|
<ul>
|
|
<li>Se <strong>reordenan arrastrando</strong>. El orden es el que verá la web.</li>
|
|
<li>Cada imagen tiene texto alternativo <em>y</em> <strong>pie de foto</strong>.</li>
|
|
</ul>
|
|
|
|
<table>
|
|
<tr><th>Campo</th><th>Quién lo lee</th></tr>
|
|
<tr><td>Texto alternativo</td><td>Quien no puede ver la imagen. Describe lo que se ve.</td></tr>
|
|
<tr><td>Pie de foto</td><td>Todo el mundo. Aquí es donde va «Antes» y «Después».</td></tr>
|
|
</table>
|
|
|
|
<div class="note">
|
|
<p>
|
|
En la lista de la galería, las imágenes sin describir salen marcadas en
|
|
naranja, y al lado de cada una aparece su tamaño real en cuanto el panel
|
|
termina de procesarla.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Si una imagen sale sin recortar bien</h3>
|
|
<p>
|
|
Al subirla hay un editor para recortarla antes de guardar. Y si cambiáis la
|
|
imagen, la anterior deja de usarse sola: no hay que borrar nada.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ══ 9 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">9</span>Miembros</h2>
|
|
|
|
<div class="note">
|
|
<span class="label">Lo primero que hay que entender</span>
|
|
<p>
|
|
Un <strong>miembro</strong> del colectivo y un <strong>usuario</strong> del panel son cosas distintas.
|
|
La mayoría de la gente que sale en la web no necesita entrar aquí para nada.
|
|
Se puede crear un miembro sin cuenta, y quitarle a alguien el acceso al panel
|
|
no lo borra de la web.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>El perfil es el escaparate</h3>
|
|
<p>
|
|
En un colectivo sin ánimo de lucro, el perfil público es buena parte de lo que
|
|
la gente se lleva por participar. Merece la pena cuidarlo: foto, titular, una
|
|
biografía de verdad y su stack.
|
|
</p>
|
|
|
|
<table>
|
|
<tr><th>Campo</th><th>Notas</th></tr>
|
|
<tr><td>Titular y biografía</td><td>Traducibles. Con el castellano basta para publicar.</td></tr>
|
|
<tr><td>Usuario de GitHub/Gitea</td><td>Sirve para enlazar su actividad en los repositorios.</td></tr>
|
|
<tr><td>Cuenta del panel</td><td>Opcional. Solo si esa persona además administra.</td></tr>
|
|
<tr><td>Visible en la web</td><td>Desmarca para tener a alguien registrado sin sacarlo fuera.</td></tr>
|
|
<tr><td>Fundador/a</td><td>Lo coloca primero en el listado público.</td></tr>
|
|
</table>
|
|
|
|
<h3>Cuando alguien se va</h3>
|
|
<p>
|
|
<strong>No lo borréis.</strong> Rellenad la fecha en <strong>Se fue</strong>. Así desaparece del
|
|
equipo actual pero conserva su historial y sigue apareciendo asociado a los
|
|
proyectos en los que participó. Borrarlo perdería esa memoria.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<p>
|
|
Cualquiera puede editar <strong>su propio</strong> perfil de miembro aunque no tenga permisos
|
|
de edición general. Cambiar tu bio no debería requerir molestar a un administrador.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 10 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">10</span>Tecnologías y el radar</h2>
|
|
|
|
<p>
|
|
Las tecnologías son el vocabulario compartido: se usan para etiquetar proyectos,
|
|
miembros y convocatorias. Gracias a eso la web puede responder «quién sabe Rust»
|
|
o «proyectos hechos con Laravel».
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
El <strong>nombre no se traduce</strong>: «Rust» es «Rust» en los tres idiomas. Lo único
|
|
traducible es la descripción y la nota del radar.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>El radar</h3>
|
|
<p>
|
|
Es una foto de qué usáis y qué no, en cuatro anillos:
|
|
</p>
|
|
<table>
|
|
<tr><th>Anillo</th><th>Significa</th></tr>
|
|
<tr><td><strong>Adoptar</strong></td><td>Lo usamos y lo recomendamos.</td></tr>
|
|
<tr><td><strong>Probar</strong></td><td>Lo estamos usando en algo real, con buena pinta.</td></tr>
|
|
<tr><td><strong>Evaluar</strong></td><td>Nos interesa, aún no lo hemos usado en serio.</td></tr>
|
|
<tr><td><strong>Evitar</strong></td><td>Lo hemos usado y preferimos no repetir.</td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Si dejas el anillo <strong>vacío</strong>, la tecnología sigue sirviendo como etiqueta pero
|
|
no sale en el radar público. Útil para cosas que usáis sin querer opinar de ellas.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">La nota del radar</span>
|
|
<p>
|
|
Es la parte que la gente lee de verdad. «Evitar: lo probamos en el proyecto X y
|
|
la curva de aprendizaje no compensaba para equipos pequeños» vale mucho más que
|
|
la etiqueta sola.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="warn">
|
|
<p>
|
|
Una tecnología que esté en uso por algún proyecto, miembro o convocatoria
|
|
<strong>no se puede borrar</strong>. Quítala primero de donde esté puesta.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 11 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">11</span>Repositorios de Gitea</h2>
|
|
<p class="lead">Lo que mantiene la web con aspecto de estar viva sin que nadie la actualice.</p>
|
|
|
|
<h3>Conectar uno</h3>
|
|
<p>
|
|
Se hace desde la ficha del proyecto (pestaña <strong>Repositorios</strong>) o desde
|
|
<strong>Colectivo → Repositorios</strong>. Solo hay que indicar dos cosas:
|
|
</p>
|
|
<ul>
|
|
<li>El <strong>proveedor</strong> (Gitea, que es vuestra instancia).</li>
|
|
<li>El repositorio en formato <code>organizacion/repositorio</code>.</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Todo lo demás —estrellas, lenguajes, contribuidores, último push, topics— llega
|
|
solo y <strong>no es editable a mano</strong>. Es información real traída de Gitea, no
|
|
números escritos a dedo.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Las tareas para empezar</h3>
|
|
<p>
|
|
De cada repositorio se traen <strong>solo las issues etiquetadas</strong> como
|
|
<em>good first issue</em> o <em>help wanted</em>. No todas: mirroring de todo
|
|
convertiría la web en un gestor de incidencias ruidoso.
|
|
</p>
|
|
<p>
|
|
Estas issues salen en la web como puerta de entrada para gente que nunca ha
|
|
contribuido. Es de lo más eficaz que tenéis: convierte a alguien que pasaba por
|
|
ahí en contribuidor con un clic.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">Para que funcione</span>
|
|
<p>
|
|
Etiquetad issues en Gitea con <em>good first issue</em> o <em>help wanted</em>. Sin
|
|
etiquetas no aparece nada. Las issues que ya tienen a alguien asignado no se
|
|
muestran: una tarea cogida no es una invitación.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Sincronización</h3>
|
|
<p>
|
|
Se actualiza <strong>sola cada hora</strong>. Si quieres forzarlo, hay un botón
|
|
<strong>Sincronizar</strong> en cada repositorio. Sincronizar es un permiso aparte, porque
|
|
consume el límite de peticiones de Gitea que comparte toda la aplicación.
|
|
</p>
|
|
|
|
<h3>Los avisos en rojo</h3>
|
|
<table>
|
|
<tr><th>Qué ves</th><th>Qué significa</th></tr>
|
|
<tr><td>Número rojo en el menú</td><td>Repositorios que llevan varios intentos fallando. Normalmente los han renombrado o borrado en Gitea.</td></tr>
|
|
<tr><td>Fecha de último push en rojo</td><td>Lleva más de seis meses sin actividad. La web lo marca como dormido para no presentar trabajo muerto como si estuviera vivo.</td></tr>
|
|
<tr><td>Error bajo «Sincronizado»</td><td>El motivo exacto del último fallo.</td></tr>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- ══ 12 ════════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">12</span>Páginas y categorías</h2>
|
|
|
|
<p>
|
|
Las <strong>páginas</strong> son el contenido suelto de la web: quiénes somos, cómo
|
|
trabajamos, aviso legal, manifiesto. Funcionan igual que los proyectos en cuanto
|
|
a idiomas y slugs.
|
|
</p>
|
|
|
|
<h3>Estados</h3>
|
|
<table>
|
|
<tr><th>Estado</th><th>Se ve en la web</th></tr>
|
|
<tr><td>Borrador</td><td class="c"><span class="no">no</span></td></tr>
|
|
<tr><td>En revisión</td><td class="c"><span class="no">no</span></td></tr>
|
|
<tr><td>Publicada</td><td class="c"><span class="yes">sí</span></td></tr>
|
|
<tr><td>Archivada</td><td class="c"><span class="no">no</span></td></tr>
|
|
</table>
|
|
|
|
<p>
|
|
Si pones una fecha de publicación futura, la página se publica sola ese día.
|
|
</p>
|
|
|
|
<h3>Categorías</h3>
|
|
<p>
|
|
Agrupan páginas. Tienen nombre traducible, color y orden. Una categoría que
|
|
todavía tenga páginas dentro <strong>no se puede borrar</strong>: habría que vaciarla antes.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<span class="label">Papelera</span>
|
|
<p>
|
|
Lo que borras de páginas, proyectos, categorías y miembros va a una papelera y
|
|
se puede restaurar. Usa el filtro <strong>Eliminados</strong> del listado para verlo.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 13 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">13</span>Pedir revisión</h2>
|
|
<p class="lead">Cuando puedes escribir algo pero no ponerlo en la web.</p>
|
|
|
|
<p>
|
|
Publicar y editar son permisos distintos a propósito: poner algo en la web
|
|
pública es un acto mayor que escribirlo. Si tu rol es <strong>writer</strong>, puedes
|
|
escribir páginas, proyectos y servicios, y no puedes publicarlos.
|
|
</p>
|
|
<p>
|
|
Antes eso terminaba en un mensaje por chat. Ahora hay un botón.
|
|
</p>
|
|
|
|
<h3>Decir que algo ya está</h3>
|
|
<p>
|
|
En la ficha, pestaña <strong>Revisión</strong>, o desde el listado:
|
|
<strong>Pedir revisión</strong>. Puedes elegir a quién se lo pides, o dejarlo vacío
|
|
y lo verá todo el que pueda publicarlo — que suele ser lo sensato, porque
|
|
normalmente no sabes quién tiene un rato.
|
|
</p>
|
|
<p>
|
|
Deja una nota si hay algo que quien revise necesita saber antes de mirarlo
|
|
(«falta la foto, la pido mañana»). A quien le toque le suena la campana del
|
|
panel.
|
|
</p>
|
|
|
|
<h3>Revisar lo que te han pedido</h3>
|
|
<p>
|
|
Si puedes publicar, te llega el aviso y lo tienes en dos sitios más: el
|
|
<strong>panel de inicio</strong> dice cuántas cosas esperan tu revisión, y en los
|
|
listados hay un filtro <strong>«Esperando mi revisión»</strong>. Las peticiones que
|
|
no se pidieron a nadie en concreto salen también ahí.
|
|
</p>
|
|
<p>Dos salidas:</p>
|
|
<ul>
|
|
<li>
|
|
<strong>Publicarlo</strong>, que es lo que cierra la revisión. No hay botón de
|
|
«aprobar» porque publicar ya lo es.
|
|
</li>
|
|
<li>
|
|
<strong>Devolverlo</strong>, diciendo qué hay que cambiar. El motivo es
|
|
obligatorio.
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tip">
|
|
<span class="label">Por qué el motivo es obligatorio</span>
|
|
<p>
|
|
Devolver el trabajo de alguien sin decir por qué es exactamente lo que hace
|
|
que la gente deje de pedir revisiones y busque otra forma de sacar las cosas.
|
|
Una línea basta.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>La conversación queda en la ficha</h3>
|
|
<p>
|
|
La pestaña <strong>Revisión</strong> guarda qué se pidió, qué se devolvió, por qué y
|
|
quién publicó al final. Es distinto del historial de cambios: el historial sabe
|
|
que el título antes decía otra cosa, pero no puede saber que esto volvió porque
|
|
faltaba la foto. También puedes dejar comentarios sueltos ahí, sin cambiar nada
|
|
de estado, para preguntar algo.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Si tu rol ya puede publicar, el botón de pedir revisión no te sale: no lo
|
|
necesitas. Y si nadie tiene el rol <strong>writer</strong>, esta pantalla no la usará
|
|
nadie — es un rol que un administrador asigna desde
|
|
<strong>Administración → Usuarios</strong>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 14 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">14</span>Enlaces que se rompen</h2>
|
|
<p class="lead">Direcciones viejas, y las que nadie encuentra.</p>
|
|
|
|
<h3>Redirecciones</h3>
|
|
<p>
|
|
En <strong>Administración → Redirecciones</strong> está la lista de direcciones que
|
|
dejaron de funcionar y adónde van ahora. Casi ninguna la escribe nadie: al
|
|
cambiar el slug de algo publicado, el panel apunta sola la vieja, porque ese es
|
|
el único momento en que todavía se conoce.
|
|
</p>
|
|
<p>
|
|
Se crea <strong>una por idioma</strong>, porque la dirección catalana y la castellana
|
|
son distintas. La columna de <strong>usos</strong> dice si alguien sigue entrando por
|
|
ahí, que es lo que decide si algún día se puede borrar.
|
|
</p>
|
|
<p>
|
|
A mano se añaden las de enlaces anteriores a esta web: una dirección de la web
|
|
antigua, una de un folleto, la que puso otro sitio hace años.
|
|
</p>
|
|
|
|
<h3>URLs que nadie encuentra</h3>
|
|
<p>
|
|
Todo lo anterior tiene un punto ciego: solo cubre los slugs que cambiáis
|
|
vosotros. Los enlaces de la web anterior, una dirección impresa en un papel o
|
|
el enlace que otro sitio puso a una página que ya se movió fallan en la web,
|
|
delante de un visitante, y aquí no se sabría nunca.
|
|
</p>
|
|
<p>
|
|
Por eso la web avisa. En <strong>Administración → URLs no encontradas</strong> salen
|
|
las direcciones que no supo resolver, ordenadas por número de visitas, y cada
|
|
fila tiene el botón que importa: <strong>Crear redirección</strong>, con la dirección
|
|
rota ya puesta. Solo hay que decir adónde debería llevar.
|
|
</p>
|
|
<p>
|
|
Si la procedencia sale en rojo, es que <strong>el enlace roto está en nuestra propia
|
|
web</strong>: algo que publicamos apunta a una dirección que no existe. Eso no se
|
|
arregla con una redirección, se arregla corrigiendo el enlace.
|
|
</p>
|
|
<p>
|
|
Lo que sea ruido —alguien buscando el panel de administración de otro— se puede
|
|
<strong>ignorar</strong>, y desaparece de la lista sin dejar de contarse.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Si esta lista lleva semanas vacía, probablemente no es que no haya enlaces
|
|
rotos: es que la web todavía no está configurada para avisar. Preguntad a
|
|
quien lleve el despliegue.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 15 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">15</span>Salud del sitio</h2>
|
|
<p class="lead">Lo que está mal en la web y no se ve desde el panel.</p>
|
|
|
|
<p>
|
|
La web pública es otra aplicación, en otra máquina. Sus fallos no aparecen
|
|
mientras editáis: aparecen cuando alguien la visita. Esta página los junta
|
|
todos, y el número naranja de la barra lateral dice cuántos hay ahora mismo.
|
|
</p>
|
|
|
|
<table>
|
|
<tr><th>Marcado como…</th><th>Significa</th></tr>
|
|
<tr><td>Fallo (rojo)</td><td>Ya está roto para quien visita la web. Hay que arreglarlo hoy.</td></tr>
|
|
<tr><td>Aviso (naranja)</td><td>Funciona, pero no como debería. Puede esperar a mañana.</td></tr>
|
|
</table>
|
|
|
|
<h3>Qué comprueba</h3>
|
|
<ul>
|
|
<li><strong>Slugs que faltan o repetidos</strong> — URLs que no existen, o dos páginas peleándose por la misma.</li>
|
|
<li><strong>Imágenes rotas</strong> — el archivo ya no está donde debería.</li>
|
|
<li><strong>Gente esperando respuesta</strong> — alguien escribió hace más de una semana y sigue sin contestación.</li>
|
|
<li><strong>Contenido sin traducir</strong> y <strong>imágenes sin describir</strong>.</li>
|
|
<li><strong>Traducciones desactualizadas</strong> — el original cambió después de traducirse.</li>
|
|
<li><strong>URLs que nadie encuentra</strong> — direcciones que dan 404 y se piden más de una vez.</li>
|
|
<li><strong>Revisiones sin contestar</strong> — alguien pidió revisión hace más de una semana.</li>
|
|
<li><strong>Fichas incompletas</strong> — sin descripción o sin portada: no hay nada que enseñar al compartir el enlace.</li>
|
|
<li><strong>Convocatorias vencidas</strong>, <strong>imágenes sin procesar</strong> y <strong>repositorios que no sincronizan</strong>.</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Cada aviso trae ejemplos concretos y un enlace para ir a arreglarlo, y
|
|
debajo del todo se despliega la lista de lo que sí está bien — para que una
|
|
página vacía no se confunda con una página que no ha comprobado nada.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
No todos ven lo mismo. El aviso de gente esperando respuesta solo lo ve
|
|
quien puede leer el buzón, y el de repositorios solo quien puede verlos.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="tip">
|
|
<span class="label">Cada cuánto mirarla</span>
|
|
<p>
|
|
Con abrirla una vez por semana basta. Si hay algo en rojo, sale el número
|
|
en la barra lateral sin que tengáis que acordaros.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>El panel de inicio</h3>
|
|
<p>
|
|
Nada más entrar, arriba del todo, salen las mismas alertas: quién está
|
|
esperando respuesta, qué caduca esta semana, qué está a medias. Si no hay nada,
|
|
lo dice. Si alguien espera tu revisión, eso va lo primero.
|
|
</p>
|
|
|
|
<h3>Cuántas visitas tiene cada cosa</h3>
|
|
<p>
|
|
En los listados de páginas, proyectos y servicios hay una columna
|
|
<strong>Visitas</strong>: cuánto se ha leído cada cosa en los últimos 30 días,
|
|
sumando los tres idiomas. Y en el panel de inicio, lo más leído del mes.
|
|
</p>
|
|
<p>
|
|
Sirve para decidir cosas que hasta ahora se decidían a ojo: qué merece
|
|
traducirse primero, si el proyecto que tenéis destacado lo abre alguien, o si
|
|
una página compensa el trabajo de mantenerla al día. Hay un filtro
|
|
<strong>«Publicado y sin visitas»</strong> para lo segundo.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
No es una herramienta de analítica y no lleva a nadie dentro: no se guarda ni
|
|
la IP, ni la sesión, ni el navegador, ni la hora. Solo cuántas veces se leyó
|
|
cada cosa cada día. Si la columna sale vacía es que la web todavía no lo está
|
|
contando.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>La papelera</h3>
|
|
<p>
|
|
En <strong>Administración → Papelera</strong> está todo lo borrado, junto, con el
|
|
botón de recuperar al lado. No hace falta acordarse de en qué sección estaba.
|
|
</p>
|
|
<div class="warn">
|
|
<span class="label">Eliminar es distinto de borrar</span>
|
|
<p>
|
|
«Recuperar» lo devuelve donde estaba. «Eliminar» lo borra para siempre y no
|
|
hay vuelta atrás; por eso pregunta antes.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Enseñar un borrador a alguien</h3>
|
|
<p>
|
|
En páginas, proyectos, servicios y convocatorias hay un botón <strong>Vista
|
|
previa</strong> que da un enlace por idioma. Se puede mandar por chat a quien
|
|
tenga que revisarlo, aunque no tenga cuenta en el panel.
|
|
</p>
|
|
<p>
|
|
Caduca a las 8 horas y solo abre ese registro: si se reenvía por error, no da
|
|
acceso a nada más.
|
|
</p>
|
|
|
|
<h3>Quién cambió qué</h3>
|
|
<p>
|
|
Cada ficha tiene una pestaña <strong>Historial</strong>: quién la tocó, cuándo, qué
|
|
campos y qué decían antes. Publicar y despublicar salen marcados aparte de un
|
|
cambio normal.
|
|
</p>
|
|
<p>
|
|
Si algo se estropeó, desde ahí se pueden devolver los valores de cualquier
|
|
momento anterior. La restauración también queda registrada.
|
|
</p>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Al cambiar el slug de algo publicado, el panel crea sola una redirección para
|
|
que los enlaces antiguos sigan funcionando. Están en
|
|
<strong>Administración → Redirecciones</strong> por si hay que revisarlas.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 16 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">16</span>Modo mantenimiento</h2>
|
|
|
|
<p>
|
|
Sirve para tumbar <strong>la web pública</strong> temporalmente: una migración, un cambio
|
|
gordo, un problema que estáis arreglando.
|
|
</p>
|
|
|
|
<div class="tip">
|
|
<span class="label">El panel sigue funcionando</span>
|
|
<p>
|
|
Esto es lo importante: mientras la web está en mantenimiento, vosotros podéis
|
|
seguir entrando, editando y arreglando. No os quedáis fuera justo cuando más
|
|
falta hace.
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Activarlo</h3>
|
|
<p>
|
|
<strong>Administración → Modo mantenimiento</strong>. Escribe el aviso que verán los
|
|
visitantes (en los tres idiomas si quieres) y pulsa <strong>Activar mantenimiento</strong>.
|
|
</p>
|
|
<p>
|
|
Mientras esté activo, el menú lateral lo marca en rojo. Es difícil olvidárselo,
|
|
que es justo la intención.
|
|
</p>
|
|
|
|
<h3>Hora de levantado automático</h3>
|
|
<p>
|
|
Opcional, pero recomendable. Si pones una hora, el mantenimiento se levanta solo
|
|
al llegar. Evita el clásico «se nos olvidó y la web estuvo caída el fin de semana».
|
|
</p>
|
|
|
|
<h3>Comprobar antes de levantarlo</h3>
|
|
<p>
|
|
El equipo puede seguir viendo la web real durante el mantenimiento, usando el
|
|
acceso de previsualización. Así se comprueba que el arreglo funciona antes de
|
|
abrir al público.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- ══ 17 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">17</span>Roles y permisos</h2>
|
|
|
|
<p>
|
|
Los permisos son locales de este panel. Los asigna un administrador desde
|
|
<strong>Administración → Usuarios</strong>.
|
|
</p>
|
|
<p>
|
|
<strong>Writer</strong> es el rol para quien escribe sin publicar: hace páginas,
|
|
proyectos y servicios y, cuando termina, pide revisión a alguien que sí pueda
|
|
ponerlos en la web. Es el rol que da sentido a que publicar sea un permiso
|
|
aparte.
|
|
</p>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>Puede…</th>
|
|
<th class="c">Viewer</th>
|
|
<th class="c">Writer</th>
|
|
<th class="c">Editor</th>
|
|
<th class="c">Admin</th>
|
|
<th class="c">Super admin</th>
|
|
</tr>
|
|
<tr><td>Entrar al panel</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Ver todo el contenido</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Crear y editar proyectos, páginas, miembros, convocatorias, tecnologías</td><td class="c no">no</td><td class="c part">solo contenido</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Leer y contestar el buzón</td><td class="c no">no</td><td class="c no">no</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Pedir revisión de lo que ha escrito</td><td class="c no">no</td><td class="c yes">sí</td><td class="c part">no le hace falta</td><td class="c part">no le hace falta</td><td class="c part">no le hace falta</td></tr>
|
|
<tr><td>Publicar en la web</td><td class="c no">no</td><td class="c no">no</td><td class="c yes">sí</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Conectar y sincronizar repositorios</td><td class="c no">no</td><td class="c no">no</td><td class="c part">solo ver</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Gestionar usuarios y roles</td><td class="c no">no</td><td class="c no">no</td><td class="c part">solo ver</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Activar el modo mantenimiento</td><td class="c no">no</td><td class="c no">no</td><td class="c no">no</td><td class="c yes">sí</td><td class="c yes">sí</td></tr>
|
|
<tr><td>Conceder el rol de super admin</td><td class="c no">no</td><td class="c no">no</td><td class="c no">no</td><td class="c no">no</td><td class="c yes">sí</td></tr>
|
|
</table>
|
|
|
|
<h3>Reglas de seguridad que el panel aplica solo</h3>
|
|
<ul>
|
|
<li>Nadie puede borrarse a sí mismo ni desactivar su propia cuenta.</li>
|
|
<li>No se puede eliminar al último super admin: dejaría el panel sin gobierno.</li>
|
|
<li>Solo un super admin puede conceder el rol de super admin.</li>
|
|
<li>Desactivar a alguien le corta el acceso al instante, sin tocar Pireon.</li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<p>
|
|
Si alguien deja de estar activo en el servidor de identidad, tampoco podrá
|
|
entrar aquí, tenga el rol que tenga. Son dos condiciones independientes y hacen
|
|
falta las dos.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══ 18 ═══════════════════════════════════════════════════════════════ -->
|
|
<section>
|
|
<h2><span class="num">18</span>Dudas frecuentes</h2>
|
|
|
|
<h4>He publicado algo y no lo veo en la web</h4>
|
|
<p>
|
|
Espera un minuto y recarga. La web guarda las respuestas en caché durante un rato
|
|
corto para ir rápida. Si al minuto sigue sin salir, comprueba que el registro
|
|
tenga <strong>fecha de publicación</strong> y que no esté en borrador.
|
|
</p>
|
|
|
|
<h4>El campo de fecha de publicación me sale bloqueado</h4>
|
|
<p>
|
|
Tu rol puede editar pero no publicar. Son permisos distintos a propósito. Cuando
|
|
lo tengas listo, usa <strong>Pedir revisión</strong>: avisa a quien sí puede ponerlo
|
|
en la web, sin que tengas que buscar a nadie por el chat.
|
|
</p>
|
|
|
|
<h4>Una etiqueta de idioma me sale en naranja con una admiración</h4>
|
|
<p>
|
|
Esa traducción existe, pero el texto original cambió después de hacerla, así que
|
|
lo que lee quien visita la web en ese idioma ya no dice lo mismo. Ábrelo, ponlo
|
|
al día y la etiqueta vuelve a verde.
|
|
</p>
|
|
|
|
<h4>He pedido revisión y no contesta nadie</h4>
|
|
<p>
|
|
A la semana empieza a salir en <strong>Salud del sitio</strong>, que es lo que hace que
|
|
alguien se entere sin que tengas que insistir. Si corre prisa, pídesela a una
|
|
persona concreta en vez de dejarlo abierto a todos.
|
|
</p>
|
|
|
|
<h4>¿Qué hago con lo que sale en «URLs no encontradas»?</h4>
|
|
<p>
|
|
Si reconoces la dirección —era de la web antigua, o de algo que se movió—, pulsa
|
|
<strong>Crear redirección</strong> y di adónde debería llevar. Si es ruido de robots
|
|
buscando el panel de otro, <strong>ignórala</strong>. Y si la procedencia sale en rojo,
|
|
el enlace roto está en algo que publicamos nosotros: arréglalo ahí.
|
|
</p>
|
|
|
|
<h4>No me deja borrar una categoría o una tecnología</h4>
|
|
<p>
|
|
Porque todavía está en uso. Una categoría con páginas dentro y una tecnología
|
|
puesta en algún proyecto no se pueden borrar: se quedarían cosas huérfanas.
|
|
Vacíala primero.
|
|
</p>
|
|
|
|
<h4>Un repositorio marca error de sincronización</h4>
|
|
<p>
|
|
Abre su ficha y lee el mensaje bajo «Sincronizado». Casi siempre es que lo han
|
|
renombrado o borrado en Gitea. Corrige el nombre <code>organizacion/repositorio</code>
|
|
y vuelve a sincronizar.
|
|
</p>
|
|
|
|
<h4>Las tareas para empezar salen vacías</h4>
|
|
<p>
|
|
Solo se traen issues etiquetadas como <em>good first issue</em> o <em>help wanted</em>,
|
|
y que no tengan a nadie asignado. Revisad las etiquetas en Gitea.
|
|
</p>
|
|
|
|
<h4>Alguien deja el colectivo, ¿lo borro?</h4>
|
|
<p>
|
|
No. Ponle fecha en <strong>Se fue</strong>. Sale del equipo actual y conserva su historial
|
|
y sus proyectos.
|
|
</p>
|
|
|
|
<h4>¿Puedo escribir solo en castellano?</h4>
|
|
<p>
|
|
Sí. Es lo único obligatorio. Los otros idiomas mostrarán el texto en castellano
|
|
hasta que alguien los traduzca, y el panel te enseña en la columna de traducciones
|
|
qué queda pendiente — y también qué se tradujo en su día y se ha quedado atrás.
|
|
</p>
|
|
|
|
<h4>¿Dónde cambio mi nombre o mi email?</h4>
|
|
<p>
|
|
En <code>oauth.pireon.dev</code>. Aquí aparecen bloqueados porque se refrescan desde
|
|
allí en cada inicio de sesión: cualquier cambio hecho aquí se perdería.
|
|
</p>
|
|
|
|
<div class="footer-note">
|
|
Manual de uso del panel del colectivo · Generado desde
|
|
<code>docs/manual-de-uso.html</code> · La documentación técnica de instalación y
|
|
despliegue está en el <code>README.md</code> del repositorio.
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
</html>
|