Informática Lucía: abril 2017

Ola! Hoxe tráiovos un parte do proxecto que estou facendo coas miñas compañeiras Gemma e Ariadna. O noso proxecto consiste na creación dun test que se elaborou na aplicación de Atom. Por desgraza non nos dou tempo a acabalo pero algo polo menos fixemos. A miña parte consistía na páxina incial do test. Aquí vos deixo unha foto:

Como podedes ver non está acabado, pero igualmente móstrovos o código dese botón e da páxina.
Este é o código da páxina:

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<title>Test¿Que personaje Disney eres?</title>
</head>

<body>
<h1>¿Quieres saber que personaje Disney eres?</h1>
<h3><a href="preg1.html"><button class="btn" type="button" onclick="funcionCambiadora()">¡Pues empecemos!</button></a></h3>
</body>
</html>

Esa é a estructura e o botón dirixe á primeira pregunta, que é a que fixo unha das miñas compañeiras.
O estilo da páxina, creado nunha páxina chamada styles.css é o seguinte:

body{background-image: url("Images/Portada.jpg");}

p {    border-radius: 25px;
    padding: 2px;
    width: 20px;
    height: auto;
font-family: 'Indie Flower', cursive;

    display:block;
    margin-top: 5px;
    margin-left:10px;
    margin-right:auto;

        }

h1 {        color:white;
        border-radius: 25px;
          padding: 2px;
           width: 2000px;
            height: 75px;
    front-size:55px;
        font-family: 'Gloria Hallelujah', cursive;

            }

h2 {        color:black;
        border-radius: 25px;
            background: white;
            padding: 20px;
           width: 500px;
            height: 75px;
    front-size:100px;
        font-family: 'Glorie Hallelujah', cursive;

display:inline-table;
margin-right:10px;

            }

h3{         color:white;
                font-family: 'Indie Flower', cursive;}

img {    display:block;
    margin:10px;
        }

Con esto terías a páxina diseñada como a teño eu, pero sempre podes cambiar a aparaiencia.
Por último, fixen o botón que por desgraza, doume moito traballo debido a que non sabía como enlazar ese botón con outra páxina html.
O botón creeino nesta páxina, e o código que me dou pois collino e copieino no styles.css
Igualmente deíxovos o código do meu botón:

     .btn {
        background: #d934a7;
        background-image: -webkit-linear-gradient(top, #d934a7, #2980b9);
        background-image: -moz-linear-gradient(top, #d934a7, #2980b9);
        background-image: -ms-linear-gradient(top, #d934a7, #2980b9);
        background-image: -o-linear-gradient(top, #d934a7, #2980b9);
        background-image: linear-gradient(to bottom, #d934a7, #2980b9);
        -webkit-border-radius: 28;
        -moz-border-radius: 28;
        border-radius: 28px;
        text-shadow: 5px 4px 2px #0021fa;
        -webkit-box-shadow: 0px 1px 3px #ffffff;
        -moz-box-shadow: 0px 1px 3px #ffffff;
        box-shadow: 0px 1px 3px #ffffff;
        font-family: Georgia;
        color: #ffffff;
        font-size: 49px;
        padding: 10px 20px 10px 20px;
        text-decoration: none;
      }

      .btn:hover {
        background: #3ca1fa;
        background-image: -webkit-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -moz-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -ms-linear-gradient(top, #3ca1fa, #34d960);
        background-image: -o-linear-gradient(top, #3ca1fa, #34d960);
        background-image: linear-gradient(to bottom, #3ca1fa, #34d960);
        text-decoration: none;
      }
E esto sería todo, espero que vos gustase. Un saúdo ;)

Ola de novo! Hoxe veño esniarvos a facer un calendario e un botón que te leve ao empezo de todo da túa páxina html. Primeiro comezo explicándovos como fixen o Calendario.

-Calendario código html:

Os códigos que vos vou poñer a continuación van crear este calendario que vos deixo aquí:

Para crear este calendario, escríbese na túa páxina de html, onde desexas poñer o calendario, este código:

<div class="month">
<ul>
    <li class="prev">❮</li>
    <li class="next">❯</li>
    <li>
      May<br>
      <span style="font-size:18px">2017</span>
    </li>
</ul>
</div>

<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>

<ul class="days">
<li><span class="active">1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li><span class="active">17</span></li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>

Eu, por exemplo puxen o mes de Mayo porque é o mes que cumplo, pero cada un pode poñer o mes que queira onde está escrito, no código anterior, esto:

    <li>
      May<br>
      <span style="font-size:18px">2017</span>
    </li>

Logo fun añadindo coa opción <li> os días do mes. Para marcar un día en concreto, no codigo anterior ves o día 1 e o día 17 cun código, o cal podes usar para calquer día que desexes marcar:

<li><span class="active">1</span></li>

Despois de ter escrito o teu calendario, agora toca ir ao CSS escribir o código e darlle forma ao teu calendario coa fonte ou color que desexes. O código do CSS é o seguinte:

      ul {list-style-type: none;}
        body {font-family: Verdana, sans-serif;}

        .month {
            padding: 70px 25px;
            width: 96.25%;
            background: #1abc9c;
        }

        .month ul {
            margin: 0;
            padding: 0;
        }

        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .month .prev {
            float: left;
            padding-top: 10px;
        }

        .month .next {
            float: right;
            padding-top: 10px;
        }

        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color:#ddd;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            color: #666;
            text-align: center;
        }

        .days {
            padding: 10px 0;
            background: #eee;
            margin: 0;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 13.6%;
            text-align: center;
            margin-bottom: 5px;
            font-size:12px;
            color:#777;
        }

        .days li .active {
            padding: 5px;
            background: #1abc9c;
            color: white !important
        }

Con este código tes o calendario que ensinei antes, pero cada un pode telo da cor ou forma que máis lle guste.

Esto sería todo polo calendario, agora explicareivos como fixen o botón.

-Botón código html:

Con este botón que vos ensinarei, facedes que ao clicar nel volva ao empezo da páxina. O botón e este que aparece cada vez que baixades:

Antes de facer o botón tedes que ter unha páxina de script.js onde teñades as funcións de cada un dos elementos que poñades na vosa páxina. Tamén, tedes que recordar en ligar a páxina de script.js a todas as vosas páxinas html onde queirades que se fagan esas funcións.
Entón, unha vez ligadas as páxinas ás que desexas ter este botón, pois nesas páxinas html escribes este código:

<button onclick="topFunction()" id="myBtn" title="Go to top">Arriba</button>

Onde teño escrito "Arriba" podédesllo cambiar por calquera outra cousa.
Logo de ter este código posto nas túas páxinas, tes que ir ao CSS, escribir este código e poñelo ao teu gusto:

    #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: Black;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #myBtn:hover {
            background-color: #555;
        }

Este código está posto coa forma e cor do meu botón, pero podedes cambiar todo.
E por último, tendes que ir ao script.js e escribir este código:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
}
Con esto o voso botón xa funcionaria.

ESTO É TODO! Espero que vos servira de gran axuda, un saúdo ;)

Informática Lucía

sábado, 1 de abril de 2017

Proxecto final

Tutorial: Calendario e botón en Atom.

-Calendario código html:

-Botón código html:

Hoy

Resaltación de cores

Buscar

Archivo del blog

Visitas