Categoría: Sin categoría

Animaciones

Página de descarga:

https://daneden.github.io/animate.css/

 <h1>Hola, ¿Qué tal?</h1>
        <input type="button" class="btn btn-success" value="Animar" id="animar">
        <script>
            $('#animar').click(function () {
                
                $('h1').addClass("rubberBand").addClass("animated")
                        .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                        function (e) {
                            //Quitamos las clases al acabar la animación
                            $('h1').removeClass();

                        });
            });
        </script>

Cabecera jquery + jquery ui (cdn)

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Publicar una web

Para publicar una web necesitamos un servidor web. Un sitio que nos proporcione un alojamiento para nuestros archivos. Normalmente son de pago, pero hay sitios que nos dan una opción gratuita. Nosotros crearemos una cuenta aquí:

https://www.alwaysdata.com/en/

Para subir los archivos necesitamos una cuenta ftp. En el caso de always data se crea así:

Con esta cuenta nos iremos a cualquier programa cliente de ftp, por ejemplo filezilla, y configuramos la cuenta ftp:

Una vez hecho esto y conectados a la cuenta sólo tenemos que arrastrar los archivos a la carpeta www del servidor.

Primer ejercicio html


<!DOCTYPE html>
<html>

<head>
<title></title>

<meta charset="UTF-8">
<style>
*{margin:0;}
img {

}
</style>
</head>

<body>

<h1 >Clique en la imagen para ir a la página</h1>

<p>En un <u>lugar</u> de la <strong>mancha</strong> de cuyo <mark>nombre</mark> no <small>quiero</small> <del>acordarme</del> no ha mucho tiempo que vivía un hidalgo
de los de <em>lanza</em> en <em><strong>astillero</strong></em> rocín <ins>flaco</ins> adarga <sup>antigua</sup> y <sub>galgo</sub> corredor.</p>

<a href="http://google.es"><img src="mascota.jpg" alt="perrito mono" width="200"></a>
<a href="http://google.es"><img src="perro2.jpg" alt="perrito mono" width="200"></a>
<a href="http://google.es"><img src="gato.jpg" alt="perrito mono" width="200"></a>

</body>

</html>