Informática Nicolás Toledo.: marzo 2017

Marzo 29 del 2017

Hoy, se cerraron las notas del periodo 1 y este finalizó.

Hoy se realizó el acumulativo, pero solamente para algunos estudiantes.

A continuación, un ejercicio que realicé.

<html>

<head>

<title>Funciones</title>

</head>

<body>

<script>

function saludo(nombre){document.write("Hola " + nombre);}

saludo("Nicolas");

document.write( "<hr/>" );

var suma = function(numero1, numero2){var numero1 = numero1;

var numero2 = numero2;

return numero1 + numero2;}

document.write(suma(623,165));

document.write( "<br>" );

document.write(suma(6159,41));



document.write("<hr/>")

function numeroMaximo(valor1, valor2)

{if ( valor1 > valor2 )

{return valor1;}

else {return valor2;}}



document.write("El numero maximo es: " + numeroMaximo(62,26));

</script>



</body>

</html>

Publicar un comentario

Marzo 22 del 2017

13:00 N 0 comentarios

Hoy se realizó el acumulativo, del cual yo quedé exento.

También se entregó la nota definitiva del periodo 1, saqué 86.

A continuación, un ejercicio que realicé:

Algunas propiedades de display en CSS:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>display</title>

</head>

<style>

pre{display: inline;}

.floating-box {

float: left;

width: 150px;

height: 75px;

margin: 10px;

border: 3px solid #73AD21;

}

.after-box {

clear: left;

border: 3px solid red;

}

</style>

<body>

<pre>Hola</pre>

<pre>como</pre>

<pre>asfsadgsdfsf.</pre>

<pre>adios</pre>

<pre>ok</pre>

<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus vulputate lobortis.</p>

<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.</p>

<div class="floating-box">Caja flotante</div>

<div class="after-box">Otra caja</div>

</body>

</html>

Publicar un comentario

Marzo 15 del 2017

13:07 N 0 comentarios

El día de hoy se hizo la revisión del proyecto, el cual expliqué en la anterior publicación, la solución al ejercicio que le dimos mi grupo y yo fue la siguiente:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Proyecto decimo blog</title>

<script>

function romano(){
var a = document.getElementById("num").value;

if (a == 1) {document.getElementById("hola").innerHTML = "I"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 2) {document.getElementById("hola").innerHTML = "II"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 3) {document.getElementById("hola").innerHTML = "III"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 4) {document.getElementById("hola").innerHTML = "IV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 5) {document.getElementById("hola").innerHTML = "V"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 6) {document.getElementById("hola").innerHTML = "VI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 7) {document.getElementById("hola").innerHTML = "VII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 8) {document.getElementById("hola").innerHTML = "VIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 9) {document.getElementById("hola").innerHTML = "IX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 10) {document.getElementById("hola").innerHTML = "X"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 11) {document.getElementById("hola").innerHTML = "XI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 12) {document.getElementById("hola").innerHTML = "XII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 13) {document.getElementById("hola").innerHTML = "XIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 14) {document.getElementById("hola").innerHTML = "XIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 15) {document.getElementById("hola").innerHTML = "XV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 16) {document.getElementById("hola").innerHTML = "XVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 17) {document.getElementById("hola").innerHTML = "XVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 18) {document.getElementById("hola").innerHTML = "XVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 19) {document.getElementById("hola").innerHTML = "XIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 20) {document.getElementById("hola").innerHTML = "XX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 21) {document.getElementById("hola").innerHTML = "XXI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 22) {document.getElementById("hola").innerHTML = "XXII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 23) {document.getElementById("hola").innerHTML = "XXIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 24) {document.getElementById("hola").innerHTML = "XXIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 25) {document.getElementById("hola").innerHTML = "XXV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 26) {document.getElementById("adios").innerHTML = "XXVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 27) {document.getElementById("adios").innerHTML = "XXVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 28) {document.getElementById("adios").innerHTML = "XXVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 29) {document.getElementById("adios").innerHTML = "XXIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 30) {document.getElementById("adios").innerHTML = "XXX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 31) {document.getElementById("adios").innerHTML = "XXXI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 32) {document.getElementById("adios").innerHTML = "XXXII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 33) {document.getElementById("adios").innerHTML = "XXXIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 34) {document.getElementById("adios").innerHTML = "XXXIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 35) {document.getElementById("adios").innerHTML = "XXXV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 36) {document.getElementById("adios").innerHTML = "XXXVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 37) {document.getElementById("adios").innerHTML = "XXXVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 38) {document.getElementById("adios").innerHTML = "XXXVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 39) {document.getElementById("adios").innerHTML = "XXXIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 40) {document.getElementById("adios").innerHTML = "XL"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 41) {document.getElementById("adios").innerHTML = "XLI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 42) {document.getElementById("adios").innerHTML = "XLII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 43) {document.getElementById("adios").innerHTML = "XLIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 44) {document.getElementById("adios").innerHTML = "XLIV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 45) {document.getElementById("adios").innerHTML = "XLV"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 46) {document.getElementById("adios").innerHTML = "XLVI"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 47) {document.getElementById("adios").innerHTML = "XLVII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 48) {document.getElementById("adios").innerHTML = "XLVIII"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 49) {document.getElementById("adios").innerHTML = "XLIX"; document.getElementById("error").innerHTML = "<hidden>"}
else if (a == 50) {document.getElementById("adios").innerHTML = "L"; document.getElementById("error").innerHTML = "<hidden>"}

else {document.getElementById("error").innerHTML = "<img src='imagen.png' width=670 height=400> <br><H1>(Tampoco números decimales)</H1>";
document.getElementById("hola").innerHTML = "<hidden>"; document.getElementById("adios").innerHTML = "<hidden>"}
}

function validar(e) {

tecla = (document.all) ? e.keyCode : e.which;

if (tecla==13) {javascript:romano();}

}
</script>

</head>
<body>

<div id="hola"></div>



<center>
<label for="numero">Digite un número del 1 al 50</label>
<input type="number" min="1" max="50" id="num" onkeypress="validar(event);">

<input type="button" value="Oprimir" onclick="javascript:romano();">
</center>



<br><br><br><br><br><br><br><br><div id="error" align="center"></div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="adios" align="right"></div>

</body>
</html>


A continuación algunos ejercicios que hice:

El siguiente es utilizando el font, para esto tuve que descargar una fuente de internet:

<!DOCTYPE html>
<html>
<head>
<title>font</title>
</head>

<style>

@font-face {font-family:nuevotipo; src:url(nuevotipo.ttf);}

p.arial{font-family:Arial;}

p.nuevo{font-family:nuevotipo;}

</style>

<body>

<p class="arial">Hola iojas dkasñlgkañls kdmalsñ</p>
<br>
<p class="nuevo">Hola iojas dkaslgkals kdmals</p>

</body>
</html>

Publicar un comentario

Marzo 8 de 2017

16:08 N 0 comentarios

Hoy se dio inicio al proyecto y se dieron las pautas para el mismo.

El proyecto consiste en lo siguiente:

La carpeta en la que debemos guardar el proyecto se debe llamar decimob_grupo03

El template debe tener un módulo llamado derechos.html, este debe tener las fotos de cada uno de los integrantes del grupo, en frente de ellas nombres y apellidos de cada uno, y debajo de los nombres colocar "mi blog", el cual al oprimir debe enviar a la página del blog del estudiante, esto debe ser en _blank , y si no se publicó, un alert donde diga "no publique blog"

Todos los title del template deben tener como nombre:---> proyecto decimo blog

Además se debe colocar una caja de texto que me reciba numeros del 1 al 50 (solo 1 al 50) no debe aceptar letras, no debe aceptar numeros superiores a 50 ni numeros inferiores a 1, mandar mensaje de error si esto ocurre, al momento de oprimir el botón se debe visualizar su correspondiente número ROMANO, si digitó el número 5, entonces debe aparecer V, si los números digitados están entre 1 y 25, debe aparecer dentro del template en la parte superior izquierda, pero si es del 26 al 50, en la parte inferior derecha (dentro del template) no son alerts, hay que utilizar inners.

A continuación, algunos códigos útiles para el proyecto.

Atributos input:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Atributos input</title>
</head>

<body>



<form>

<label for="ema">Ingrese su e-mail</label>
<input type="email" name="email" id="ema" placeholder=" Escriba un e-mail valido" required>
<hr>
Color:<input type="color" required>
<hr>
Contraseña: <input type="password" maxlength="5" required>
<hr>



Pattern: <label for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label>
<input type="text" pattern="^[9|8|7|6]\d{8}$" title="Ej= 712356789" > ->title

<hr>



Title:<input type="text" name="twitter_username" pattern="^@?(\w){1,15}$" title="Este no parece un usuario de twitter válido" required> ->title



<hr>



Required: <input type="text" name="twitter_username"
pattern="^@?(\w){1,15}$"
title="Este no parece un usuario de twitter válido"
required>

<hr>

<input type="submit"></input>

</form>

</body>

</html>

Código validación de contenido:

<HTML>
<HEAD>

</HEAD>

<BODY>

<form name="form">
<input type="text" name="campo"><br>
<input type="button" onClick="validar()" value="validar">
</form>

<script language="javascript">

function validar() {

//var valid1 = /([A-Z0-9\s\\]+)/i; // Te permite ingresar caracteres de la A a la Z, digitos del 0 al 9, espacios y el simbolo \ . Todo esto en mayusculas o minusculas.

var valid1 = /([A-Z0-9\s\\]+)/i;

if (valid1.test(form.campo.value)) {
alert("OK");
}

else {
alert("Caracter incorrecto");
}

}
</script>

</BODY>
</HTML>

Publicar un comentario

Marzo 1 del 2017

16:10 N 0 comentarios

El día de hoy, principalmente se dió la introducción y se explicaron módulos de la nueva web de informática 2017. URL: http://laweb.coldivinoamor.com

También, se continuó hablando sobre las ventanas modales y las popup.

Primero, mostraré un ejemplo de una función en javascript:

<html>

<head>
<script type="text/javascript">

function ver_confirm()
{

var name=confirm("Pulsa un botón")

if (name==true)

{

document.write("Has pulsado el botón Aceptar");

}

else

{

document.write("Has pulsado el botón Cancelar");

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="ver_confirm()"

value="Mostrar una ventana de confirmación">

</form>

</body>

</html>

Esta función, hace que el usuario tenga dos opciones, aceptar o cancelar, y dependiendo de la que se oprima, un document.write mostrará en pantalla cual de las dos se oprimió.

Ahora, un código de ventana modal. (Este no es el único código que se puede utilizar para crear una ventana modal, el código lo puede crear una persona a su gusto, pero para hacerlo se debe tener conocimiento de HTML, CSS y JAVASCRIPT.

<html>
<head>
<title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title>
<script type="text/javascript">
function mostrarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}

function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>

Haz click <a href="javascript:mostrarVentana();">aquí</a>

<div id="miVentana" style="position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;">

<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Título de la ventana</div>

<p style="padding: 5px; text-align: justify; line-height:normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>

<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">

<input id="btnAceptar" onclick="ocultarVentana();" name="btnAceptar" size="20" type="button" value="Cerrar Ventana" />

</div>

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

El anterior código consiste en un div, al cual se le dan un conjunto de atributos necesarios en CSS para crear un contenedor, el cual es la ventana modal, algo importante es el display:none, ya que este hace invisible a la ventana modal, y después se llama con un botón que al oprimirse ejecuta la función para hacer visible al div gracias a ventana.style.display = "block", y hacer que se posicione en el centro de la pantalla; luego, con otra función se cierra la ventana, en realidad no se cierra, sino que se vuelve invisible de nuevo.

A continuación, dos atributos que ofrece el HTML5.

Pattern:

Al poner un regex como valor del atributo pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario. Familiarizarse con las expresiones regulares puede llevar algún tiempo y práctica, puedes empezar con la documentación para regex en javascript ofrecida por mozilla.

Por ejemplo, en España un número de teléfono fijo comienza por 9 o por 8 y un número móvil comienza por 6 o por 7 y en ambos casos le sigue un número de 8 dígitos. Un regex para aceptar números de teléfono de España podría ser:

<label for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label>
<input type="text" pattern="^[9|8|7|6]\d{8}$">

Este regex dice: aceptar sólo un número que comiencen por 9, 8, 6 o 7 seguido de 8 dígitos.

Required:

Tal y como su nombre indica, este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner required o required="required". Por ejemplo:

<input type="text" name="twitter_username"
       pattern="^@?(\w){1,15}$"
       title="Este no parece un usuario de twitter válido"
       required>

Los anteriores atributos fueron tomados de: https://cybmeta.com/validacion-de-formularios-con-html5

Informática Nicolás Toledo.

Marzo 29 del 2017

Publicar un comentario

Marzo 22 del 2017

Publicar un comentario

Marzo 15 del 2017

Publicar un comentario

Marzo 8 de 2017

Publicar un comentario

Marzo 1 del 2017

A continuación, dos atributos que ofrece el HTML5.

Publicar un comentario

Categories

Datos personales

Archivo del blog

Popular Posts

Link list

Categories

Tags