Segunda aplicación creada en Electron.js: HTML y un poco de CSS
Una aplicación básica en Electron.js, es puro HTML tal cual mostramos antes, claro está, que este HTML podemos colocarle integración con Electron para dotar a la misma con funcionalidades del sistema operativo como menús, manejo de ventanas, etc, pero, todo comienza con una sencilla página HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: purple;
}
h1 {
text-align: center;
}
#customId{
display: block;
width: 100%;
}
section{
background-color: #FFF;
font-family: Georgia;
padding: 25px;
margin-top: 10px;
}
</style>
</head>
<body>
<main>
<h1>Page Detail</h1>
<img id="customId" src="https://cdn.pixabay.com/photo/2022/08/16/20/02/wallpaper-7391054__340.jpg" alt="">
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
</section>
</main>
</body>
</html>En este ejemplo como puedes ver, estamos colocando contenido HTML y CSS, los cuales son las piezas fundamentales en cualquier desarrollo web y en Electron, no puede ser la excepción al ejecutar la aplicación, tendremos:
Recuerda que el código del main.js es la misma que la utilizada en la primera aplicación. Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter