jueves, 3 de febrero de 2022

Solución bootstrap 7

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 7</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 1em;">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Ganadores</a></li>
  <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protagonistas
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Judas Priest</a></li>
          <li><a href="#">Iron Maiden</a></li>
          <li><a href="#">Black Sabbath</a></li>
  <li><a href="#">Ozzy Osbourne</a></li>
        </ul>
      </li>
  <li><a href="#">Ediciones anteriores</a></li>
  <li><a href="#">Galeria</a></li>
  <li><a href="#">Contacto</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-music"></span> Premios de heavy metal</a></li>
    </ul>
</div>
</nav>

<div id="myCarousel" class="carousel slide" style="margin-top:45px;" data-ride="carousel" data-pause="hover" data-interval="2500">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
     <div class="item active">
      <img src="fotos/iron.jpg" alt="Iron Maiden">
    </div>

    <div class="item">
      <img src="fotos/sabbath.png" alt="Black Sabbath">
  <div class="carousel-caption">
        <h1>ROCK FEST BARCELONA!!!</h1>
      </div>
    </div>

    <div class="item">
      <img src="fotos/metallica.jpg" alt="Metallica">
  <div class="carousel-caption">
        <h1>ROCK FEST BARCELONA!!!</h1>
      </div>
    </div>

<div class="item">
      <img src="fotos/kiss.jpg" alt="Kiss">
    </div>
  </div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Inicio</a></li>
      <li><a href="#">Ganadores</a></li>
  <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Protagonistas
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Judas Priest</a></li>
          <li><a href="#">Iron Maiden</a></li>
          <li><a href="#">Black Sabbath</a></li>
  <li><a href="#">Ozzy Osbourne</a></li>
        </ul>
      </li>
  <li><a href="#">Ediciones anteriores</a></li>
  <li><a href="#">Galeria</a></li>
  <li><a href="#">Contacto</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right">
  <li><a href="#"><span class="glyphicon glyphicon-music"></span> Premios de heavy metal</a></li>
    </ul>
</div>
</nav>

</div>
</body>
</html>
No hay comentarios:

Solución Bootstrap 8

Nuevoindex.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Cursos de programación!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno cliente</h2>
<div class="row">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<h2 class="well" style="background-color:#BAB5B4;">Lenguajes en el entorno servidor</h2>
<div class="row">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>

<ul class="pager">
  <li class="previous"><a href="index1.html">Previous</a></li>
  <li class="next"><a href="index2.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index1.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno cliente!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="html.png" class="img-rounded" alt="html5" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="css.png" class="img-rounded" alt="css" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="javascript.png" class="img-rounded" alt="javascript" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es HTML?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
CSS</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS... También permite aplicar estilos no visuales, como las hojas de estilo auditivas.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Javascript</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3​ basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4​ aunque existe una forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="index2.html">Previous</a></li>
  <li class="next"><a href="nuevoindex.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>


Index2.html

<!DOCTYPE html>

<html lang="es">

<head>
  <title>Bootstrap 8</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body class="text-center" style="background-color:#BAB5B4;">
    <div class="container">
<div class="well" style="margin-top:10px;">
<h1>Lenguajes en el entorno servidor!</h1>
<p>Aprende con nosotros los lenguajes de programación web más modernos del mercado</p>
</div>

<div class="row text-center">
    <div class="col-sm-4">
<img src="wordpress.png" class="img-rounded" alt="wordpress" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="php.png" class="img-rounded" alt="php" width="200" height="200">
</div>
<div class="col-sm-4">
<img src="java.png" class="img-rounded" alt="java" width="200" height="200">
</div>
</div>
<br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
¿Qué es Wordpress?</a>
  </h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">Aunque esté aquí incluido Wordpress no es un lenguaje, pero sí que necesita de un servidor para funcionar. WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de página web. Originalmente alcanzó una gran popularidad en la creación de blogs, para convertirse con el tiempo en una de las principales herramientas para la creación de páginas web comerciales. Está desarrollado en el lenguaje PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y es software libre.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
¿Es útil PHP con MySQL?</a>
  </h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">Muy útil. PHP es un lenguaje de programación de propósito general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en un documento HTML en lugar, de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera el HTML resultante. <br><br>MySQL es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual: Licencia pública general/Licencia comercial por Oracle Corporation y está considerada como la base datos de código abierto más popular del mundo,1​2​ y una de las más populares en general junto a Oracle y Microsoft SQL Server, sobre todo para entornos de desarrollo web.</div>
</div>
  </div>
  <div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Y ¿Java?</a>
  </h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">Java es un lenguaje de programación de propósito general, concurrente, orientado a objetos, que fue diseñado específicamente para tener tan pocas dependencias de implementación como fuera posible. Su intención es permitir que los desarrolladores de aplicaciones escriban el programa una vez y lo ejecuten en cualquier dispositivo (conocido en inglés como WORA, o "write once, run anywhere"), lo que quiere decir que el código que es ejecutado en una plataforma no tiene que ser recompilado para correr en otra. Java es, a partir de 2012, uno de los lenguajes de programación más populares en uso, particularmente para aplicaciones de cliente-servidor de web, con unos diez millones de usuarios reportados.</div>
</div>
  </div>
</div>
<ul class="pager">
  <li class="previous"><a href="nuevoindex.html">Previous</a></li>
  <li class="next"><a href="index1.html">Next</a></li>
</ul>
      <hr>
      <footer class="text-left"> 
  <p class="pull-right">&copy; Prin Enterprise.<br>&copy; Todos los derechos reservados.</p>
  <address>
<strong>Diseñado por Colores S.A.</strong><br>
Carrer de la Jota, 123<br>
St. Andreu, Barcelona<br>
<abbr title="Teléfono">Tel:</abbr> 944123456
  </address>
      </footer>
    </div>
  </body>
</html>

Solución bootstrap 6

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 6</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 1em;">
<div class="well">
<h1>Inscríbete a la oferta de trabajo</h1>
<p>Rellena los datos que aparecen a continuación.</p>
</div>
<form role="form">
  <div class="form-group">
    <label for="nombre">Nombre</label>
    <input type="text" class="form-control" id="nombre"
           placeholder="Introduce tu nombre">
  </div>
  <div class="form-group">
    <label for="apellido">Apellido</label>
    <input type="text" class="form-control" id="apellido"
           placeholder="Introduce tu apellido">
  </div>
  <div class="radio">
 <strong>Sexo:</strong>
 <label><input type="radio" name="opciones" id="opciones_1" value="opcion_1" checked>
Hombre</label>
 <label><input type="radio" name="opciones" id="opciones_2" value="opcion_2">
Mujer</label>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email"
           placeholder="Introduce tu email">
  </div>
  <div class="form-group">
    <label for="contrasena">Contraseña</label>
    <input type="password" class="form-control" id="contrasena"
           placeholder="Introduce una contraseña">
  </div>
  <div class="form-group">
    <label for="contrasena">Carta de presentación</label>
    <textarea class="form-control" rows="5"></textarea>
  </div>
  <div class="form-group">
    <label for="archivo">Adjuntar un archivo con el currículum</label>
    <input type="file" id="archivo">
    <p class="help-block">Solo es posible adjuntar documentos doc o pdf.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Activa esta opción si quieres que adjuntemos tu currículum a nuestra base de datos
    </label>
  </div>
  <button type="submit" class="btn btn-default">Enviar</button>
</form>


</div>
</body>
</html>
1 comentario:

miércoles, 2 de febrero de 2022

Bootstrap final - curriculum

 






No hay comentarios:

Solución bootstrap4

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 4</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
          <div class="jumbotron mt-3">
            <h1>TravelWorld EDE!</h1>
            <p>Conoce todos los destinos que ofrecemos para que tengas el mejor viaje de tu vida...</p>
          </div>
          <div class="row">
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Marruecos</h2>
              <p>Excelente destino: cercano, caluroso, barato, con una gastronomía única. Disfrute de su estancia en Marrakech, Casablanca o Ifni, lugares de ensueño para disfrutar toda la familia.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Uzbekistán</h2>
              <p>Visita a la ciudad sagrada de Samarcanda, belleza única desde tiempos inmemorables. Lugar de paso de la ruta de la seda. Posibilidad de hacer rutas por la montaña. Vuelos baratos desde Madrid y Barcelona.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Turquía</h2>
              <p>Variedad sin límites. Desde vuelos en globo en Capadocia, hasta paisajes sin límites en el norte, y arquitectura asombrosa en Estambul. Vuelos baratos desde Barcelona.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Perú</h2>
              <p>Viaja hasta Machu Picchu, antiguo poblado andino—incaica construido antes del siglo XV en el promontorio rocoso que une las montañas Machu Picchu y Huayna Picchu.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Japón</h2>
              <p>Es desde hace varias décadas una de las grandes potencias económicas mundiales, y posee barrios exclusivos sobre manga, tecnología, museos y parques enormes para los amantes de la naturaleza.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
              <h2>Kosovo</h2>
              <p>Estado con reconocimiento limitado ubicado en la península balcánica, en el sureste de Europa al que se puede acceder fácilmente desde Macedonia.</p>
              <p><a class="btn btn-default" href="#">Ver detalles &raquo;</a></p>
            </div>
      </div>
      <hr>
      <footer>
<p class="float-right">&copy; EDE Enterprise.<br>&copy; Todos los derechos reservados.</p>
<address class="float-left">
  <strong>Empresa Ángel S.A.</strong><br>
  Avenida San Esteve 123<br>
  Sestao, Bizkaia<br>
  <abbr title="Teléfono">Tel:</abbr> 944123456
</address>
      </footer>
    </div>
  </body>
</html>

Solución bootstrap3

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 3</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="jumbotron mt-3">
  <div class="container text-center">
<h1>Página de mis viajes</h1>     
<p>Quiero mostrar los viajes que he realizado</p>
  </div>
</div>
<div class="container-fluid text-center">
  <div class="row">
<div class="col-3">
  <p><button type="button" class="btn btn-secondary">
            <a href="#">I love to travel</a>
            <span class="fas fa-cloud"></span></button></p>
</div>
<div class="col-3">
  <button type="button" class="btn btn-warning">
<span class="fas fa-search"></span>Busca viajes
  </button>
</div>
<div class="col-3">
  <button type="button" class="btn btn-primary disabled">Contrata viaje</button>
</div>
<div class="col-3">
<div class="btn-group">
  <button type="button" class="btn btn-primary">Patrimonios cercanos</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
  <ul class="dropdown-menu" role="menu">
<li><a href="#">Sagrada Familia</a></li>
<li><a href="#">Obras de Antoni Gaudí</a></li>
<li><a href="#">Monasterio de Poblet</a></li>
<li><a href="#">Conjunto arqueológico de Tarraco</a></li>
  </ul>
</div>
</div>
  </div>
</div><br>
<div class="container-fluid text-center"> 
  <h3>Banderas de los países que he visitado</h3><br> 
  <div class="row">
<div class="col-3">
  <p>Bolivia</p>
  <img src="fotos/bolivia.gif" class="rounded" alt="bolivia" width="200px" height="150px">
</div>
<div class="col-3">
  <p>India</p>
  <img src="fotos/india.png" class="rounded" alt="india" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Marruecos</p>
  <img src="fotos/marruecos.jpg" class="rounded" alt="marruecos" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Mongolia</p>
  <img src="fotos/mongolia.png" class="rounded" alt="mongolia" width="200px" height="150px">
</div>
  </div>
</div><br><br>
<div class="container-fluid text-center">   
  <div class="row">
<div class="col-3">
  <p>Kazajstan</p>
  <img src="fotos/kazajstan.png" class="rounded-circle" alt="kazajstan" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Letonia</p>
  <img src="fotos/letonia.png" class="rounded-circle" alt="letonia" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Vaticano</p>
  <img src="fotos/vaticano.png" class="rounded-circle" alt="vaticano" width="200px" height="150px">
</div>
<div class="col-3">
  <p>Singapur</p>
  <img src="fotos/singapur.gif" class="rounded-circle" alt="singapur" width="200px" height="150px">
</div>
  </div>
</div><br>
<footer class="text-center">
<div class="alert alert-success alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Genial!</strong> Has pasado el examen, puedes pasar a la siguiente fase.
</div>
<p>Soy el footer... bien!!!</p>
</footer>
</div>
</body>
</html>

Bootstrap8

Este ejercicios consta de tres archivos html, que son los que se muestran a continuación. Sirven para introducir un elemento muy característico como el acordeón, que puede verse debajo de las fotografías. Esta es la vista normal, pero las imágenes irán en fila de a 1 cuando vemos la página con un móvil. No  habrá menú, si pulsamos izquierda y derecha pasaremos al resto de archivos html.




Bootstrap7

Para realizar este ejercicio hay que revisar las secciones de Navbar y de Carrousel: https://getbootstrap.com/docs/5.1/layout/grid/

Las imágenes deberán pasar solas cada 7 segundos, no tener en los extremos flechas, pero debajo sí las ayudas para ir a una imagen u otra.






Solución bootstrap2

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Soy un jumbotron</h1>
        <p>Soy una caja enorme que está preparada para llamar la atención de la gente que visita nuestra página web.</p>
    </div>
    <div class="row">
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros1.jpg" class="img-thumbnail" alt="Perros">
                <figcaption>
                    <h2 class="h5 font-weight-bold font-italic">Peluquería</h2>
                    <p class="text-small text-muted font-italic">Vaya pelos, necesito ir a la peluquería, ¿me llevas?</p>
                </figcaption>
            </figure>
          </a>
        </div>
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros2.jpg" class="rounded-circle img-thumbnail" alt="Perros">
                <figcaption class="card-img-bottom">
                    <h2 class="h5 font-weight-bold font-italic">Tengo sed</h2>
                    <p class="text-small text-muted font-italic">¿Podrías darme un poco de agua?</p>
                </figcaption>
            </figure>
          </a>
        </div>
        <div class="col-4">
            <a href="#">
            <figure>
                <img src="fotos/perros3.jpg" class="img-thumbnail" alt="Perros">
                <figcaption>
                    <h2 class="h5 font-weight-bold font-italic">Ewok</h2>
                    <p class="text-small text-muted font-italic">Soy un ewok y debería estar en una película de ficción.</p>
                </figcaption>
            </figure>
            </a>
        </div> 
    </div>
    <div class="row">
      <div class="col-3 text-center">
        <a class="btn btn-primary">btn-primary en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-success">btn-success en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-warning">btn-warning en un enlace</a>
      </div>
      <div class="col-3 text-center">
        <a class="btn btn-danger">btn-danger en un enlace</a>
      </div>
    </div>
</div>
</body>
</html>

Solución bootstrap1

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Bootstrap 1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Encabezado 1 de una página en bootstrap</h1>
  <h2 class="card-header">Encabezado número 2 de la página</h2>
  <p>Esta frase está aquí para mostrar el texto normal de un párrafo en bootstrap.</p>
  <small>Yo, sin embargo, estoy en una etiqueta small</small>
  <div class="row">
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  <div class="col-3" style="border:1px solid black;">Si eres nuevo en Bootstrap, puedes empezar con la plantilla HTML básica que se muestra a continuación</div>
  </div>
  <div class="row">
  <div class="col-8" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
  <div class="col-4" style="border:1px solid black;">El framework es gratuito y se puede usar para fines comerciales</div>
  </div>
 
  <mark>Si me quieres destacar, yo soy tu etiqueta (mark)</mark>
  <blockquote class="blockquote text-right">
<p>Yo puedo ser interesante, una .blockquote</p>
  </blockquote>
 
  <p>Prueba la etiqueta <code>code</code>, ya veras que bien</p>
  <p>Y si quieres saber las teclas rápidas son estas: <kbd>ctrl+f</kbd>, <kbd>ctrl+t</kbd> y <kbd>ctrl+s</kbd></p>

  <p class="text-muted pull-right">Soy la clase text-muted aplicada a un párrafo.</p>
  <p class="text-primary">Soy la clase text-primary aplicada a un párrafo.</p>
  <p class="text-success pull-right">Soy la clase text-success aplicada a un párrafo.</p>
  <p class="text-info">Soy la clase text-info aplicada a un párrafo.</p>
  <p class="text-warning pull-right">Soy la clase text-warning aplicada a un párrafo.</p>
  <p class="text-danger">Soy la clase text-danger aplicada a un párrafo.</p>
 
  <p class="bg-primary text-left">Pues yo soy un párrafo con una clase bg-primary</p>
  <p class="bg-success text-center">Pues yo soy un párrafo con una clase bg-success y otra text-center</p>
  <p class="bg-info text-right">Pues yo soy un párrafo con una clase bg-info y otra text-right</p>
  <p class="bg-warning text-center">Pues yo soy un párrafo con una clase bg-warning</p>
  <p class="bg-danger text-right">Pues yo soy un párrafo con una clase bg-danger</p>
 
  <p class="lead">Probando, probando clase lead</p>

  <ul class="list-inline">
    <li class="list-inline-item">Que me dices</li>
    <li class="list-inline-item">Si te digo que soy</li>
    <li class="list-inline-item">una lista "list-inline"?</li>
  </ul>
 
    <table class="table table-striped table-hover table-condensed">
    <thead>
      <tr>
        <th>Encabezado 1</th>
        <th>Encabezado 2</th>
        <th>Encabezado 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Yo soy</td>
        <td>una clase</td>
        <td>table</td>
      </tr>
      <tr>
        <td>Que también</td>
        <td>soy clase</td>
        <td>table-striped</td>
      </tr>
      <tr>
        <td>Y también</td>
        <td>soy clase</td>
        <td>table-hover</td>
      </tr>
  <tr>
        <td>Y también</td>
        <td>soy clase</td>
        <td>table-condensed</td>
      </tr>
  <tr class="table-success">
    <td>Y la fila</td>
        <td>es clase success</td>
        <td>probad info, warning y danger</td>
  </tr>
    </tbody>
  </table>

</div>

</body>
</html>

Bootstrap6


martes, 1 de febrero de 2022

Bootstrap4


En este caso únicamente se pondrán las cajas de 2 en 2 con la tablet y una debajo de la otra cuando estén en tamaño móvil. El footer debajo una cosa de la otra con los móviles.

Bootstrap3

Este ejercicio es igual que el anterior cuando la resolución es la del ordenador. Si vamos reduciendo la ventana del navegador, a la altura de una tableta se pondrán todas las banderas y botones de dos en dos y cuando sea un móvil estarán de una en una.








Bootstrap2

El jumbotron era una opción que había en las anteriores versiones de Bootstrap, no hace falta hacerlo igual.
La idea es que los perros (figure y figcaption con rounded-circle la que está en medio) estén de tres en tres hasta que llegue el tamaño móvil y se pongan uno encima de otro.
Con los botones inferiores (https://getbootstrap.com/docs/5.1/components/buttons/), de 4 en 4, con tablet de 2 en 2 y con móvil uno encima de otro.




Bootstrap 1



lunes, 31 de enero de 2022

Ampliación del examen

 No válido para nota, pero para probar un plugin nuevo en Wordpress, haremos un nuevo ejercicio que es el siguiente:

Debemos crear una base de datos de animales abandonados en MySQL. Después de crear la estructura para contener las mascotas, el lugar donde se encuentran (pueden estar en nuestro local o en una casa de acogida momentáneamente), los datos individuales y comentarios que queramos incluir, tenemos que acceder a dichos datos desde una página de nuestra página web.

La página tendrá un listado con toda la información contenida en la base de datos. Para hacerlo, tenéis que descargaros un plugin que permita la introducción de código en PHP y conectar con la base de datos que habéis creado nueva en MySQL.

No hay comentarios:

viernes, 28 de enero de 2022

Examen parcial

Tiempo: El tiempo disponible para la realización de la prueba es de 12 horas.

Deberá realizarse una página web en WordPress. La página web debe simular un caso real sobre una empresa de adopción de animales, por lo que tiene que contar con un estilo uniforme y claro. Para ello, el alumno creará un logo, y la página seguirá el diseño que marque el logo. La página tendrá mínimo de cuatro páginas/enlaces internos, además de algún plugin o script para cumplir con las peticiones que se indican a continuación.

- Galería de imágenes - 1 punto

- Sección de contacto - 1 punto

- Logos de redes sociales - 1 punto

- Cuatro entradas que hayan pasado el SEO - 2 puntos

- Sección de historia de la empresa - 1 punto

La página debe verse correctamente en otros dispositivos además del ordenador, pero el diseño será libre, por lo que el alumno puede escoger la disposición de su página. Se valorará que el diseño sea innovador, se pueda leer la información correctamente y sea acorde al logo propuesto (1 punto). También deberá estar validada en HTML y CSS (1 punto, para hacerlo dais botón derecho mostrar código fuente, por ejemplo de la página principal y vais a validar el código a ver que os dice. Sobre todo es para aseguraros de que está bien programada la plantilla) y desplegada en un servidor web correctamente, que será el local, pero para demostrar que sabéis instalarlo correctamente (2 puntos).

Para comprobar que se ha realizado el trabajo correctamente deben entregarse capturas con todas las pantallas de las que consta la página y sus validaciones. Para ello habrá que capturar todo ello en un documento en Word y ser enviado al profesor.



2 comentarios:

miércoles, 26 de enero de 2022

Ejercicio Wordpress

Realizar una página en un servidor gratuito sobre un restaurante denominado "Gente" situado en Oviedo. Esta página debe contener como mínimo las siguientes secciones (es aumentable si así se considera más apropiado):

  1. La portada será muy gráfica, mostrando imágenes del lugar para lo cual podremos utilizar imágenes de Internet (preferiblemente libres ya que estamos en un servidor). También debe tener los logos de las redes sociales y el teléfono y dirección en un lugar visible.

  2. Tendrá una sección denominada "Carta" para mostrar todas las opciones de las que dispone el restaurante, dividido en 1) Entrantes, 2) Pescados y carnes y 3) Postres.

  3. Una sección de menús, donde se mostrará el menú del día, el menú degustación 1, el menú degustación 2, el menú grupos 1 y el menú grupos 2.

  4. Una sección de contacto.
7 comentarios:

martes, 25 de enero de 2022

Crear plantilla Wordpress

https://raiolanetworks.es/blog/crear-plantilla-wordpress-desde-0/

https://codex.wordpress.org/es:Template_Hierarchy

https://www.inboundcycle.com/blog-de-inbound-marketing/como-crear-una-plantilla-de-wordpress-desde-cero-parte-1


No hay comentarios:

viernes, 21 de enero de 2022

Moda

Realizar una localhost sobre una zapatería exclusiva de alto standing en Sant Andreu. Esta tienda tendrá como mínimo cinco secciones (es aumentable si así se considera más apropiado):

  1. La portada tiene un blog que mostrará noticias de apariciones de nuestra tienda en la prensa o en eventos de renombre (tres como mínimo). Cada entrada contará con texto original, alguna fotografía y cumpliendo con el SEO de uno de los dos plugins de SEO.

  2. Historia sobre cómo se formó la tienda (cumplir con el SEO).

  3. Mostrará por pantalla en forma de galería algunos de nuestros mejores productos.

  4. Una tienda con algunos de nuestros diseños. Para ello se recomienda la instalación del plugin WooEcommerce (WooCommerce - excelling eCommerce) para que aparezcan varios de nuestros zapatos.

  5. Sección de contacto de nuestra tienda de Sant Andreu.
No hay comentarios:

Examen final

 Insertar_per.php


<!DOCTYPE html>

<html>

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

<?php 

include('barra.php');

?>

<div class="container">

<form action="inserta.php" method="POST">

  <div class="form-group">

    <label for="nombre">Nombre</label>

    <input type="text" class="form-control" id="nombre" name="nombre">

  </div>

  <div class="form-group">

    <label for="apellido1">Apellido1</label>

    <input type="text" class="form-control" id="apellido1" name="apellido1">

  </div>

  <div class="form-group">

    <label for="apellido2">Apellido2</label>

    <input type="text" class="form-control" id="apellido2" name="apellido2">

  </div>

  <div class="form-group">

    <label for="fechanac">Fecha nacimiento</label>

    <input type="text" class="form-control" id="fechanac" name="fechanac">

  </div>

  <div class="form-group">

    <label for="localidad">Localidad</label>

    <select class="form-control" id="localidad" name="localidad">

    <?php

    $bd = new mysqli("localhost", "root", "", "futbol");

    if ($resultado = $bd->query("SELECT * FROM localidad")) {

        while ($fila = $resultado->fetch_assoc()) {

            $nombre=$fila['nombre'];

            $id=$fila['id'];

            echo "<option value='$id'>$nombre</option>";

        }

    }

    ?>

    </select>

  </div>

  <div class="form-group">

    <label for="peso">Peso</label>

    <input type="text" class="form-control" id="peso" name="peso">

  </div>

  <div class="form-group">

    <label for="altura">Altura</label>

    <input type="text" class="form-control" id="altura" name="altura">

  </div>

  <div class="form-group">

    <label for="posicion">Posición</label>

    <input type="text" class="form-control" id="posicion" name="posicion">

  </div>

  <input type="submit" class="btn btn-primary mb-2" value="Insertar jugador">

</form>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------------

inserta.php


<?php


if(isset($_POST['peso'])) {

    $nombre=$_POST['nombre'];

    $apellido1=$_POST['apellido1'];

    $apellido2=$_POST['apellido2'];

    $fechanac=$_POST['fechanac'];

    $localidad=$_POST['localidad'];

    $peso=$_POST['peso'];

    $altura=$_POST['altura'];

    $posicion=$_POST['posicion'];


    $bd = new mysqli("localhost", "root", "", "futbol");

    $borrar = "INSERT INTO jugador (nombre, apellido1, apellido2, fechaNac, localidad_id, peso, altura, posicion)

    VALUES ('$nombre', '$apellido1', '$apellido2', '$fechanac', '$localidad', '$peso', '$altura', '$posicion')";

} else {

    $nombre=$_POST['nombre'];

    $presidente=$_POST['presidente'];

    $localidad=$_POST['localidad'];

    $bd = new mysqli("localhost", "root", "", "futbol");

    $borrar = "INSERT INTO equipo (nombre, presidente, localidad_id)

    VALUES ('$nombre', '$presidente', '$localidad')";

}


if ($resultado = $bd->query($borrar)) {

        echo "Todo ha ido correctamente";

        echo "<a href='jugador.php'>Volver al index</a>";

    } else {

        echo "Hubo un error en la inserción";

        echo $bd->error;

    }  


-----------------------------------------------------------------------------------------------------

jugador.php


<!DOCTYPE html>

<html>

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

<?php 

include('barra.php');


echo "<div class='container'>";

$bd = new mysqli("localhost", "root", "", "futbol");

echo "<a href='insertar_per.php' class='btn btn-danger'>Insertar jugador</a>";

echo "<table class='table'>";

    echo "<tr>";

        echo "<th>Nombre</th><th>Apellido1</th><th>Apellido2</th><th>Fecha Nac</th><th>Lugar Nac</th><th>Peso</th><th>Altura</th><th>Posición</th><th>Borrar</th>";

    echo "</tr>";

    if ($resultado = $bd->query("SELECT jugador.id, jugador.nombre, jugador.apellido1, jugador.apellido2, jugador.fechaNac, localidad.nombre as localidad, jugador.peso, jugador.altura, jugador.posicion FROM jugador, localidad where jugador.localidad_id=localidad.id")) {

        while ($fila = $resultado->fetch_assoc()) {

            echo "<tr>";

            echo "<td>";

                echo $fila['nombre'];

            echo "</td>";

            echo "<td>";

                echo $fila['apellido1'];

            echo "</td>";

            echo "<td>";

                echo $fila['apellido2'];

            echo "</td>";

            echo "<td>";

                echo $fila['fechaNac'];

            echo "</td>";

            echo "<td>";

                echo $fila['localidad'];

            echo "</td>";

            echo "<td>";

                echo $fila['peso'];

            echo "</td>";

            echo "<td>";

                echo $fila['altura'];

            echo "</td>";

            echo "<td>";

                echo $fila['posicion'];

            echo "</td>";

            echo "<td>";

                $id=$fila['id'];

                echo "<a href='borrar.php?var=$id'>Borrar</a>";

            echo "</td>";

            echo "</tr>";

        }

    }    

echo "</table>";

echo "</div>";

?>


</body>

</html>

-------------------------------------------------------------------------------------------------------

borrar.php


<?php

$id=$_GET['var'];

$bd = new mysqli("localhost", "root", "", "futbol");

$borrar = "DELETE FROM jugador WHERE id=$id";

if ($resultado = $bd->query($borrar)) {

    echo "Todo ha ido correctamente";

    echo "<a href='jugador.php'>Volver</a>";

} else {

    echo "Hubo un error en la inserción";

    echo $bd->error;

}  


?>

----------------------------------------------------------------------------------------------------------------

barra.php


<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">BDFútbol</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="jugador.php">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="insertar_per.php">Insertar jugador</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="insertar_equipo.php">Insertar equipo</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

---------------------------------------------------------------------------------------------------------------

insertar_equipo.php

<!DOCTYPE html>

<html>

<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

<?php 

include('barra.php');

?>

<div class="container">

<form action="inserta.php" method="POST">

  <div class="form-group">

    <label for="nombre">Nombre</label>

    <input type="text" class="form-control" id="nombre" name="nombre">

  </div>

  <div class="form-group">

    <label for="presidente">Presidente</label>

    <input type="text" class="form-control" id="presidente" name="presidente">

  </div>

  <div class="form-group">

    <label for="localidad">Localidad</label>

    <select class="form-control" id="localidad" name="localidad">

    <?php

    $bd = new mysqli("localhost", "root", "", "futbol");

    if ($resultado = $bd->query("SELECT * FROM localidad")) {

        while ($fila = $resultado->fetch_assoc()) {

            $nombre=$fila['nombre'];

            $id=$fila['id'];

            echo "<option value='$id'>$nombre</option>";

        }

    }

    ?>

    </select>

  </div>

  <input type="submit" class="btn btn-primary mb-2" value="Insertar equipo">

</form>

</div>

</body>

</html>

No hay comentarios:
Suscribirse a: Entradas (Atom)