Publicado el Deja un comentario

14 Html CSS. Formato al aside y al footer

Continuando con el formato a nuestra web, en este video damos formato al lateral y al pie de pagina (aside y footer).

Este es el codigo que agregamos a la hoja de estilos CSS:

aside{
width:20%;
margin-left:15px;
margin-top:25px;
padding:10px;
border:1px solid #ccc;
float:left;
background:#E6E6E6;
color:#000000;
border-radius:25px;
font-size:1em;
}
aside a{
text-decoration:none;
}
aside a:hover{
color:#000000;
}
aside ul{
list-style-type:none;
}
footer{
width:95%;
clear:both;
margin-left:15px;
margin-top:25px;
padding:10px;
border:1px solid #ccc;
background:#FF5733;
color:#FFFFFF;
font-size:0.5em;
border-radius:25px;
}

Please follow and like us:
Publicado el Deja un comentario

05 Html Css. Parte secundaria aside

Creamos la parte secundaria de nuestra #web, donde normalmente se colocan los enlaces a redes, anuncios, etc.



Y asi queda el codigo que llevamos realizado hasta ahora:

<!DOCTYPE html><html><head><title>Web principal</title><meta charset=”utf-8″></head><body><!–Cabecera–><header><h1>Cabecera de mi web</h1><figure><img src=”milogo.jpg”/></figure></header> <!–Barra navegacion–><nav><ul><li><a href=”index.html”>Inicio</a></li><li><a href=”contacto.html”>Contacto</a></li><li><a href=”acercade.html”>Acerca de</a></li></ul></nav><!–Contenido principal–><section><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum  felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum  semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,  consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,  feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.  Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.  Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,  hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero  venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.  Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum  felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum  semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,  consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,  feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.  Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.  Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,  hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero  venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.  Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum  felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum  semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,  consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,  feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.  Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.  Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar,  hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero  venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.  Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article></section><!–Complemento lateral–><aside><h3>Siguenos en: </h3><ul><li><a href=”#”>Facebook</a></li><li><a href=”#”>Twitter</a></li></ul></aside><!–Pie de pagina–><footer><p>Jose Ojeda 2019&copy</p><p>email: nombre@email.com</p></footer></body></html>

Please follow and like us:
Publicado el Deja un comentario

02 Curriculum Vitae. Adaptado a movil y cambio tipo letra

Mediante unas pequeñas modificaciones conseguimos que nuestra web se adapte a dispositivos moviles.
Vemos tambien como añadir tipos de fuentes desde google fonts.


HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”description” content=”Curriculum Vitae”>
<meta name=”keywords” content=”curriculum,jose ojeda,html,css”>
<meta name=”author” content=”Jose Ojeda”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”css/estilo.css” rel=”stylesheet” type=”text/css”>
<link href=”https://fonts.googleapis.com/css?family=Risque” rel=”stylesheet”>
<title>
Curriculum Vitae
</title>
</head>
<body>
<div id=”contenido”>

<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p><br/>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<section>

<article><div id=”formacion”>
<h3>Formacion</h3>
<dl>
<dt>
Diplomado en Ciencias Empresariales</dt>
<dd>Universidad de Sevilla</dd>
</dl>
<dl>
<dt>
Tecnico Superior en Prevencion de Riesgos Laborales</dt>
<dd>Seguridad, Ergonomia e Higiene Industrial</dd>
</dl>
</div>
<div id=”imagen”>
<img src=”img/jose.jpg”>
</div>
</article>
<article>
<h3>Experiencia Profesional</h3>
<dl>
<dt>
Contable – Administrativo</dt>
<dd>2000 – Actualidad</dd>
</dl>
<dl>
<dt>
Profesor Contabilidad y Matematicas Financieras</dt>
<dd>2002 – 2003</dd>
</dl>
<dl>
<dt>
Administrativo</dt>
<dd>1998 – 2000</dd>
</dl>
</article>
<article>
<h3>Otros</h3>
<dl>
<dt>
Docencia</dt>
<dd>Formador de formadores</dd>
</dl>
<dl>
<dt>
Programacion</dt>
<dd>Java, JavaScript, Php, Python, Android, Html, Css</dd>
</dl>
<dl>
<dt>
Software</dt>
<dd>Contabilidad, Nominas, Facturacion, Office, TPV, Navegadores, Correo</dd>
</dl>
</article>

</section>
<footer>
<address>
Mi direccion <br/>
Mi ciudad
</address>
</footer>

</div>
</body>
</html>

 CSS

 body{
    font-family: ‘Risque’, cursive;
    margin:0;
    width-max:960px;
}
header,footer{
    background-color:#f06292;
    color:white;
    text-align:center;
    padding:5px;  
    margin-right:auto;
    margin-left:auto;
}
h1{
    display:inline-block;
    width:400px;
    font-weight:700;
}
h3{
    font-size:36px;
    font-weight:700;
}
p{
    display:inline-block;
    width:400px;
    font-weight:200;
}
section{
    width:80%;
    margin-right:auto;
    margin-left:auto;
    vertical-align:top;
}
article{
    display:inline-block;
    width:97%;
    font-size:22px;  
    margin-bottom:12px;
    margin-top:36px;  
}
#imagen{
    display:inline-block;
    margin-top:45px;
    margin-left:10px;
    width:18%;
    float:left;
}
#formacion{
    display:inline-block;
    width:80%;
    float:left;
}
/*movil*/
@media screen and (max-width:480px){
    *{
        display:block;
        margin:1px;
      
    }
    h1{
        font-weight:300;
    }
    h3{
        font-weight:200;
    }
    article{
        font-size:1em;
    }
    p{
      
        font-size:1em;
    }
    #imagen{
        display:none;
    }
}

Please follow and like us:
Publicado el Deja un comentario

Crea tu Web Responsive 3

Paleta de colores

Preparemos la
gama de colores que utilizaremos en nuestra web, para ello visitamos la web https://www.materialpalette.com/ y
seleccionamos dos colores, en este caso he seleccionado light blue y deep
orange.
Una vez
seleccionados los dos colores damos al botón de descarga y lo descargamos como
CSS.
Abrimos dicho
archivo seleccionamos su texto y lo copiamos a nuestro CSS, desde aquí iremos
cambiando los colores de los apartados de nuestra web.
Se podría hacer
incluyendo clases en el HTML, pero en nuestro caso lo haremos en los apartados
del fichero CSS.

Cabecera

Vamos a cambiar
el tamaño del texto y titulo de la cabecera, asi como el color (quitamos también
el color para otras visualizaciones), daremos un margen interno (padding) y un
margen superior e inferior, dando como automatico los márgenes laterales, damos
también un borde redondeado, después de esto el CSS para la cabecera queda de
la siguiente forma:
header{
         background: #0288D1; 
         color: #B3E5FC;
         padding:10px;
         margin:10 auto;
         border-radius:10px;
}
header
h1 { 
         font-size:3em;
}
header
p{
         font-size:1.5em;
}

Barra de menus

Para la barra de
navegación o menú vamos a realizar algunos cambios además de poner los colores
de nuestra paleta, cuando se este visualizando en un Ordenador o Tablet serán
botones horizontales, en móvil pasaran a ser verticales, el código CSS seria
asi:
nav{
         background: #03A9F4;  
         color: #212121;                
         width:100%;
         text-align:center;
         border-radius:10px;
}
nav ul{
         padding:5px;
         margin:5px;
         }
nav ul
li{
         list-style:none;
         display:inline-block;
         width:100%;
         cursor:pointer;
         font-weight:bold;
         border-bottom:2px solid #BDBDBD;
         border-radius:10px;
}
nav ul
li a{
         text-decoration:none;
}
nav ul
a:hover{
         color:#B3E5FC;
         background:#FF5722;
         border-bottom:2px solid #03A9F4;
}
Este código lo
incluimos en la parte global del CSS, lo que queramos cambiar para según que
medidas de visualización lo iremos incluyendo en los apartados con los minimos
de ancho, especificando solo lo que queramos cambiar.
En el código
anterior hemos añadido margen interior y exterior para las listas que estén
dentro del nav “nav ul”.
Despues para los
ítems incluidos en lista y nav, les quitamos el estilo de lista (list-style),
le ponemos un ancho del 100% para que ocupe cada uno el total (disminuir para ver
como queda), ponemos el cursor para que cambie al pasar por el enlace, añadimos
letra negrita y un borde inferior.
A los enlaces le
quitamos el subrayado, añadimos color de letra y fondo.
Con “a:hover”
indicamos el formato que tendrá cuando pongamos el cursor del raton encima, en
este caso intercambiamos colores y eliminamos parte del subrayado del borde.

Contenido

Con el contenido
vamos a incluir margen de 10 px,  padding
de 10 px, borde redondeado, cambiamos los colores y eliminamos los colores según
visualización, el apartado “section” lo dejamos en blanco por si nos hace falta
mas adelante.
Cambiamos también
el color para los “h2” que están dentro de “article”.
section{
}
article{
         background: #03A9F4;  
         color: #212121;
         padding:10px;
         margin:10px;
         border-radius:10px;
}
article
img{
         width:200px;
         height:200px;
         float:left;
}
article
h2{
         color:#B3E5FC;
}
Insertaremos en
el html una imagen dentro del “article”, para ello la imagen la grabaremos en
una carpeta llamada img dentro del espacio de trabajo donde tenemos los
archivos de nuestra web, el código a insertar en el html es:
<figure>
<img
src=”img/logocabecera.jpg” alt=”imagen”>
</figure>
Con este código marcamos
donde ira la imagen y con “alt” el texto que aparecerá si no carga o da error.
En el CSS hemos
añadido un ancho y alto para la imagen, asi como que flote a la izquierda para
que el texto pueda rellenar la parte derecha.

Aside (parte secundaria)

Aquí haremos también
los cambios en márgenes y paddings, también color y forma de presentar los
enlaces y títulos.
aside{
         background: #03A9F4;  
         color:#B3E5FC;
         padding:5px;
         margin:10px;
         border-radius:10px;
}
aside
ul li{
         list-style:none;
         cursor:pointer;
}
aside
ul li a{
         text-decoration:none;
         background: #03A9F4;  
         color: #212121;
}
aside
ul li a:hover{
    color:#B3E5FC;
         background:#FF5722;
}
Cuando ponemos
algo como “aside ul li a {…}” quiere decir que cambiaremos propiedades a los
enlaces que están dentro de una lista desordenada dentro del aside.
Aquí también aparece
“…a:hover” con este cambiamos las propiedades que queramos modificar cuando el
cursor del raton se situe encima.

Footer(pie de pagina)

Hemos llegado a
la parte final de nuestra web, en este caso damos los mismos colores de fondo y
de texto que la cabecera, le ponemos margen y padding de 10 px y un borde
redondeado, ocupara el 98% del ancho.
footer{
         background: #0288D1; 
         color: #B3E5FC;
         padding:10px;
         margin:10 auto;
         border-radius:10px;
         width:98%;
}

Fin del css

Con esto hemos
terminado de diseñar el formato y estructura de nuestra web, os servirá de base
para poder practicar, os aconsejo que cambiéis propiedades y que experimentéis con
las paletas de colores y formas que podeis dar a la web.
Podeis ver como va quedando la web en el siguiente enlace.
Please follow and like us: