Segunda aplicación creada en Electron.js: HTML y un poco de CSS

- Andrés Cruz

In english
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

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.