martes, 8 de noviembre de 2016

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.

miércoles, 12 de octubre de 2016

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>

martes, 4 de octubre de 2016

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.

domingo, 2 de octubre de 2016

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.

lunes, 26 de septiembre de 2016

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.

domingo, 25 de septiembre de 2016

10 CSS Bordes y Sombras

En el video se indica como dar bordes redondeados y sombras a las cajas mediante CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/bordesSombras.css">
<title>
Bordes y Sombras
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id="primero">
<p>Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p>Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</div>
<div id="segundo">
<p>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*/
*{
   
}
#primero{
    border-radius:20px;
    background-color:orange;
    color:white;
    padding:15px;
    margin:10px;
    box-shadow:-15px -15px 5px 5px yellow;
}
#segundo{
    width:200px;
    height:200px;   
    border-radius:100px;
    background-color:blue;
    color:white;
    padding:30px;
    margin:20px;
    box-shadow:inset 10px 10px 5px yellow,
        inset -10px -10px 5px yellow;
}

Espero os sea util, no olvideis practicar. Gracias.

sábado, 24 de septiembre de 2016

09 CSS Posicionamiento

Vemos en este video como posicionar distintos parrafos de nuestra web, metiendolos en "cajas", como se visualiza el parrafo si la caja donde esta contenido es de menor dimension al contenido en si, tambien vemos como sobreponemos unos encima de otros y los desplazamos a la posicion que deseamos.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/posicionamiento.css">
<title>
Poscionamiento
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    margin-bottom:15px;
    width:100px;
    height:100px;
    color:green;
   
    background-color:gray;
    overflow:auto;
    z-index:2;
    position:relative;
}
#parrafo2{
    width:200px;
    height:100px;
    margin-top:-40px;
    margin-left:50px;
    color:blue;
    background-color:yellow;
    overflow:scroll;
    z-index:1;
    position:relative;
}
#parrafo3{
width:200px;
background-color:gray;
    overflow:visible;
    color:red;
}





Espero os sea util, no dejeis de practicar y probar opciones. Gracias.

jueves, 22 de septiembre de 2016

07. Juego tres en raya, activar boton partida y terminacion

En este video activo el boton de volver a jugar y preparamos el codigo para que el juego este completamente operativo.



El codigo HTML queda asi:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
<p id="mensaje"></p>
<p id="boton" onClick="jugarOtraVez()"></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/juego.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>
El codigo de ejecutar.js queda asi:
var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
var color;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function jugarOtraVez(){
    jugador=1;
    gana=0;
    fin=null;
    casillapte=9;
    Mensaje.style.display="none";
    textoBoton.style.display="none";

    ejecutar();
}
function SeleccionaCelda(x,y,jugador){
   
    tablero[x][y]=jugador; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue",jugador);   
    casillapte--;
    comprobar(x,y,jugador);
}
function tiraJugador2(){
    jugador=2;
    x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    while((tablero[x2][y2]==1) ||( tablero[x2][y2]==2)){
        x2=Math.round(Math.random()*2);
    y2=Math.round(Math.random()*2);
    }
    if(fin){
        mensajeFin();
    }else{
        SeleccionaCelda(x2,y2,jugador);
    }
    jugador=1;
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        //alert("Casilla ocupada");
        mensajeCasilla();
    } else if(fin){
        //alert("Se acabo la partida");
        mensajeFin();
    } else {
        jugador=1;
    SeleccionaCelda(x,y,jugador);
    if(casillapte>0){
        jugador=2;
        tiraJugador2();
    }
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
color="red";   
    IniciarTablero(color);
 
}
ejecutar();
El codigo de tablero.js queda asi:

function IniciarTablero(color){
    for(i=0;i<3;i++){
        for(j=0;j<3;j++){
            tablero [i][j]=0;
            celda=document.getElementById("c"+i+j);
            celda.style.background=color;
            celda.innerHTML="";
        }
    }
}
function PintarCelda(x,y,color,jugador){
    //selecciona celda
    celda=document.getElementById("c"+x+y);
    //ponemos color
    celda.style.background=color;
    if(jugador==1){
        celda.innerHTML="<img src='img/cruz.png'></img>";
    }else {
        celda.innerHTML="<img src='img/circulo.png'></img>";
    }
}
El codigo de juego.js queda asi:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        //alert("Gana el jugador 1");
        mensaje(gana);
        fin=true;
    }else if(gana==2){
        //alert("Gana el jugador 2");
        mensaje(gana);
        fin=true;
    }else if(casillapte==0){
        fin=true;
        gana=0;
        mensaje(gana);
    }
}
function mensaje(gana){
    if(gana!=0){
        textoMensaje="Gana el jugador "+gana;
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
       
    }else{
                textoMensaje="Empate";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
    }
}
function mensajeFin(){
            textoMensaje="Se acabo la partida";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function mensajeCasilla(){
            textoMensaje="Casilla ocupada";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function Pausa(){
    segundos=0;
    tiempo=setInterval(function(){
        while(segundos<2){
            segundos++;
        }
        if(segundos==2){
            Mensaje.style.display="none";
        }
    },2000);
}
El codigo de cronometro.js y estilo.css queda igual que estaba en video anterior.
Con este video acabo el tutorial para crear un juego sencillo de tablero como el Tres en Raya.
Si teneis alguna duda podeis contactar conmigo para aclararla.
Espero os sea util y no olvideis practicar. Gracias.





martes, 20 de septiembre de 2016

06. Juego tres en raya, mensajes

En este video se preparan los mensajes que utilizaremos en el juego.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
<p id="mensaje"></p>
<p id="boton" onClick="jugarOtraVez()"></p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/juego.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>

El codigo CSS es:

*{
    margin:0 auto;
    width:960px;
}
p{
    color:red;
}
body{
    background-color:#FAF8EF;
    color:#776E65;
    font-size:16px;
}
#tiempo{
    padding:5px;
    margin:2px;
    border-radius:2px;
    border-style:solid;
    height:40px;
    width:80px;
    display:block;
}
#minutos{
    padding:5px;
}
#segundos{
    padding:5px;
}
#tablero .row{
    padding:0px;
    width:100%;
}
#tablero .row .celda{
    margin:1px;
    padding:0px;
    height:80px;
    width:80px;
    display:inline-block;
    position:relative;
    border-style:solid;
}
#tablero .row .celda:hover {
    background-color:blue;
}
#tablero .row .celda img {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
#mensaje{
    float:left;
    border-radius:10px;
    border-style:solid;
    display:none;
    width:200px;
    height:60px;
    color:yellow;
    background-color:red;
    font-size:24px;
    text-align:center;
}
#boton{
    clear:both;
    float:left;
    border-radius:10px;
    border-style:solid;
    display:none;
    width:70px;
    height:60px;
    padding:2px;
    color:yellow;
    background-color:red;
    font-size:24px;
    text-align:center;
}
.rojo {
    background-color:red;
}
.amarillo{
    background-color:yellow;
}

El codigo del archivo ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
var casillapte=9;
//jugador
var jugador=1;
var gana=0;
var fin=false;
function SeleccionaCelda(x,y){
    if(jugador==1){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue",jugador);   
    comprobar(x,y,jugador);
    jugador=2;
    } else {
    tablero[x][y]=2; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"pink",jugador);
    comprobar(x,y,jugador);
    jugador=1;   
    }
    if(!fin){
        alert("Turno del jugador "+jugador);
    }
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        //alert("Casilla ocupada");
        mensajeCasilla();
    } else if(fin){
        //alert("Se acabo la partida");
        mensajeFin();
    } else {
    SeleccionaCelda(x,y);
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
    //pulsar casilla al azar
    x=Math.round(Math.random()*2);
    y=Math.round(Math.random()*2);
    SeleccionaCelda(x,y);  
}
ejecutar();

El codigo del archivo juego.js es:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        //alert("Gana el jugador 1");
        mensaje(gana);
        fin=true;
    }else if(gana==2){
        //alert("Gana el jugador 2");
        mensaje(gana);
        fin=true;
    }else if(casillapte==0){
        fin=true;
        gana=0;
        mensaje(gana);
    }
}
function mensaje(gana){
    if(gana!=0){
        textoMensaje="Gana el jugador "+gana;
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
       
    }else{
                textoMensaje="Empate";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        texto="Jugar Otra Vez";
        textoBoton=document.getElementById("boton");
        textoBoton.style.display="block";
        textoBoton.innerHTML=texto;
    }
}
function mensajeFin(){
            textoMensaje="Se acabo la partida";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function mensajeCasilla(){
            textoMensaje="Casilla ocupada";
        Mensaje=document.getElementById("mensaje");
        Mensaje.style.display="block";
        Mensaje.innerHTML=textoMensaje;
        Pausa();
}
function Pausa(){
    segundos=0;
    tiempo=setInterval(function(){
        while(segundos<2){
            segundos++;
        }
        if(segundos==2){
            Mensaje.style.display="none";
        }
    },2000);
}

Espero os sea util, gracias.

domingo, 18 de septiembre de 2016

08 CSS Display

Atributos de la propiedad Display y como ocultar con la propiedad Visibility.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/display.css">
<title>
Display
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo4">Parrafo 4 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsaljkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkfjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
#parrafo1{
    width:150px;
    background-color:blue;
    display:block;
}
#parrafo2{
    width:150px;
    background-color:red;
    display:inline;
}
#parrafo3{
    width:150px;
    height:100px;
    background-color:pink;
        visibility:hidden;
}
#parrafo4{
    width:150px;
    background-color:yellow;
    display:block;
}

Espero os sea util, gracias.

miércoles, 14 de septiembre de 2016

07. CSS Enlaces

Modificamos propiedades de enlaces y puntero de raton mediante CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/enlaces.css">
<title>
Enlaces y cursor
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p>Enlace sin subrayado <a class="sinsubrayado" href="#">Enlace sin</a></p>
<p>Enlace normal <a class="normal" href="#">Enlace normal</a></p>
<p>Enlace normal 2 <a class="normal" href="#">Enlace normal 2</a></p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
.sinsubrayado{
    text-decoration:none;
    border:none;
   
}
.normal{
    cursor:pointer; /*default  pointer*/
}
a:hover{
    color:red;
}
a:visited{
    color:yellow;
}
p:hover{
    color:pink;
}

Espero sea util, gracias.

martes, 13 de septiembre de 2016

05. Juego tres en raya, imagen tiro jugador

Insertamos codigo para dibujar imagen dependiendo del jugador que actua.
Como se ve en el video hay que tener cuidado al poner la ruta a la carpeta donde estan las imagenes.



El archivo tablero.js queda de la siguiente forma:

function IniciarTablero(){
    for(i=0;i<2;i++){
        for(j=0;j<2;j++){
            tablero [i][j]=0;
        }
    }
}
function PintarCelda(x,y,color,jugador){
    //selecciona celda
    celda=document.getElementById("c"+x+y);
    //ponemos color
    celda.style.background=color;
    if(jugador==1){
        celda.innerHTML="<img src='img/cruz.png'></img>";
    }else {
        celda.innerHTML="<img src='img/circulo.png'></img>";
    }
}

El archivo ejecutar.js queda asi:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
//jugador
var jugador=1;
var gana=0;
var fin=false;
function SeleccionaCelda(x,y){
    if(jugador==1){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue",jugador);   
    comprobar(x,y,jugador);
    jugador=2;
    } else {
    tablero[x][y]=2; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"pink",jugador);
    comprobar(x,y,jugador);
    jugador=1;   
    }
    if(!fin){
        alert("Turno del jugador "+jugador);
    }
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        alert("Casilla ocupada");
    } else if(fin){
        alert("Se acabo la partida");
    } else {
    SeleccionaCelda(x,y);
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
    //pulsar casilla al azar
    x=Math.round(Math.random()*2);
    y=Math.round(Math.random()*2);
    SeleccionaCelda(x,y);  
}
ejecutar();
Espero sea util, gracias.

lunes, 12 de septiembre de 2016

04. Juego tres en raya, reglas del juego

En el video se muestra como crear las reglas basicas para el juego.



El codigo html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/juego.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>

El codigo de ejecutar,js es:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
//jugador
var jugador=1;
var gana=0;
var fin=false;
function SeleccionaCelda(x,y){
    if(jugador==1){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue");   
    comprobar(x,y,jugador);
    jugador=2;
    } else {
    tablero[x][y]=2; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"pink");
    comprobar(x,y,jugador);
    jugador=1;   
    }
    if(!fin){
        alert("Turno del jugador "+jugador);
    }
}
function RevisarCelda(x,y){
    if(tablero[x][y]==1 || tablero[x][y]==2){
        alert("Casilla ocupada");
    } else if(fin){
        alert("Se acabo la partida");
    } else {
    SeleccionaCelda(x,y);
    }
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
    //pulsar casilla al azar
    x=Math.round(Math.random()*2);
    y=Math.round(Math.random()*2);
    SeleccionaCelda(x,y);  
}
ejecutar();

El codigo de juego.js es:

function comprobar(x,y,jugador){
    if(tablero[0][0]==jugador && tablero[0][1]==jugador && tablero[0][2]==jugador){
        gana=jugador;
    }
        if(tablero[1][0]==jugador && tablero[1][1]==jugador && tablero[1][2]==jugador){
        gana=jugador;
    }
        if(tablero[2][0]==jugador && tablero[2][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][0]==jugador && tablero[1][0]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][1]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][2]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][1]==jugador && tablero[1][1]==jugador && tablero[2][2]==jugador){
        gana=jugador;
    }
        if(tablero[0][2]==jugador && tablero[1][1]==jugador && tablero[2][0]==jugador){
        gana=jugador;
    }
    if(gana==1){
        alert("Gana el jugador 1");
        fin=true;
    }else if(gana==2){
        alert("Gana el jugador 2");
        fin=true;
    }
}
En este ultimo codigo es donde se comprueba si se ha logrado el tres en raya.
Espero os sea util, gracias.

domingo, 11 de septiembre de 2016

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.

03. Juego tres en raya, preparar tablero

En este video se indica como preparar el tablero, seleccionar casilla tanto por el usuario como por el sistema al azar.
En el video hay un error que se arregla en el mismo video por lo que no he querido quitarlo para que se vea como buscarlo y solucionarlo, ya que muchos errores que podemos cometer seran por escribir mal alguna variable, tal y como pasa en el video.



El codigo html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/tablero.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>

El codigo de tablero.js es:

function IniciarTablero(){
    for(i=0;i<2;i++){
        for(j=0;j<2;j++){
            tablero [i][j]=0;
        }
    }
}
function PintarCelda(x,y,color){
    //selecciona celda
    celda=document.getElementById("c"+x+y);
    //ponemos color
    celda.style.background=color;
}

//crear funcion pintaimagen

El codigo de ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
//tablero
var tablero=new Array(3);
function SeleccionaCelda(x,y){
    tablero[x][y]=1; //podra ser 2 por otro jugador
    //pintamos la celda
    PintarCelda(x,y,"blue");
}
function RevisarCelda(x,y){
    SeleccionaCelda(x,y);
}
function ejecutar(){
    //array tablero
    for(i=0;i<3;i++){
        tablero[i]=new Array(3);
    }
    LimpiaReloj();
    IniciaReloj();
    //pulsar casilla al azar
    x=Math.round(Math.random()*2);
    y=Math.round(Math.random()*2);
    SeleccionaCelda(x,y);   
}
ejecutar();

Espero os sea util, gracias,


sábado, 10 de septiembre de 2016

05. CSS Listas

En este video se ven algunas propiedades que se pueden modificar de las listas HTML con CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/listas.css">
<title>
Listas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<ol class="listaordenada">
    <li>Blanco</li>
    <li>Rojo</li>
    <li>Verde</li>
</ol>
<ul class="listadesordenada">
    <li>Coche</li>
    <li>Bicicleta</li>
    <li>Patinete</li>
</ul>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
   
}
.listaordenada{
    list-style-type:lower-alpha;
    list-style-position:outside;
}
.listadesordenada{
    list-style-type:square;
    list-style-position:inside;   
    background-color:BLUE;
}

Espero os sea util, gracias.

jueves, 8 de septiembre de 2016

04. CSS Modelo de Cajas

Como preparar el diseño web, introduccion al modelo de cajas.



El archivo html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/modeloCajas.css">
<title>
Modelo Cajas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<div id="principal">
<p>PRINCIPAL  ldkjflajdslkfjladksjflksdjflkjasdkljlkf</p>
</div>
<div id="secundario"><p>SECUNDARIO jdlajfldksjflksjdaflkjdslkjflksdjdflkjdsakljfkl</p></div>
<p>Parrafo jkljkdjfskjfk             primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p>Parrafo segundo kjdkfjkldj                    jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El archivo css es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:gray;
}
p{
    font-family:Helvetica,sans-serif;
    font-size:medium;
    font-style:italic;
    text-transform:lowercase;
    letter-spacing:3px;
    word-spacing:10px;
   
}
div {
    padding:10px;
    border: 5px solid red;
    height:90px;
    width:90px;
    min-height:100px;
    max-width:200px;
}
#secundario {
    background-color:green;
    border-style: outset;
    border-width: 10px;
    border-color: rgb(0,153,23);
    float:right;
   
}
h1{
    font-size:1.25em;
    font-weight:bold;
    color:blue;
    text-shadow:4px 3px 5px red;
}
h2{
    font-size:1em;
    color:white;
    text-decoration:underline;
}

No dejeis de practicar, hasta pronto.

miércoles, 7 de septiembre de 2016

02. Juego tres en raya, cronometro

En este video se explica como poner en marcha el cronometro del juego.



El codigo del archivo cronometro.js es:

function LimpiaReloj(){
    //reset cronometro
    clearInterval(cronometro);
}
function IniciaReloj(){
    //iniciar reloj
    s=document.getElementById("segundos");
    m=document.getElementById("minutos");
    segundos=0;
    cronometro=setInterval(function(){
        segundos++;//incremento segundos
        segs=segundos;
        mins=0;
        while(segs>=60){
            mins++;
            segs-=60;
        }
        //imprimimos min y segs
        if(mins<10)m.innerHTML="0"+mins;
        else m.innerHTML=mins;
        if(segs<10)s.innerHTML="0"+segs;
        else s.innerHTML=segs;
        Total_segs=segs;
        Total_mins=mins;
    },1000);
    }

El codigo del archivo ejecutar.js es:

var Total_segs;
var Total_mins;
var cronometro;
function ejecutar(){
    LimpiaReloj();
    IniciaReloj();
}
ejecutar();

El codigo del archivo index.html es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
<script src="js/cronometro.js"></script>
<script src="js/ejecutar.js"></script>
</body>
</html>

Espero os sea util, gracias.

lunes, 5 de septiembre de 2016

01. Juego tres en raya, creacion HTML - CSS

En estos videos explico como realizar un juego sencillo mediante HTML, CSS y JAVASCRIPT.



El codigo del archivo index.html es:
<head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
El codigo de la hoja CSS, estilos.css es el siguiente:
*{
    margin:0 auto;
    width:960px;
}
p{
    color:red;
}
body{
    background-color:#FAF8EF;
    color:#776E65;
    font-size:16px;
}
#tiempo{
    padding:5px;
    margin:2px;
    border-radius:2px;
    border-style:solid;
    height:40px;
    width:80px;
    display:block;
}
#minutos{
    padding:5px;
}
#segundos{
    padding:5px;
}
#tablero .row{
    padding:0px;
    width:100%;
}
#tablero .row .celda{
    margin:1px;
    padding:0px;
    height:80px;
    width:80px;
    display:inline-block;
    position:relative;
    border-style:solid;
}
#tablero .row .celda:hover {
    background-color:blue;
}
#tablero .row .celda img {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.rojo {
    background-color:red;
}
.amarillo{
    background-color:yellow;
}
Espero os sea util, no olvideis practicar.
Hasta el proximo video, gracias.








domingo, 4 de septiembre de 2016

03. CSS Propiedades Textos

En este video se exponen ejemplos de como dar formato a textos mediante CSS, cambiando color, tamaño y otras propiedades.



El codigo del archivo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/formatoFuentes.css">
<title>
Formato Fuentes
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p class="nowrap">Parrafo nowrap                      primero jdlkf<br>jalkdjslakjflkajdkljflkasdjflkjadlkjflkasj<br>dflkjasdlkjflkajdlkfjldsakjfljlfjladsjlkfjladjlfjl</p>
<p class="inherit">Parrafo segundo  inherit                      jhdlkajdkjfsaaa<br>aaaaaaalkdfjdlajflajdlsjfldjslkfjlasdkjflkjsdljflsdjlfjlsdajfljsdlkfjlksdajflkjsdlj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo del archivo CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:gray;
}
p{
    font-family:Helvetica,sans-serif;
    font-size:medium;
    font-style:italic;
    text-transform:lowercase;
    letter-spacing:3px;
    word-spacing:10px;
   
}
p .nowrap{
    white-space:nowrap;
}
p .inherit{
    white-space:inherit;
}
h1{
    font-size:1.25em;
    font-weight:bold;
    color:blue;
    text-shadow:4px 3px 5px red;
}
h2{
    font-size:1em;
    color:white;
    text-decoration:underline;
}

Espero sea util. No olvideis practicar.

martes, 19 de julio de 2016

02. CSS Divs y Clases

Desde CSS podremos llamar a etiquetas HTML, Divs y Clases, para dar formato a cualquier parte de nuestro documento HTML.


El codigo del archivo divyclases.HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/divyclases.css">
<title>
Pruebas con div y clases
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
<div id="segundodiv">
<p>Este es el segundo parrafo para probar CSS</p>
</div>
<p class="terceraclase">Este es el tercero parrafo para probar CSS</p>
<p>Este es el cuarto parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
El codigo de la hoja de estilos divyclases.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}
p{
    font-size:35px;
    color:green;
}
#segundodiv p{
    color:yellow;
    background-color:green;
}
.terceraclase{
    color:red;
    background-color:yellow;
    font-size:45px;
}
Para cualquier duda podeis contactar conmigo.
En el video uso el editor NOTEPAD++.
Espero os sea util y no olvideis practicar. Gracias.

CSS. Toma de contacto

Video en el que se explica como empezar con CSS, manteniendo el archivo de formato aparte del codigo HTML.


El codigo del archivo tomadecontacto.HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tomadecontacto.css">
<title>
Toma de contacto con CSS
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
El codigo de la hoja de estilos tomadecontacto.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}
Espero os sea util. Gracias.

Html5 - 17. Formulario 2

Volvemos a retomar la etiqueta form de html, en este caso añadimos la etiqueta date, que proporciona un desplegable mostrando el calendario para elegir fecha, en principio le damos un valor que puede modificarse.
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Formulario</title>
</head>
<body>
<header>
<h1>Formulario</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<h1>Mi Formulario</h1>
<form>
<label>Nombre:</label>
<input type="text" placeholder="nombre" required/>
<label>Telefono:</label>
<input type="number" placeholder="954358864"/>
<label>Fecha Nacimiento:</label>
<input type="date" value="2016-07-12"/>
<button type="submit">Guardar</button>
</article>
</form>

</section>

<aside>
<h1>Siguenos en:</h1><ul>
<li><a href="facebook.html">Facebook</a>
</li>
<li><a href="twitter.html">Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href="contacto.html">Contacto</a>
</li>
<li><a href="mapaweb.html">Mapa Web</a></li>
</ul>
</footer>
</body>
</html>
El atributo placeholder hace que aparezca un ejemplo del valor requerido (mas atenuado) para que sirva de guia al usuario de la web.
Tambien aparece la etiqueta label que genera el nombre que aparece como etiqueta del campo a insertar.
Espero sea util, gracias,