CSS. Flex box

 Diseño de cajas usando Flex box

Reto. Clona la siguiente web.

Propongo como reto crear la siguiente #web segun el ejemplo del video 👇

En #youtube he publicado la guia para crearla, para mostrar el progreso lo indicaremos en redes con el Hashtag #asiQuedaMiWeb. Te apuntas?. #josecodetech #crezcamosjuntos #html #css

20 Html, Css. Dando formato al formulario

Vemos en el siguiente video como dar formato a nuestro formulario de contacto, probando diferentes opciones y viendo los cambios con los posibles diseños.

En este enlace podras acceder a todos los codigos del ejemplo que hemos creado.

html <!DOCTYPE html><html lang="es"><head><title>Contacta con nosotros</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="language" content="Spanish"><meta name="author" content="Jose Ojeda (ticoticotaa)"><meta name="keywords" content="programacion,python,html,php,contacto,contactanos"><meta name="description" content="Sitio web de ticoticotaa para contactarnos"><link rel="stylesheet" href="estilos.css"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand" rel="stylesheet"></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>Contactanos</h2></hgroup><form action="#" method="post"><label>Nombre:</label><input name="nombre" type="text" placeholder="Nombre" required/><br/><label>Email:</label><input name="email" type="email" placeholder="ticoticotaa@gmail.com"/><br/><label>Mensaje:</label><textarea name="mensaje" rows="6" cols="50" placeholder="escribe tu mensaje"></textarea><br/><input id="boton" type="reset" value="Borrar"/><input id="boton" type="submit" value="Enviar"/></form></article></section><!--Complemento lateral--><aside><h3>Siguenos en: </h3><ul><li><a href="#" class="enlace">Facebook</a></li><li><a href="#" class="enlace">Twitter</a></li></ul></aside><!--Pie de pagina--><footer><p>Jose Ojeda 2019&copy</p><div id="email"><p>email: nombre@email.com</p></div></footer></body></html>



css *{ margin:0 auto; padding:0px; /*font-family: 'Playfair Display', serif;*/ font-family: 'Quicksand', sans-serif;}header{ background:#FF5733; color:#FFFFFF; font-size:3em; width:95%; padding:10px; margin:5px 5px; display:inline-block; border:solid 1px #ccc; border-radius:25px;}header figure{ float:left;}header h1{ float:right;}nav{ font-size:1em; width:95%; padding:5px; margin:1px 1px; text-align:center;}nav ul{ list-style-type:none;}nav li{ display:inline; text-align:center; margin:0 15px 0 0;}nav li a{ padding:2px 7px 2px 7px; color:#FF5733; background-color:#FFFFFF; border:1px solid #ccc; text-decoration:none;}nav li a:hover{ background:#FF5733; color:#FFFFFF;}section{ width:70%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px;}section h2{ color:#FF5733; font-size:1.5em;}section p{ font-size:1em;}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;}label{ margin-left:10px; margin-right:10px; padding:10px; float:left; width:70px;}input{ display:inline-block; margin-top:20px; margin-right:10px; margin-bottom:10px; padding:10px;}#boton{ display:inline-block; margin-bottom:10px; margin-top:10px;}
#email{ margin-left:65px; font-size:1.5em; color:yellow;}.enlace{ color:green; font-size:1em;}.enlace:hover{ color:blue; font-size:2em;}@media screen and (max-width:480px){ header{ font-size:1em; width:95%; padding:2px; margin:2px 2px; display:inline-block; border:solid 1px #ccc; border-radius:15px; } section p{ font-size:0.8em; color:red;}}

Html + Css Acceso Usuarios

En el siguiente enlace puedes ver como crear una pagina que sirva de plantilla para un acceso de usuarios al sistema, usando HTML y CSS.
Este proyecto avanzara usando PHP y MySql para controlar el acceso.

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada nuestra web index.html una carpeta que llamaremos “css” y dentro de esta carpeta crearemos un archivo llamado “estilos.css”.

En el “head” de index, os recuerdo que ya incluimos la siguiente línea: <link rel="stylesheet" href="css/estilos.css" type="text/css"/>, esta línea enlaza al archivo de estilos que vamos a preparar a continuación.

Para comenzar con el formato de la web, personalmente prefiero primero prepararla para móvil y después para escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name="viewport" content="width=device-width, initial-scale=1">.

En el archivo estilos.css añadimos lo siguiente:

@media screen and (min-width:480px){}

@media screen and (min-width:767px){}

@media screen and (min-width:950px){}

Con lo que podemos poner dentro de las llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al minimo de ancho que especificamos en pixeles (480, 767 y 950).

Ahora vamos a diferenciar las partes de nuestra web añadiendo colores llamativos al CSS para ver claramente las partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos llamativa.

header{

         background:cyan;

}

nav{

         background:yellow;

}

section{

         background:brown;

}

article{

         background:red;

}

aside{

         background:blue;

}

footer{

         background:pink;

}

@media screen and (min-width:480px){

}

@media screen and (min-width:767px){

header{

         background:green;

         }

nav{

         background:cyan;

}

section{

         background:pink;

}

article{

         background:yellow;

}

aside{

         background:red;

}

footer{

         background:brown;

}

}

@media screen and (min-width:950px){      

}

Con el código anterior puesto en el archivo css, una vez grabado, podréis observar, al ejecutar la web index.html en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con esto hemos conseguido que al cambiar el tamaño de la visualización cambien los colores de fondo, ahora vamos a cambiar también la disposición de los bloques según se vean en un dispositivo u otro, para ello cambiamos el código css a:

*{

         margin:0px;

         padding:0px;

}

header,nav,section,article,aside,footer{

         display:block;

}

header{

         background:cyan;

}

nav{

         background:yellow;

}

section{

         background:brown;

}

article{

         background:red;

}

aside{

         background:blue;

}

footer{

         background:pink;

}

@media screen and (min-width:480px){

}

@media screen and (min-width:767px){

header{

         background:green;

         }

nav{

         background:cyan;

}

section{

         background:pink;

         display:inline-block;

         width:74%;

}

article{

         background:yellow;      

}

aside{

         background:red;

         display:inline-block;

         vertical-align:top;

         width:23%;        

}

footer{

         background:brown;

}

}

@media screen and (min-width:950px){      

}

Quedando nuestra web en modo escritorio:

Y en modo móvil:

Os explico las modificaciones en este código, lo primero que cambiamos es:

*{

         margin:0px;

         padding:0px;

}

header,nav,section,article,aside,footer{

         display:block;

}

Con esto indicamos con el “*” (selector universal) que eliminamos todos los márgenes y paddings, el padding es como un margen interior.

Despues separamos todos los identificadores usados con “,” para darles a todos formato para que actúen como bloques y se visualicen uno debajo del otro según el orden que tienen en el html.

Seguidamente, dentro del apartado css para las tablets minimo de ancho 767px, introducimos el siguiente código:

section{

         background:pink;

         display:inline-block;

         width:74%;

}

article{

         background:yellow;      

}

aside{

         background:red;

         display:inline-block;

         vertical-align:top;

         width:23%;

}

Como podeis ver, el primer cambio es que en vez de visualizarse en bloque como indicamos anteriormente, ahora indicamos que se visualicen en línea e indicamos un ancho en porcentaje para que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.

Con esto ya tenemos la web preparada para varios dispositivos, ahora pasaremos a darle un formato mejor.

En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.

Gracias.

06. CSS Tablas

En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.

El codigo html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tablas.css">
<title>
Tablas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<h2>Primera tabla</h2>
<table class="uno">
<caption>Tabla de colores</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Verde</td>
<td>Uno</td>
</tr>
<tr>
<td>Rojo</td>
<td>Dos</td>
</tr>
<tr>
<td>Amarillo</td>
<td>Tres</td>
</tr>
</table>
<h2>Segunda tabla</h2>
<table class="dos">
<caption>Tabla de colores 2</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Rosa</td>
<td>Cuatro</td>
</tr>
<tr>
<td>Azul</td>
<td>Cinco</td>
</tr>
<tr>
<td>Celeste</td>
<td></td>
</tr>
</table>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo css es:

/*Comentario de CSS*/
/*selector universal*/
*{
   
}
table{
    border-collapse:separate;
    border-spacing:5px 4px;
   
}
caption {
    caption-side:top;
}
.uno{
    border:1px solid gray;
    width:50%;
    table-layout:auto;
    text-align:center;
}
.dos{
    border:2px solid blue;
    width:75%;
    table-layout:fixed;
    background-color:gray;
    empty-cells:hide;
}

En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
Espero os sea util, gracias.

Html5 - Video Primera Web

En este video se inicia la web como plantilla con todas las etiquetas que hemos visto hasta ahora, desde "header" a "footer".