Foco África 2023
Caption: Foco África 2023
News title Foco África 2023
Date of publication of the news item 07/04/2021 - 00:00
News categories Cooperación para el desarrollo | ÁFRICA | África Subsahariana | África central, oriental y austral | África Occidental
Summary of the news Foco África 2023 es el programa de acción del III Plan África y conecta los objetivos de este con la Estrategia de Acción Exterior 2021-2024
El pasado 29 de marzo tuvo lugar, con la participación del Presidente del Gobierno y seguido de sendas mesas redondas sobre “Foco África 2023 y el empoderamiento de las mujeres africanas” (moderada por la Ministra de Asuntos Exteriores, Unión Europea y Cooperación) y sobre “Inversión española ante las oportunidades del continente africano” (moderada por la Secretaria de Estado de Comercio), el lanzamiento de Foco África 2023.
Foco África 2023 es el programa de acción del III Plan África y conecta los objetivos de este con la Estrategia de Acción Exterior 2021-2024. Constituye la proyección de la acción exterior en el continente de todos los actores institucionales del Gobierno de España y su concreción en acciones durante esta Legislatura. Conforme al principio de unidad de acción en el exterior, incorpora los programas y los instrumentos para África de los distintos Ministerios y las estrategias y los planes de la Cooperación Española.
Más información:
The following has evaluated to null or missing:
==> String [in template "20096#20122#DETALLE-NOTICIA-V2" at line 325, column 28]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${String(m).padStart(2, "0")} [in template "20096#20122#DETALLE-NOTICIA-V2" at line 325, column 26]
----
1<style>
2 .contNoticia h1 {
3 font-weight: 700;
4 font-size: 2.438rem;
5 line-height: 2.938rem;
6 color: var(--brand-color-1);
7 }
8
9 .contNoticia .colIzq {
10 border-right: 1px solid #A09899;
11 padding-right: 3rem;
12 }
13
14 .contNoticia .colDer {
15 padding-left: 3rem;
16 }
17
18 .contNoticia img {
19 margin-bottom: 20px;
20 }
21
22 .contNoticia .pieFoto {
23 margin-bottom: 40px;
24 color: #494546;
25 }
26
27 .contNoticia .contenidoNoticia h2 {
28 font-weight: 600;
29 font-size: 1.25rem;
30 line-height: 1.5rem;
31 color: var(--brand-color-1);
32 text-transform: uppercase;
33 }
34
35 .contNoticia .tituloPeq {
36 font-weight: 600;
37 font-size: 1.5rem;
38 line-height: 1.875rem;
39 color: black;
40 text-transform: uppercase;
41 margin-top: 2.5rem;
42 }
43
44 .contNoticia .tituloPeq:first-child {
45 margin-top: 0;
46 }
47
48 .cat {
49 font-weight: 400;
50 font-size: 1.25rem;
51 line-height: 1.5rem;
52 display: block;
53 margin: 0.625rem 0;
54 text-transform: uppercase;
55 }
56
57 .catTematica {
58 display: inline-block;
59 padding: 0.313rem 0.625rem;
60 background: #F6F2F3;
61 border-radius: 0.625rem;
62 font-weight: 400;
63 font-size: 1.25rem;
64 line-height: 1.5rem;
65 color: #000000;
66 margin: 0.625rem 0;
67 text-transform: uppercase;
68 }
69
70 .botonRRSSDetalle {
71 margin: 0.625rem 0.625rem 0.625rem 0;
72 display: inline-block;
73 }
74
75 .contNoticia a {
76 color: var(--brand-color-1)!important;
77 }
78
79 .imgOds {
80 width: 10rem;
81 margin-bottom: 1rem;
82 }
83
84 .contAudio {
85 height: 6rem;
86 width: 26rem;
87 border: 3px solid #b4b4b4;
88 border-radius: 50px;
89 position: relative;
90 padding: 0 20px;
91 margin-right: auto!important;
92 margin-left: auto!important;
93 margin-top: 40px;
94 }
95
96 .contAudio button {
97 height: 6.1rem;
98 width: 6.1rem;
99 border: none;
100 border-radius: 50%;
101 position: absolute;
102 left: -3px;
103 top: -3px;
104 padding: 0;
105 }
106
107 .contAudio button img {
108 width: 100%;
109 height: 100%;
110 object-fit: cover;
111 }
112
113 .contAudio .tituloAudio {
114 font-weight: 600;
115 margin-bottom: .25rem;
116 }
117
118 .contAudio .auth {
119 margin-bottom: .5rem;
120 display: block;
121 }
122
123 .contAudio #timer {
124 color: #737373;
125 margin-bottom: 0;
126 margin-right: 15px;
127 width: 4rem;
128 }
129
130 input[type='range'] {
131 width: 100%;
132 -webkit-appearance: none;
133 background: transparent;
134 cursor: pointer;
135 --sx: 0%;
136 }
137
138 /***** Chrome, Safari, Opera, and Edge Chromium *****/
139 input[type="range"]::-webkit-slider-runnable-track {
140 background: linear-gradient(var(--brand-color-1), var(--brand-color-1)) 0/var(--sx) 100% no-repeat #e9e9ed;
141 height: 0.5rem;
142 }
143
144 input[type="range"]::-webkit-slider-thumb {
145 -webkit-appearance: none; /* Override default look */
146 appearance: none;
147 margin-top: -4px; /* Centers thumb on the track */
148 background-color: #A09899;
149 height: 1rem;
150 width: 1rem;
151 border-radius: 50%;
152 }
153
154 /******** Firefox ********/
155 input[type="range"]::-moz-range-track {
156 background: #e9e9ed;
157 height: 0.5rem;
158 }
159
160 input[type="range"]::-moz-range-thumb {
161 border: none; /*Removes extra border that FF applies*/
162 border-radius: 50%; /*Removes default border-radius that FF applies*/
163 background-color: #A09899;
164 height: 1rem;
165 width: 1rem;
166 }
167
168 input[type="range"]::-moz-range-progress {
169 background: var(--brand-color-1);
170 height: 0.5rem;
171 }
172
173 @media screen and (max-width: 576px) {
174 .contNoticia .colIzq {
175 border-right: 0;
176 padding-right: 0;
177 }
178
179 .contNoticia .colDer {
180 padding-left: 0;
181 }
182
183 .contAudio {
184 height: 6.2rem;
185 width: 100%;
186 }
187
188 .contAudio button {
189 height: 6.1rem;
190 width: 6.1rem;
191 }
192 }
193</style>
194
195<#assign
196 AssetCategoryLocalService=serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
197<#assign
198 JournalArticleLocalService=serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
199<#assign
200 journalArticle=JournalArticleLocalService.getArticle(getterUtil.getLong(groupId),.vars['reserved-article-id'].data) />
201<#assign categories=AssetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle",
202 journalArticle.getResourcePrimKey()) />
203<#assign AssetEntryLocalService=serviceLocator.findService("com.liferay.asset.kernel.service.AssetEntryLocalService") />
204<#assign assetEntry=AssetEntryLocalService.getEntry("com.liferay.journal.model.JournalArticle",
205 journalArticle.getResourcePrimKey()) />
206
207<div class="contNoticia row m-0">
208 <div class="col-12 col-lg-9 pl-0 colIzq py-3">
209 <#if (title.getData())??>
210 <h1>${title.getData()}</h1>
211 </#if>
212 <#if (resumen.getData())??>
213 <p>${resumen.getData()}</p>
214 </#if>
215 <#if (image.getData())?? && image.getData() != "">
216 <img alt="${image.getAttribute("alt")?replace('"', "'")}" data-fileentryid="${image.getAttribute("fileEntryId")}" src="${image.getData()}" class="w-100" />
217 <p class="pieFoto">${image.getAttribute("alt")}</p>
218 </#if>
219 <#if (content.getData())??>
220 <div class="contenidoNoticia">${content.getData()}</div>
221 </#if>
222 <#if (audio.getData())?? && audio.getData() != "">
223 <#if audio.getData()?contains('mp3') || audio.getData()?contains('ogg')>
224 <audio controls class="mt-3 d-none">
225 <source src="${audio.getData()}" type="audio/${(audio.getData()?contains('mp3'))?then('mpeg', 'ogg')}">
226 Your browser does not support the audio tag.
227 </audio>
228
229 <div class="contAudio row align-items-center">
230 <button id="botonAudio" class="" ><img src="https://www.aecid.es/documents/d/guest/grafica_play-removebg-preview" alt="Play"/></button>
231 <div class="col-3">
232 </div>
233 <div class="col-9 pl-3">
234 <#if (titAudio.getData())??>
235 <p class="tituloAudio">${titAudio.getData()}</p>
236 </#if>
237 <#if (autor.getData())??>
238 <span class="auth">${autor.getData()}</span>
239 </#if>
240 <div class="d-flex">
241 <p id="timer">00:00</p>
242 <input type="range" id="rangeTime" min="0" value="0" />
243 </div>
244 </div>
245 </div>
246 <#else>
247 <a href="${audio.getData()}">
248 ${languageUtil.format(locale, "download-x", "Audio", false)}
249 </a>
250 </#if>
251 </#if>
252 </div>
253 <div class="col-12 col-lg-3 pr-0 py-3 colDer">
254 <#if categories?filter(cat -> cat.getVocabularyId() != 43484)?size gt 0>
255 <h2 class="tituloPeq">Temática</h2>
256 <div class="d-flex flex-wrap">
257 <#list categories?filter(cat -> cat.getVocabularyId() != 43484) as cat>
258 <span class="catTematica">${cat.getName()}</span>
259 </#list>
260 </div>
261 </#if>
262
263 <h2 class="tituloPeq">ODS</h2>
264 <#if (ods.getData())?? && ods.getData() != "">
265 <#assign alt = "Icono de ODS" />
266 <#list ods.getOptionsMap() as v,k>
267 <#if v == ods.getData()>
268 <#assign alt = k />
269 </#if>
270 </#list>
271
272 <img class="imgOds" src="/documents/d/global/s_sdg_icons_inverted_transparent_web-${ods.getData()}" alt="ODS ${alt}" />
273 <#else>
274 <img class="imgOds" src="/documents/d/global/sdg-wheel_web-400x400" alt="Rueda de las ODS" />
275 </#if>
276
277 <#if categories?filter(cat -> cat.getVocabularyId() == 43484)?size gt 0>
278 <h2 class="tituloPeq">Localización</h2>
279 <#list categories?filter(cat -> cat.getVocabularyId() == 43484) as cat>
280 <span class="cat catLoc">${cat.getName()}</span>
281 </#list>
282 </#if>
283
284 <h2 class="tituloPeq">Fecha</h2>
285 <#if journalArticle?has_content>
286 <#if assetEntry.getPublishDate()??>
287 <#assign fechaPubli=assetEntry.getPublishDate()?datetime?string["dd/MM/yyyy - HH:mm"]>
288 <span class="cat">${fechaPubli}</span>
289 </#if>
290 </#if>
291
292 <h2 class="tituloPeq">Compartir</h2>
293 <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=${friendlyURL}" target="_blank" rel="noopener" class="botonRRSSDetalle" aria-label="${languageUtil.get(locale, "compartir.en")} Facebook">
294 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1_35584)"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.6095 36H12.5774V20.6268H8V13.8902H12.5774C12.5627 12.3356 12.5774 10.781 12.6206 9.22642C12.7294 8.17188 12.9307 7.13549 13.2252 6.11723C14.3773 2.73944 16.7239 0.766828 20.264 0.201128C22.9293 -0.145201 25.5773 -0.0441522 28.2097 0.503411V6.63543C26.7398 6.50933 25.2716 6.52401 23.8051 6.67861C22.1287 7.00248 21.107 7.9957 20.739 9.65825C20.6173 11.0652 20.5741 12.4755 20.6095 13.8902H27.7779C27.359 16.1271 26.9851 18.3726 26.6551 20.6268H20.6095V36Z" fill="#0A66FF"/></g><defs><clipPath id="clip0_1_35584"><rect width="20.2097" height="36" fill="white" transform="translate(8)"/></clipPath></defs></svg>
295 </a>
296 <a target="_blank" href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="botonRRSSDetalle" data-show-count="false" aria-label="${languageUtil.get(locale, "compartir.en")} Twitter/X">
297 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1_35585)"><path d="M28.4425 2H33.9607L21.8447 15.7954L36 34.5092H24.8917L16.1946 23.137L6.23792 34.5092H0.71976L13.5555 19.7541L0 2H11.3842L19.2416 12.3885L28.4425 2ZM26.5112 31.2702H29.5701L9.77674 5.11896H6.48984L26.5112 31.2702Z" fill="black"/></g><defs><clipPath id="clip0_1_35585"><rect width="36" height="32.5092" fill="white" transform="translate(0 2)"/></clipPath></defs></svg>
298 </a>
299 </div>
300</div>
301
302<script>
303Liferay.on('allPortletsReady', () => {
304 const audio = document.querySelector('.contNoticia audio');
305 const boton = document.getElementById('botonAudio');
306 const range = document.getElementById('rangeTime');
307 const timer = document.getElementById('timer');
308 const playImg = 'https://www.aecid.es/documents/d/guest/grafica_play-removebg-preview';
309 const pauseImg = 'https://www.aecid.es/documents/d/guest/grafica_pause-removebg-preview';
310
311 if (!audio || !boton || !range || !timer) return;
312
313 let intervalo = null;
314
315 const setRangeStyle = (val) => {
316 const min = Number(range.min) || 0;
317 const max = Number(range.max) || 100;
318 const percent = ((val - min) * 100) / (max - min);
319 range.style.setProperty('--sx', percent + '%');
320 };
321
322 const setTimerFromSeconds = (sec) => {
323 const m = Math.floor(sec / 60);
324 const s = Math.floor(sec % 60);
325 timer.textContent = `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
326 };
327
328 audio.addEventListener('loadedmetadata', () => {
329 range.max = Math.floor(audio.duration || 0);
330 setRangeStyle(Number(range.value) || 0);
331 });
332
333 boton.addEventListener('click', () => {
334 if (audio.ended || audio.currentTime >= audio.duration) {
335 audio.currentTime = 0;
336 range.value = 0;
337 setTimerFromSeconds(0);
338 setRangeStyle(0);
339 }
340
341 if (audio.paused) {
342 audio.play();
343 boton.querySelector('img')?.setAttribute('src', pauseImg);
344
345 intervalo = setInterval(() => {
346 const val = Math.floor(audio.currentTime);
347 range.value = val;
348 setTimerFromSeconds(val);
349 setRangeStyle(val);
350 }, 500);
351 } else {
352 audio.pause();
353 boton.querySelector('img')?.setAttribute('src', playImg);
354 clearInterval(intervalo);
355 intervalo = null;
356 }
357 });
358
359 audio.addEventListener('ended', () => {
360 clearInterval(intervalo);
361 intervalo = null;
362 boton.querySelector('img')?.setAttribute('src', playImg);
363 });
364
365 range.addEventListener('input', (e) => {
366 const val = Number(e.target.value) || 0;
367 audio.currentTime = val;
368 setTimerFromSeconds(val);
369 setRangeStyle(val);
370 });
371});
372</script>
