1. Páxinas de referencia
Malia que a web dun centro ten unha función corporativa onde se publican novas administrativas como matrícula, prazos, etc. tamén é o escaparate do centro, aquilo que desexa dar a coñecer, é dicir, o que sodes como comunidade, como traballades, tipos de actividades,etc. É dicir, transmitir a emoción do centro. E importante que o deseño identifique o centro con imaxes significativas do mesmo ou da localidade na que se atopa. Uns exemplos da zona Cee, podería ser os seguintes:
https://www.edu.xunta.gal/centros/ceipricardotobio/
http://www.edu.xunta.gal/centros/ceipdelouro/
http://www.edu.xunta.gal/centros/craatarandeira/
http://www.edu.xunta.gal/centros/ceipvirxedabarca/
Un recurso interesante é o vídeo, pois ben feito transmite moitas cousas. Unha vez máis temos un exemplo no cra A Tarandeira
http://www.edu.xunta.gal/centros/craatarandeira/node/339
Pero a súa vez abusar da publicación de vídeos e fotos, non fai máis que empobrecer unha páxina web.
http://www.edu.xunta.gal/centros/ceiplabartapose/
Por outra banda, resulta interesante que amosedes a vosa documentación que vos define como centro. Fundamentalmente o proxecto educativo. Es documento define a liña de horizonte do centro, que en principio non vale para nada, pero indica cara onde camiña o centro. Un exemplo coñecido é o Celso Emilio Ferreiro de Cerceda
http://www.edu.xunta.gal/centros/ceipcelsoemilioferreiro/node/50
Por outra banda, paréceme moi interesante que a navegación sexa clara.
https://www.edu.xunta.gal/centros/iesramoncaamano/
https://www.edu.xunta.gal/centros/cpipicota/
https://www.edu.xunta.gal/centros/ieslamascastelo/
2. Html básico
<html>
<head>
<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
</style>
</head>
<body>
<div id=cadrado>
<h1>cpi as revoltas</h1>
</div>
</body>
3. Páxina da formación
http://www.edu.xunta.gal/centros/curso12/
4. Inserir un texto
5. Inserir un hipervínculo
6. Inserir unha imaxe
7. Modificar fotos co Gimp
8. Crear unha imaxe vectorial con Inkscape
9. Publicar un vídeo de Youtube ou Vimeo
Escalada: https://vimeo.com/132910273
10. Publicar un pdf
intelixencia artificial OpenAI
11. Subir un vídeo propio
Como preparar un vídeo e subilo: https://blog.atio.es/node/460
código:
<div style="text-align:center;"> <video width="720" height="576" controls="controls" autostart="0" preload="none" poster="http://url do póster"> <source src="http://url do vídeo" type="video/mp4" /> O teu navegador non soporta este vídeo. </video> </div>
12. Publicar un vídeo de Youtube, axustando o seu tamaño ao 100% da páxina
https://youtu.be/X9ctjGe5iAQ
<style>
.video-responsive{
position:relative;
overflow:hidden;
padding-bottom:56.25%;
}
.video-responsive iframe{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
</style>
<body>
<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/X9ctjGe5iAQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</body>
13. Fontes personalizadas nunha publicación
<style>
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
#poesia{
font-family:'Architects Daughter';
color: #A1C6B5;
}
#poesia h2{
font-size:2em !important;
color:
}
#poesia p{
font-size:1.3em !important;
}
</style>
<div id='poesia'>
<h2>Pregunto aos homes e ás mulleres do noso mar</h2>
<p>Mariñeiros de Viveiro,</p>
<p>Fisterra, Caión, Malpica,</p>
<p>Pontevedra, Arousa, Vigo,</p>
<p>Noia, A Coruña, Muxía,</p>
<p>pescadores e peixeiras,</p>
<p>mariscadoras das rías</p>
<p>¿de quen son os areeiros</p>
<p>e os cons e faros e as illas?</p>
<p>(...)</p>
<p>¿de quen o verdello, a area,</p>
<p>os laños, as ardentías, </p>
<p>e as nécoras e centolas</p>
<p>e rodaballos e minchas,</p>
<p>(...)</p>
<p>Decídeme de quen son</p>
<p>praia, areas, augas, rías...</p>
<p>____________</p>
<p>Bernardino Graña</p>
</div>
14. Lightbox
a. Inserimos imaxe de tamaño pequeno
https://blog.atio.es/sites/blog/files/inline-images/crastacomba/abarca2.jpg
b. Introducimos hiperligazón a imaxe de maior tamaño
https://atio.es/acristina/data/_uploaded/image/abarca/abarca.jpg
c. Desactivamos texto enriquecido e engadimos rel="lihgtbox" no link href
<p><a href="https://atio.es/acristina/data/_uploaded/image/abarca/abarca.jpg" rel="lightbox"><img src="https://blog.atio.es/sites/blog/files/inline-images/crastacomba/abarca2.jpg" alt="" /></a></p>
15. Galería
1. Descargar imaxes de Marvel da seguinte páxina web:
https://atio.es/pub/marvel/
Captain, thor, spider, hulk, black cat, black widow, thanos
2. Crea un álbum na Galería
16. Redactar coa axuda da IA
16. Acadar fotos coa axuda da intelixencia artificial
https://openai.com/product/dall-e-2
16. Galería con código
<style>
.galeria .caixa img {
width:300px;
border: 2px solid black;
margin: 10px;
}
.galeria {
display: flex;
flex-wrap: wrap;
}
.caixa{
box-sizing: border-box;
padding:10px;
}
</style>
<p>Actividade </p>
<section class="galeria">
<div class="caixa"><a href="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber1.jpeg" rel="lightbox"><img src="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber1.jpeg" alt="Foto 1"></div>
<div class="caixa"><a href="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber2.jpeg" rel="lightbox"><img src="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber2.jpeg" alt="Foto 2"></div>
<div class="caixa"><a href="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber12.jpeg" rel="lightbox"><img src="/centros/iesramoncaamano/system/files/DEPARTAMENTOS/ORIENTACION/ciber/ciber12.jpeg"alt="Foto 12"></div>
</section>