Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
jueves, 18 de mayo de 2017
Crea tu Web Responsive Video 06
A traves de la plantilla que tenemos agregaremos el resto de paginas de nuestro sitio y veremos como añadir un formulario de contacto con html a nuestra web y darle formato con CSS.
sábado, 6 de mayo de 2017
Crea tu Web responsive Video 05
Seleccionar y cambiar el tipo de letra de nuestra web con Google fonts.
Crea tu web Responsive Video 04
Cambiaremos el formato de nuestra web, seleccionando el color del sitio; iremos cambiando cada apartado de nuestra web (nav, article, aside, footer).
martes, 2 de mayo de 2017
Crea tu web responsive - Libro Guia
He publicado mi primer libro guia Como crear nuestra web con software libre usando html y css, espero os sea util, gracias.
Podeis adquirirlo en formato:
Podeis adquirirlo en formato:
lunes, 1 de mayo de 2017
Crea tu web Responsive Video 03
En este video vemos como cambiar el tamaño y posicion del contenido o parte principal (article) y la parte lateral o secundaria (aside).
Crea tu web Responsive Video 02
Enlazamos nuestra web con el CSS que detectara el ancho del dispositivo que accede a nuestra web para asi poderla adaptar.
Crea tu web Responsive Video 01
En este video se muestra como crear la estructura de nuestra web con Html mediante el editor de textos Notepad++.
sábado, 29 de abril de 2017
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.
jueves, 27 de abril de 2017
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.
Suscribirse a:
Entradas (Atom)