Crea tu web Responsive 1

Web basica HTML

El esqueleto de nuestra web con codigo HTML sera asi:

<!DOCTYPE html>

<html>

<head>

<title>

Mi primera web

</title>

</head>

<body>

<header>

</header>

<nav>

</nav>

<section>

<article>

</article>

</section>
<ASIDE>
</ASIDE>
<footer>
</footer>

</body>

</html>

Pon el codigo anterior en el editor de textos y grabalo como index.html, asi se suele nombrar la pagina principal.

Si ejecutas dicha pagina en un navegador web o desde el menu de Notepad++ le damos a “ejecutar / lanzar en …” podremos ver que el contenido de la web esta en blanco, excepto el titulo que aparecera en la ventana superior o solapa del navegador.

El código es básico, pero tiene todas las etiquetas que forman la estructura de nuestra pagina web, como observais las etiquetas suelen ir emparejadas una abre y otra cierra, con algunas excepciones que ya iremos viendo.

El inicio del documento <!DOCTYPE> es la declaración del documento.

Despues tenemos la etiqueta <html> que abre y cierra toda nuestra web </html>, engloba todo el documento.

En <head> se incluye la parte de declaración no visible de la web en si, donde enlazamos con el documento CSS para dar estilo a la web, ponemos su titulo e incluimos las descripciones y palabras claves, las llamadas “metas”, esta etiqueta se cierra con </head>.

Pasamos ahora a la etiqueta <body> aquí es donde va todo el contenido visible de nuestra web, donde incluiremos textos, imágenes, videos, etc; se cierra con </body>.

Dentro del body o cuerpo de la web tenemos:

·         Header, donde situamos la cabecera de la web, logotipo, titulo principal, etc.

·         Nav, aquí incluiremos la barra de menus o navegación de nuestra web.

·         Section, en esta etiqueta incluiremos los contenidos, dentro de ella usaremos los Article, es la parte principal de la web.

·         Aside, es como la parte complementaria de la web, donde ponemos las redes sociales, publicidad, etc, no es la parte imprescindible de la web.

·         Footer, es el pie de nuestra pagina web, donde se suele poner el contador de visitas o el copyright entre otros.

Una vez vista la base de nuestra web, pasamos a ver y preparar cada etiqueta.

Head

En el head vamos a poner las metas indicando las palabras claves, descripción, lenguaje usado, autor, código para los caracteres y enlace al documento CSS que dara formato a nuestra web, el código del head es:

<html>

<head>

<meta charset="UTF-8">

<meta name="language" content="Spanish">

<meta name="author" content="Jose Ojeda">

<meta name="description" content="mi primera web">

<meta name="keywords" content="web,diseño,html,css">

<link rel="stylesheet" href="css/estilos.css" type="text/css"/>

<title>

Mi primera web

</title>

</head>

Como se ve en el código las metas tienen su nombre y el contenido, en charset hemos puesto utf-8 para que no se vean raros los caracteres con acentos o “ñ”, en link hemos puesto la referencia o enlace al documento CSS que crearemos una vez terminada la estructura.

Header

En el header vamos a introducir el titulo de nuestra web, poniendo en su código lo siguiente:

<header>

<h1>Mi Web</h1>

<p>diseñada por Jose Ojeda</p>

</header>

En el código hemos introducido un titulo h1 y un párrafo, los títulos van numerados en orden de tamaño a h1, h2, h3…

Nav

En la barra de navegación vamos a incluir botones de menu a Inicio, Blog, Nosotros y Contacto, quedando el código asi:

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Nosotros</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

Para esto hemos usado la etiqueta <ul> de listas desordenadas en la que incluimos los ítems mediante <li> y dentro de estos los enlaces mediante la etiqueta <a> apuntando al documento que pongamos en sustitución de “#” que cambiaremos en cuanto lo preparemos mas adelante;  para mostrar el texto que aparecerá en el enlace lo hacemos mediante las palabras incluidas entre <a> y </a>.

Section, Article

En este apartado incluiremos el contenido principal de nuestra web, la sección “section” podrá contener varios artículos “article”, el código base lo formamos de la siguiente forma:

<section>

<article>

<hgroup>

<h2>Titulo del articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

</article>

</section>

Hemos incluido dentro de “Article” la etiqueta “hgroup” donde englobamos los encabezados, en este caso incluimos un encabezado de orden 2, “h2”.

Despues incluimos la etiqueta de párrafo “p” y cada salto de línea con “br”, en el ejemplo incluimos dos párrafos para que se vea bien el contenido.

Aside

Como indicamos al principio, en este apartado se incluirá el contenido secundario de nuestra web, como pueden ser enlaces a otras webs, redes sociales, publicidad, etc.

<aside>

<div id="enlacesexternos">

<h2>Enlaces:</h2>

<ul>

<li><a href="materialpalette.com">Paleta de Colores</a></li>

<li><a href="http://www.ticoticotaa.es">Tutoriales</a></li>

</ul>

</div>

<div id="redessociales">

<h2>Sigueme:</h2>

</div>

</aside>

Como veis en esta ultima parte de código, hemos introducido dentro del “aside” dos “divs” con sus respectivos nombres diferenciadores para poder manejarlos cuando entremos con CSS, un div lo vamos a dedicar a los enlaces externos y el otro a las redes sociales.

Footer

Llegamos ya a la parte final de nuestra web, el pie de pagina, en este caso incluiremos el copyright y quien diseña la plantilla, mediante dos “divs” que diferenciaremos con CSS, el código del footer es:

<footer>

<div id="copyright"><cite>Derechos reservados 2017</cite></div>

<div id="creacion"><cite>Plantilla creada por Jose Ojeda</cite></div>

</footer>

Con el ejemplo que estamos realizando, actualmente nuestra web se ve de la siguiente forma:

El código html completo es el siguiente:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="language" content="Spanish">

<meta name="author" content="Jose Ojeda">

<meta name="description" content="mi primera web">

<meta name="keywords" content="web,diseño,html,css">

<link rel="stylesheet" href="css/estilos" type="text/css"/>

<title>

Mi primera web

</title>

</head>

<body>

<header>

<h1>Mi Web</h1>

<p>diseñada por Jose Ojeda</p>

</header>

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Nosotros</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>

<section>

<article>

<hgroup>

<h2>Titulo del articulo</h2>

</hgroup>

<p>Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

<p>Parrafo2 de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

Parrafo de pruebas para el articulo de nuestra pagina web.<br/>

</p>

</article>

</section>

<aside>

<div id="enlacesexternos">

<h2>Enlaces:</h2>

<ul>

<li><a href="materialpalette.com">Paleta de Colores</a></li>

<li><a href="http://www.ticoticotaa.es">Tutoriales</a></li>

</ul>

</div>

<div id="redessociales">

<h2>Sigueme:</h2>

</div>

</aside>

<footer>

<div id="copyright"><cite>Derechos reservados 2017</cite></div>

<div id="creacion"><cite>Plantilla creada por Jose Ojeda</cite></div>

</footer>

</body>

</html>

Una vez llegado a este punto, podemos proceder a dar formato a nuestra web usando CSS, lo veremos en la proxima entrada. Gracias.

05 Javascript Repeticion Funcion cada cierto tiempo

Para probar este ejemplo pulsemos en nuestro navegador firefox Ctrl+Shift+I con lo que abriremos la consola, donde podremos probar directamente el codigo javascript que explico a continuacion:

function Muestra(){
     alert("Esto se repite cada X segundos");
}
//aqui llamamos a la funcion anterior dandole el intervalo de repeticion
setInterval(Muestra,3000);

La primera parte del codigo es para crear la funcion a la que damos el nombre "Muestra", consiste en lanzar una ventana mostrando el texto que pusimos entre los parentesis del alert.
Despues procedemos a llamar a la funcion dentro de setInterval que indica cada cuanto tiempo se realizara la llamada a dicha funcion, en este caso cada tres segundos.
Este ejemplo, a pesar de ser corto y sencillo muestra como desarrollar una funcion, llamarla y  realizar dicha llamada cada cierto tiempo.

04 Javascript Funciones

Las funciones nos seran utiles para escribir codigo que realice alguna accion sin tener
que escribirlo cada vez que queramos realizar dicha accion, es codigo reutilizable y
llamaremos a dicho codigo cada vez que necesitemos que ejecute la accion requerida.
Ejemplo de llamada a funcion:

<html>
<head><title></title>
</head>
<body>
<script>
function saludo(){
alert(“hola, bienvenido”);
}
saludo();
</script>
</body>
</html>

En este ejemplo se llama a la funcion mediante “saludo()”, y se ejecuta el codigo que hemos
situado dentro de “function saludo()”, lo que hara que se muestre en una ventana emergente
“hola, bienvenido”.
Podemos tambien incluir parametros a las funciones para que realicen un calculo, como podria
ser la suma de 2 numeros, aqui os pongo un ejemplo:

<html>
<head>
<title>Suma de 2 numeros</title>
</head>
<body>
<script>
function suma(num1,num2){
var resultado=num1+num2;
alert(“La suma es igual a “+resultado);
}
var num1=3;
var num2=4;
suma(num1,num2);
</script>
</body>
</html>

Como veis en este ejemplo creamos dos variables, que pasamos como parametros a la funcion suma,
dentro de la funcion se obtiene el resultado y se muestra.
Tambien podemos devolver el valor calculado mediante la funcion return, como podeis ver en este ejemplo:

<html>
<head>
<title>Suma de 2 numeros</title>
</head>
<body>
<script>
function suma(num1,num2){
var resultado=num1+num2;
return resultado;
}
var num1=3;
var num2=4;
var x=suma(num1,num2);
alert(“La suma es igual a “+x);
</script>
</body>
</html>

En este ultimo ejemplo, la funcion se limita a calcular y devolver el resultado, sin mostrarlo, este resultado
lo guardamos en la variable “x” y lo mostramos por pantalla.
Con esto hemos visto lo basico de las funciones para que empecemos a crear codigo mas util y reutilizable.
Espero os sea util, gracias.

03 Javascript Bucles y Condicionales

En este video muestro como se realizan repeticiones y condicionales con Javascript, usando IF, FOR, WHILE, DO WHILE y SWITCH.
Podeis ver el video aqui.

Entre las etiquetas script va el codigo de ejemplo. Os pongo el codigo aqui:

<!doctype html>
<html lang="ES">
<head>
<title>
Condicionales y bucles - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//Condicional IF
var num1=7;
var num2=10;
if(num1<num2){
    alert("Numero 1 es menor que Numero 2");
} else if (num1>num2){
    alert("Numero 1 es mayor que Numero 2");
}
//Switch
switch(num1){
    case 1:
        document.write("La var num1 es 1 en el switch");
        break;
    case 7:
            document.write("La var num1 es 7 en el switch");
        break;
    default:
        break;
}

//repeticion FOR
document.write("<br>Bucle For<br>");
for(i=1;i<=20;i++){
   
    document.write(i+"<br>");
}
//repeticion While
document.write("<br>Bucle While<br>");
var i=0;
while(i<=15){
document.write(i+"<br>");
i++;
}
var i=0;
//repeticion Do While
document.write("<br>Bucle DoWhile<br>");
do{
document.write(i+"<br>");
i++;
} while(i<=5);
</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

02 Javascript Variables y operadores

Introduccion sobre variables y operadores javascript:

Declaramos una variable usando la palabra reservada var, le damos un valor y la imprimimos en el documento web, todo mediante este codigo encerrado entre las etiquetas script (dentro del html):

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Variables
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
<script>
var x=16;
document.write(x);
</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

Si quisieramos imprimir comillas u otros caracteres especiales dentro del documento, tendremos que usar escapes como la "\", por ejemplo: document.write("\"Hola\""); de esta forma imprime "Hola" con las comillas.
Los operadores que podemos manejar son:
Primitivos + - * / %

var x=10+6;//x vale 16
document.write(x);
var x=26%6; //modulo, valor de x es 2 que es el resto

Incremento / decremento

var a=0;
var b=10;
var a =b++;//a vale 10 en este se incrementa despues
var a=++b;//a vale 11 en este se incrementa antes

//igual ocurre en decremento b-- y --b PROBARLO

Asignacion

var a=0;
var b=12;
a=b;//ahora a es 12
a+=b;//equivale a a=a+b
a-=b;//equivale a a=a-b

Comparacion

 //lo veremos con detalle en bucles y condicionales
a==b;  a===b; a!=b; a!==b; a>b; a<b; a>=b; a<=b;

Logicos

(4<2)&&(10<15); // daria False por que no se cumplen las 2 condiciones
&& //operador and, se tienen que cumplir las 2 condiciones
|| operador or, se tienen que cumplir una condicion

Ternario

variable(condicion)?valor1:valor2;
var Mayor(edad<18)?"Es menor":"Es mayor";

Todos los operadores los iremos viendo conforme avancemos con el codigo, ahora nos vale con conocerlos y ver de que disponemos.
Espero os sea util, gracias.

01 Javascript Toma de contacto

En este video se muestra como empezar con Javascript, mostrando mensajes en HTML de manera sencilla.
El codigo se puede realizar con cualquier editor de texto.

El codigo javascript lo insertamos dentro del documento HTML, abriendo y cerrando con la etiqueta "script".
Los comentarios van con // si es una linea o /* */ si son varias lineas, esto nos sirve para insertar texto que no se tendra en cuenta en la ejecucion y nos  puede valer para  indicar que hacemos en el codigo, para facilitar su comprension si se ve tiempo despues o si lo ven otras personas con las que colaboramos para que entiendan el codigo con mayor facilidad.
Lo siguiente que expongo en este primer contacto es como insertar texto dentro del documento HTML, con "document.write("texto");", donde podremos insertar etiquetas HTML, tal y como hacemos insertando un titulo H1.

<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");
</script>

El codigo completo del archivo HTML seria asi:

<!doctype html>
<html lang="ES">
<head>
<title>
Toma de contacto - JavaScript
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
<p>Parrafos</p>
<script>
//comentario de una linea
/*comentario de varias lineas
*/
document.write("Hola, bienvenidos a JavaScript");
document.write("<h1>Mensaje con formato</h1>");
alert("Ventana javascript");</script>
</article>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>

</body>
</html>

Espero os sea util, gracias.

11 CSS PseudoElementos, transformacion y rotacion

En el video se indican algunas propiedades para rotar, transformar y trasladar elementos dentro de la web, asi como algunos pseudoelementos CSS.

El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/pseudoElementos.css">
<title>
PseudoElementos
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>

<div id="primero">
<a href="#">Enlace 1</a>
<p>Break word y Linear gradient. Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<a href="#">Enlace 2</a>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>

<div id="segundo">
<p>Normal word y Radial gradient. Parrafo 1 dkfjkasdjflkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
p::first-letter{
    font-size:42px;
    color:blue;
}
#primero{

    background-color:gray;
    word-wrap:break-word;
    background:-moz-linear-gradient(red,black);
   
}
#segundo{

    background-color:pink;
    word-wrap:normal;
    background:-moz-radial-gradient(green,pink,blue);
    border:20px solid rgba(0,0,0,0.3);
    -moz-background-clip:padding-box;
}
div{
    width:200px;
    height:200px;
}
div:hover{
    width:400px;
    transform:skew(30deg);
    transform:rotate(10deg);
    transform-origin:25% 75%;
    transform:translate(100px 50px);
}

Espero os sea util. Gracias.