Informática Lucía

sábado, 1 de abril de 2017

Proxecto final

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 ;)

Tutorial: Calendario e botón en Atom.

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 ;)

viernes, 24 de febrero de 2017

Á miña páxina web en Atom

Hola! Hoxe enséñovos unhas fotos da miña páxina web feita por MousePad e por Atom. Simplemente con tutoriais de "html" que hai por internet xa che enseñan como crear a túa propia páxina. A miña web consiste en tres páxinas, unha que se chama "Index.html" que é a principal, unha onde conto algo de quen é Guns n'roses, o meu grupo favorito de rock e outro onde deixo unhas frases de AC-DC, que é outro dos meus grupos favoritos.

Páxina Principal:

Nesta páxina o único que fixen foi poñer cousas sobre min e algún enlace que leva ás páxinas seguintes e a este blog. Tamén engadín unha foto que fixen en inkscape, a cal tamén ten un enlace á publicación do blog do meme de Contador.

Páxina de Guns N'Roses:

Esta páxina contén algunha información de quen é este grupo e dous dos seus primeiros discos. Tamén hai un link para volver á páxina principal.

Páxina de AC-DC:

Esta páxina ten unhas frases dunha canción deste grupo. Esas frases cámbianse clicando nun boton que se mostra debaixo delas. Como na anterior foto, tamén hai un link para volver á páxina principal.

Estilo das páxinas:

Aquí é un trozo dos modelos de letra e forma das páxinas. Con esto consigo ter un fondo nas páxinas, a fonte, as cores, o sitio onde quero colocar cada cousa, un taboleiro, un botón, etc.

E na imaxe de abaixo teño o que quero que faga o botón cando se clica, que é cambiar o texto por outro.

Por último, fixen un favicon entrando nesta páxina. Aquí podes diseñalo á túa maneira, gradalo e aplicalo na túa páxina web.

Espero que vos sirva de algo ;)

viernes, 3 de febrero de 2017

Unha das webs que máis me gustan

Unha das webs que máis me gustan é Flooxer. É unha web onde podes encontrar todo tipo de vídeos relacionados co mundo da comedia.
Os colores que usan son o negro e o verde.
Los tipos de tipografía:
GothamLight,Helvetica Neue,Helvetica,Arial,sans-serif.
O contido desta páxina está distribuido dependendo da importancia do mesmo.
-Vídeos: Centrados na páxina.
-Índice: O índice desta páxina está distribuido en bloques dependendo da importancia do contido.
Nesta páxina a proporción imaxe-texto non existe, devido a que as persoas crean estas imaxes con moita variedade e non seguen un patrón fixo.
Os creadores seguen sempre o mismo método para todos os apartados da súa páxina.
O contido é moi fácil de atopar xa que os apartados están moi ben distribuidos.
A estética desta páxina é moi interesante xa que presenta unha gran variedade de cores, pero o que cambiaría, sin duda ningunha, serían os laterais.
Nesta páxina é moi fácil de interactuar xa que está todo moi ben estructurado.
Para navegar por páxinas secundarias, na parte posterior aprecen apartados, nos cales tes todo tipo de vídeos, e no lateral esquerdo.
A páxina integra vídeos comicos, xogos, etc, para todo o público.
Esta páxina, da cal vos deixo aquí unha foto, é fácil de usar e ten unha gran estética e a súa interesante distribución.

Agardo que vos guste tanto coma min ;)

viernes, 16 de diciembre de 2016

Algo sobre min ;)

Hai algo que me gusta moito e a cal non podo vivir sin ela. Esta é a música. Gústanme moitísimos estilos musicales, pero estes días engancheime a dúas cancións de rock as cales teño que amosarvos.

A primeira é "The house of the Rising Sun Mafia" de The Animals.

Outra que me encanta é "Paint It, Black" de The Rolling Stones.

E estas serían as cancións, espero que vos gusten :)

Portada personalizada

Aquí vos deixo unha portada personalizada que fixen coa axuda do programa GIMP. Fixen esta imaxe xuntando outras tres e simplemente, collín a opción da barita máxica e a goma para eliminar as partes da imaxe que non quería.

lunes, 14 de noviembre de 2016

Meme Contador

Aquí vos deixo un meme que fixen en GIMP. Utilicei a barita máxica para eliminar o fondo do correcaminos e o canal alfa para eliminar os bordes. Despois coa escala fíxeno máis pequeno. E así quedou: