Tironemota

▲
Maqueta

Maqueta

Index (07/06/2022)

Archivo Archivo HTML index.html ( Página inicio del sitio. )

<!DOCTYPE html>
<html lang="es">
<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>Tironemota tutoriales</title>
    <link rel="icon" type="image/png" href="img/maq/TT50x50.png" />
    <link href="css/normalice.css" rel="stylesheet">
    <link href="css/maqueta.css" rel="stylesheet">
</head>
<body>
    <div class="contenedor">
        <header class="header">
            <h1><a href="index.html">Tironemota</a></h1>
        </header>
        <main class="main">
            <section class="inicio">
                <div><a href="VideoTutorial/lista.html"><img src="img/maq/cine2.gif" alt="VideoTutos" title="Video tuto"></a></div>
                <div><a href="Familia/index.html"><img src="Familia/img/foto/DeliaEusebiaNuezTrejo.png" alt="Familia" title="Familia"></a></div>
                <div><a href="t-codigos/index.html"><img src="img/maq/logos-9.png" width="150" height="150" alt="Códigos" title="Códigos"></a></div>
                <div><a href="t-imagen/index.html"><img src="img/maq/logos-10.png" width="150" height="150" alt="Imágenes" title="Imágenes"></a></div>
                <div><a href="t-html/index.html"><img src="img/maq/logos-0.png" width="150" height="150" alt="HTML" title="HTML"></a></div>
                <div><a href="t-css/index.html"><img src="img/maq/logos-1.png" width="150" height="150" alt="CSS" title="CSS"></a></div>
                <div><a href="t-js/index.html"><img src="img/maq/logos-4a.png" width="150" height="150" alt="Javascript" title="Javascript"></a></div>
                <div><a href="t-php/index.html"><img src="img/maq/logos-2.png" width="150" height="150" alt="PHP" title="PHP"></a></div>
                <div><a href="t-maqueta/index.html"><img src="img/maq/logos-7.png" width="150" height="150" alt="Maquetear" title="Maquetear"></a></div>
                <div><a href="t-access/index.html"><img src="img/maq/logos-19.png" width="150" height="150" alt="Access" title="Access"></a></div>
                <div><a href="t-VisualB/index.html"><img src="img/maq/logos-18.png" width="150" height="150" alt="VisualBasic" title="VisualBasic"></a></div>
                <div><a href="t-sql/index.html"><img src="img/maq/sql.png" width="150" height="150" alt="SQL" title="SQL"></a></div>
                <div><a href="t-wamp/index.html"><img src="img/maq/wampserver.png" width="150" height="150" alt="WampServer" title="WampServer"></a></div>
                <div><a href="t-phpMyAdmin/index.html"><img src="img/maq/phpMyAdmin.png" width="150" height="150" alt="phpMyAdmin" title="phpMyAdmin"></a></div>
                <div><a href="t-visualStudio/index.html"><img src="img/maq/VisualEstudioCode.png" width="150" height="150" alt="Visual Studio Code" title="Visual Studio Code"></a></div>
                <div><a href="t-phpMySQL/index.html"><img src="../img/maq/phpMySQL.png" width="150" height="150" alt="php y MySQL" title="php y MySQL"></a></div>
                <div><a href="t-laragon/index.html"><img src="../img/maq/laragon.png" width="150" height="150" alt="Laragon" title="Laragon"></a></div>
            </section>
        </main>
        <footer class="footer">
            <div>Tironemota</div>
        </footer>
    </div>
</body>
</html>
Arriba ... ⇑

Tema (07/06/2022)

<!DOCTYPE html>
<html lang="es">
<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>Tironemota TEMA</title>
    <link rel="icon" type="image/png" href="../img/maq/TT50x50.png" />
    <link href="../css/normalice.css" rel="stylesheet">
    <link href="../css/maqueta.css" rel="stylesheet">
    <link href="../css/cajas.css" rel="stylesheet">
    <link href="../css/general.css" rel="stylesheet">
</head>
<body>
    <div class="contenedor" id="inicio">
        <header class="header">
            <h1><a href="../index.html">Tironemota</a></h1>
            <span id="Ini"><a href="#inicio" title="Arriba">▲</a></span>
        </header>
        <nav class="nav">
            <div><a href="../t-codigos/index.html"><img src="../img/maq/logos-9.png" alt="Códigos" title="Códigos"></a></div>
            <div><a href="../t-imagen/index.html"><img src="../img/maq/logos-10.png" alt="Imágenes" title="Imágenes"></a></div>
            <div><a href="../t-html/index.html"><img src="../img/maq/logos-0.png" width="150" height="150" alt="HTML" title="HTML"></a></div>
            <div><a href="../t-css/index.html"><img src="../img/maq/logos-1.png" width="150" height="150" alt="CSS" title="CSS"></a></div>
            <div><a href="../t-js/index.html"><img src="../img/maq/logos-4a.png" width="150" height="150" alt="Javascript" title="Javascript"></a></div>
            <div><a href="../t-php/index.html"><img src="../img/maq/logos-2.png" width="150" height="150" alt="PHP" title="PHP"></a></div>
            <div><a href="../t-maqueta/index.html"><img src="../img/maq/logos-7.png" width="150" height="150" alt="Maquetear" title="Maquetear"></a></div>
            <div><a href="../t-access/index.html"><img src="../img/maq/logos-19.png" width="150" height="150" alt="Access" title="Access"></a></div>
            <div><a href="../t-VisualB/index.html"><img src="../img/maq/logos-18.png" width="150" height="150" alt="VisualBasic" title="VisualBasic"></a></div>
            <div><a href="../t-sql/index.html"><img src="../img/maq/sql.png" width="150" height="150" alt="SQL" title="SQL"></a></div>
            <div><a href="../t-wamp/index.html"><img src="../img/maq/wampserver.png" width="150" height="150" alt="WampServer" title="WampServer"></a></div>
            <div><a href="../t-phpMyAdmin/index.html"><img src="../img/maq/phpMyAdmin.png" width="150" height="150" alt="phpMyAdmin" title="phpMyAdmin"></a></div>
            <div><a href="../t-visualStudio/index.html"><img src="../img/maq/VisualEstudioCode.png" width="150" height="150" alt="Visual Studio Code" title="Visual Studio Code"></a></div>
            <div><a href="../t-phpMySQL/index.html"><img src="../img/maq/phpMySQL.png" width="150" height="150" alt="php y MySQL" title="php y MySQL"></a></div>
            <div><a href="../t-laragon/index.html"><img src="../img/maq/laregon.png" width="150" height="150" alt="Laragon" title="Laragon"></a></div>
        </nav>
        <main class="main">
            <div class="cabezal">
                <a href="index.html"><img src="../img/maq/logos-###.png" width="150" height="150" alt="XXXXXX" title="XXXXXX"></a>
                <h1>TEMA</h1>
            </div>
            <div class="buscadorTablaJs">
                <div>Buscar: <input id="buscarPalabra" type="text" placeholder="Texto a buscar ..." onkeyup="aBuscar()" /></div>
                <table id="tablaDatos">
                    <thead><tr><th>Contenido</th></tr></thead>
                    <tbody>
                        <tr><td><a href="@@@@">@@@@</a></td></tr>
                        <tr><td><a href="@@@@">@@@@</a></td></tr>
                    </tbody>
                    <tfoot><tr class='noBuscar hide'><td colspan="2"></td></tr></tfoot>
                </table>
            </div>
        </main>
        <footer class="footer">
            <div>Tironemota</div>
        </footer>
    </div>
</body>
</html>
Arriba ... ⇑

Artículo (07/06/2022)

<!DOCTYPE html>
<html lang="es">
<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>Tironemota ARTICULO</title>
    <link rel="icon" type="image/png" href="../img/maq/TT50x50.png" />
    <link href="../css/normalice.css" rel="stylesheet">
    <link href="../css/maqueta.css" rel="stylesheet">
    <link href="../css/cajas.css" rel="stylesheet">
    <link href="../css/general.css" rel="stylesheet">
</head>
<body>
    <div class="contenedor" id="inicio">
        <header class="header">
            <h1><a href="../index.html">Tironemota</a></h1>
            <span id="Ini"><a href="#inicio" title="Arriba">▲</a></span>
        </header>
        <nav class="nav">
            <div><a href="../t-codigos/index.html"><img src="../img/maq/logos-9.png" alt="Códigos" title="Códigos"></a></div>
            <div><a href="../t-imagen/index.html"><img src="../img/maq/logos-10.png" alt="Imágenes" title="Imágenes"></a></div>
            <div><a href="../t-html/index.html"><img src="../img/maq/logos-0.png" width="150" height="150" alt="HTML" title="HTML"></a></div>
            <div><a href="../t-css/index.html"><img src="../img/maq/logos-1.png" width="150" height="150" alt="CSS" title="CSS"></a></div>
            <div><a href="../t-js/index.html"><img src="../img/maq/logos-4a.png" width="150" height="150" alt="Javascript" title="Javascript"></a></div>
            <div><a href="../t-php/index.html"><img src="../img/maq/logos-2.png" width="150" height="150" alt="PHP" title="PHP"></a></div>
            <div><a href="../t-maqueta/index.html"><img src="../img/maq/logos-7.png" width="150" height="150" alt="Maquetear" title="Maquetear"></a></div>
            <div><a href="../t-access/index.html"><img src="../img/maq/logos-19.png" width="150" height="150" alt="Access" title="Access"></a></div>
            <div><a href="../t-VisualB/index.html"><img src="../img/maq/logos-18.png" width="150" height="150" alt="VisualBasic" title="VisualBasic"></a></div>
            <div><a href="../t-sql/index.html"><img src="../img/maq/sql.png" width="150" height="150" alt="SQL" title="SQL"></a></div>
            <div><a href="../t-wamp/index.html"><img src="../img/maq/wampserver.png" width="150" height="150" alt="WampServer" title="WampServer"></a></div>
            <div><a href="../t-phpMyAdmin/index.html"><img src="../img/maq/phpMyAdmin.png" width="150" height="150" alt="phpMyAdmin" title="phpMyAdmin"></a></div>
            <div><a href="../t-visualStudio/index.html"><img src="../img/maq/VisualEstudioCode.png" width="150" height="150" alt="Visual Studio Code" title="Visual Studio Code"></a></div>
            <div><a href="../t-phpMySQL/index.html"><img src="../img/maq/phpMySQL.png" width="150" height="150" alt="php y MySQL" title="php y MySQL"></a></div>
            <div><a href="../t-laragon/index.html"><img src="../img/maq/laregon.png" width="150" height="150" alt="Laragon" title="Laragon"></a></div>
        </nav>
        <main class="main">
            <div class="cabezal">
                <a href="index.html"><img src="../img/maq/logos-###.png" width="150" height="150" alt="XXXXXX" title="XXXXXX"></a>
                <h1>ARTICULO<br><span class="fecha">00/00/0000</span></h1>
            </div>
            <div class="menuCol2">
                <div><ul><li>Columna 1</li></ul></div>
                <div><ul><li>Columna 2</li></ul></div>
            </div>
            <article id="@@@@@">
                <h2 class="ctveo">@@@@@ <span class="fecha">######</span></h2>
                <div class="CajaBlanca">CONTENIDO</div>
                <div class="arriba"><a href="#inicio">Arriba ... ⇑</a></div>
            </article>
        </main>
        <footer class="footer">
            <div>Tironemota</div>
        </footer>
    </div>
    <script src="../js/funciones.js"></script>
</body>
</html>
Arriba ... ⇑

Archivo Archivo CSS maqueta.css (07/06/2022)

@charset "utf-8";
body{color:#000000;font-family:'Times New Roman';font-size:18px;}
.contenedor{
    width:100%; /*Ancho de la pagina*/
    max-width: 1400px; /*Ancho máximo de la página*/
    margin:auto; /*Página centrada*/
}
.header{background:#0f0757;color:#ffffff;font-family:'Times New Roman', serif;font-size:1.5em;padding:1em;}
.header h1{margin:0;}
.header a{color:#ffffff;text-decoration:none;}
.header a:hover{color:#ffff00;}
.inicio{justify-content:center;display:flex;flex-wrap:wrap;margin:auto;padding:20px;width:90%;}
.inicio>div{margin:10px;padding:25px;}
.inicio>div:hover{background:#E3DFDF;border-radius:50%;}
.inicio>div img{max-width:130px;height:auto;}
.footer{background:#3a3a3a;color:white;font-size:1.5em;padding:1em;text-align:center;}
.nav{background-color:#3a3a3a;display:flex;flex-wrap:wrap;justify-content:center;margin:auto;}
.nav>div{margin:10px;padding:10px;background-color:white;border-radius:50%;}
.nav>div:hover{background-color:yellowgreen;}
.nav>div img{max-width:50px;height:auto;}
.main{padding:1em 0 3em;width:100%;}
.main h1,.main h2,.main h3{padding-left:1em;}
@media (min-width: 800px){.main{width:90%;margin:auto;}}
.cabezal{text-align:center;}
.cabezal img{max-height:100px;width:auto;}
.cabezal img:hover{background-color:#f7ed69;border-radius:50%;}
.lisTuto{width:90%;display:flex;flex-wrap:wrap;margin:auto;}
.lisTuto>div{width:33.3333%;outline:1px solid gray;}
Arriba ... ⇑

Archivo Archivo CSS nomalice.css (07/06/2022)

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Documento ======================================================= */
/**
* 1. Corregir la altura de la línea en todos los navegadores.
* 2. Evitar ajustes de tamaño de fuente después de cambios de orientación en iOS.
*/
html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
}
/* Secciones ======================================================= */
/*** Eliminar el margen en todos los navegadores. ***/
body {margin: 0;}
/*** Renderiza el elemento `main` consistentemente en IE. ***/
main {display: block;}
/**
* Corrija el tamaño de la fuente y el margen en los elementos `h1` 
* dentro de los contextos `section` y `article` en Chrome, Firefox y Safari.
*/
h1 { font-size: 2em; margin: 0.67em 0; }
/* Agrupando contenido ============================================= */
/**
* 1. Agregue el tamaño correcto de la caja en Firefox.
* 2. Mostrar el desbordamiento en Edge e IE.
*/
hr {
   box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
}
/**
* 1. Corrija la herencia y la escala del tamaño de fuente en todos los navegadores.
* 2. Corrija el tamaño de fuente impar `em` en todos los navegadores.
*/
pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
}
/* Text-level semantics
* Semántica a nivel de texto ======================================= */
/**
* Eliminar el fondo gris en los enlaces activos en IE 10.
*/
a {background-color: transparent;}
/**
* 1. Retire el borde inferior en Chrome 57-
* 2. Agregue la decoración de texto correcta en Chrome, Edge, IE, Opera y Safari.
*/
abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
}
/**
* Agregue el peso de fuente correcto en Chrome, Edge y Safari.
*/
b,
strong {font-weight:bolder;}
/**
* 1. Corrija la herencia y la escala del tamaño de fuente en todos los navegadores.
* 2. Corrija el tamaño de fuente impar `em` en todos los navegadores.
*/
code,
kbd,
samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
}
/**
* Agregue el tamaño de fuente correcto en todos los navegadores.
*/
small {font-size: 80%;}
/**
* Evita que los elementos `sub` y` sup` 
* afecten la altura de la línea en todos los navegadores.
*/
sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
/* Contenido incrustado ============================================ */
/*** Elimine el borde de las imágenes dentro de los enlaces en IE 10. ***/
img{border-style:none;}
/* Formas ========================================================== */
/**
* 1. Cambia los estilos de fuente en todos los navegadores.
* 2. Eliminar el margen en Firefox y Safari.
*/
button, input, optgroup, select, textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
}
/**
* Mostrar el desbordamiento en IE.
* 1. Mostrar el desbordamiento en el borde.
*/
button,
   input { /* 1 */
   overflow: visible;
}
/**
* Elimine la herencia de la transformación de texto en Edge, Firefox e IE.
* 1. Eliminar la herencia de la transformación de texto en Firefox.
*/
button,
select { /* 1 */
   text-transform: none;
}
/*** Corrija la incapacidad de diseñar tipos de clics en iOS y Safari. ***/
button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }
/*** Retire el borde interno y el relleno en Firefox. ***/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
/*** Restaura los estilos de enfoque no establecidos por la regla anterior. ***/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
/*** Corregir el relleno en Firefox. ***/
fieldset{padding:0.35em 0.75em 0.625em;}
/**
* 1. Corregir el ajuste de texto en Edge y IE.
* 2. Corrija la herencia de color de los elementos `fieldset` en IE.
* 3. Elimine el relleno para que los desarrolladores no queden atrapados 
*    cuando ponen a cero los elementos `fieldset` en todos los navegadores.
*/
legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
   padding: 0; /* 3 */
   white-space: normal; /* 1 */
}
/*** Agregue la alineación vertical correcta en Chrome, Firefox y Opera. ***/
progress{vertical-align:baseline;}
/*** Elimina la barra de desplazamiento vertical predeterminada en IE 10+. ***/
textarea{overflow:auto;}
/**
* 1. Agregue el tamaño correcto de la caja en IE 10.
* 2. Retire el relleno en IE 10.
*/
[type="checkbox"],[type="radio"] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
}
/*** Corrija el estilo de cursor de los botones de incremento y decremento en Chrome. ***/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
/**
* 1. Corregir la apariencia impar en Chrome y Safari.
* 2. Corregir el estilo de esquema en Safari.
*/
[type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
}
/*** Retire el relleno interno en Chrome y Safari en macOS. ***/
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/**
* 1. Corrija la incapacidad de diseñar tipos de clics en iOS y Safari.
* 2. Cambia las propiedades de la fuente a `inherit` en Safari.
*/
::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
}
/* Interactivo=============================================== */
/*** Agregue la pantalla correcta en Edge, IE 10+ y Firefox. ***/
details{display:block;}
/*** Agregue la pantalla correcta en todos los navegadores. ***/
summary{display:list-item;}
/* Miscelánea =============================================== */
/*** Agregue la pantalla correcta en IE 10+. ***/
template{display:none;}
/*** Agregue la pantalla correcta en IE 10. ***/
[hidden]{display:none;}
Arriba ... ⇑

Contador regresivo de trabajo

<div>
    <!--CONTADOR REGRESIVO DE TRABAJO-->
    <style>.trabajoDescanso{position:fixed;right:10px;top:10px;z-index:10000;background-color: #fcb8b2;border:1px solid #780e05;color:#780e05;font-size:50px;padding:5px 10px;}</style>
    <div class="trabajoDescanso"><span id="tda"></span></div>
    <script>
    var tdb = prompt('¿Cuanto tiempo en segundo vas ha trabajar?');
    var tdc = document.getElementById("tda");
    window.setInterval(function(){
        tdc.innerHTML = tdb;
        tdb--;
        if(tdb == -2){alert('DESCANSO')}
    },1000);
    </script>
</div>
Arriba ... ⇑