### Proyecto de Ciencia para Niños: Diseño Web Adaptativo
#### Introducción
El diseño web adaptativo es una técnica moderna que permite que las páginas web se ajusten automáticamente a diferentes tamaños de pantalla y dispositivos. En este proyecto, los niños aprenderán cómo funciona el diseño web adaptativo y crearán su propia página web que se adapte a diferentes dispositivos, como teléfonos móviles, tablets y computadoras.
#### Objetivos
1. Entender qué es el diseño web adaptativo.
2. Aprender los conceptos básicos de HTML y CSS.
3. Crear una página web simple que se adapte a diferentes tamaños de pantalla.
#### Materiales
– Computadoras con acceso a internet
– Software de edición de texto (como Notepad o VS Code)
– Conexión a internet
– Proyector (opcional)
#### Actividad 1: Introducción al Diseño Web Adaptativo
1. Presentación: Explique a los niños qué es el diseño web adaptativo y por qué es importante. Utilice ejemplos simples, como cómo una página web se ve diferente en un teléfono móvil y en una computadora.
2. Demostración: Muestre a los niños un sitio web que utiliza diseño adaptativo. Cambie el tamaño de la ventana del navegador para mostrar cómo la página se ajusta.
#### Actividad 2: Introducción a HTML y CSS
1. HTML: Explique que HTML (HyperText Markup Language) es el lenguaje utilizado para estructurar el contenido de una página web. Enseñe a los niños cómo crear una estructura básica de una página web utilizando etiquetas HTML.
– Ejemplo:
« `html
Mi Página Web<title><br />
<head><br />
<body data-rsssl=1></p>
<h1>¡Hola Mundo!</p>
<h1>
<p>Esta es mi primera página web.</p>
<p>
<body data-rsssl=1><br />
<html><br />
« `<br />
2. CSS: Explique que CSS (Cascading Style Sheets) es el lenguaje utilizado para dar estilo a una página web. Enseñe a los niños cómo aplicar estilos básicos, como cambiar el color del texto y el fondo.<br />
– Ejemplo:<br />
« `css<br />
body {<br />
background-color: lightblue;<br />
}<br />
h1 {<br />
color: darkblue;<br />
}<br />
« `</p>
<p>#### Actividad 3: Creación de una Página Web Adaptativa<br />
1. Ejercicio Práctico: Divida a los niños en pequeños grupos y pídales que creen una página web simple utilizando HTML y CSS. Proporcione ayuda y guía durante el proceso.<br />
2. Medición de Resultados: Cada grupo presentará su página web y explicará cómo se adapta a diferentes tamaños de pantalla. Los niños pueden usar dispositivos móviles y computadoras para demostrar cómo su página se ajusta.</p>
<p>#### Conclusión<br />
En este proyecto, los niños han aprendido los conceptos básicos del diseño web adaptativo y han creado sus propias páginas web. Este conocimiento les permitirá entender mejor cómo funcionan las páginas web y cómo se ajustan a diferentes dispositivos. Además, este proyecto fomenta la creatividad y las habilidades tecnológicas en los niños.</p>
<p>#### Evaluación<br />
– Participación: Evalúe la participación activa de los niños durante las actividades.<br />
– Creatividad: Observe cómo los niños aplican los conocimientos adquiridos para crear sus páginas web.<br />
– Resultados: Evalúe el producto final, es decir, la página web creada por cada grupo, y su capacidad de adaptación a diferentes tamaños de pantalla.</p>
<p>Este proyecto no solo enseña a los niños sobre el diseño web adaptativo, sino que también les proporciona una introducción al mundo de la programación y el diseño web, habilidades que serán muy útiles en el futuro.</p>
</div><!-- .entry-content .clear -->
</div>
</article><!-- #post-## -->
<nav class="navigation post-navigation" aria-label="Articles">
<div class="nav-links"><div class="nav-previous"><a title="### Preguntas Frecuentes sobre Zero Trust #### ¿Qué es Zero Trust? Zero Trust es una" href="https://gaiatechstar.com/preguntas-frecuentes-sobre-zero-trust-que-es-zero-trust-zero-trust-es-una/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Précédent</span> <p> ### Preguntas Frecuentes sobre Zero Trust #### ¿Qué es Zero Trust? Zero Trust es una </p></a></div><div class="nav-next"><a title="Bien sûr, voici une histoire fun sur le MLOps : --- Dans le royaume high-tech" href="https://gaiatechstar.com/bien-sur-voici-une-histoire-fun-sur-le-mlops-dans-le-royaume-high-tech/" rel="next"><span class="ast-post-nav" aria-hidden="true">Suivant <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> Bien sûr, voici une histoire fun sur le MLOps : — Dans le royaume high-tech </p></a></div></div>
</nav> </main><!-- #main -->
</div><!-- #primary -->
</div> <!-- ast-container -->
</div><!-- #content -->
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
<div class="ast-builder-grid-row-container-inner">
<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
<div class="ast-footer-copyright"><p>Copyright © 2026</p>
<footer id="main-footer">
<div id="footer-bottom">
<div class="container clearfix">
<div id="footer-info"><a href="https://refoia-jeremy-tech.com/">refoia jérémy tech </a></div>
</div>
</div>
</footer>
</div> </div>
</div>
</div>
</div>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
<path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
</svg></span> <span class="screen-reader-text">Retour en haut</span>
</div>
<script data-category="functional">
</script>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
</script>
<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""};
//# sourceURL=astra-theme-js-js-extra
</script>
<script src="https://gaiatechstar.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.12.3" id="astra-theme-js-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://gaiatechstar.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://gaiatechstar.com/wp-includes/js/wp-emoji-loader.min.js
</script>
</body>
</html>
<!-- Page cached by LiteSpeed Cache 7.8 on 2026-03-05 19:43:31 -->