Para todo lo correspondiente a validación, hay casos en los que se necesita usar unas herramientas con capacidades especificas:
CADENAS EN JAVASCRIPT:
(cadena).length Nos devuelve el número de carácteres de una cadena
(cadena).split(separador) Divide una cadena en varias usando un carácter separador
(cadena).substring( inicio, final) Devuelve una subcadena de otra, empezando por inicio y de longitud longitud
(cadena).trim Elimina los espacios iniciales y finales de una cadena
(cadena).indexOf(cadena1) Busca la cadena2 dentro de cadena1 indicándonos la posición en la que se encuentra
(texto).replace(cadena1, cadena2) Reemplaza la cadena1 por la cadena2 en el texto
(cadena).substring(0, final) Devuelve los num caracteres de cadena empezando por la izquierda
(cadena).substring(inicio) Devuelve los num caracteres de cadena empezando por la izquierda
CADENAS EN ASP:
len(cadena) Nos devuelve el número de carácteres de una cadena
split(cadena,separador) Divide una cadena en varias usando un carácter separador
mid(cadena, inicio, longitud) Devuelve una subcadena de otra, empezando por inicio y de longitud longitud
trim(cadena) Elimina los espacios iniciales y finales de una cadena
instr(cadena1, cadena2) Busca la cadena2 dentro de cadena1 indicándonos la posición en la que se encuentra
replace(texto, cadena1, cadena2) Reemplaza la cadena1 por la cadena2 en el texto
left(cadena, num) Devuelve los num caracteres de cadena empezando por la izquierda
right(cadena, num) Devuelve los num caracteres de cadena empezando por la derecha
CADENAS EN PHP:
strlen(cadena) Nos devuelve el número de carácteres de una cadena
explode(separador,cadena) Divide una cadena en varias usando un carácter separador
substr(cadena,inicio,final) Devuelve una subcadena de otra, empezando por inicio y acabando en un final
trim(cadena,caracter) Elimina los espacios iniciales y finales de una cadena
strpos(cadena1, cadena2) Busca la cadena2 dentro de cadena1 indicándonos la posición en la que se encuentra
str_replace(cadena1,cadena2,texto) Reemplaza la cadena1 por la cadena2 en el texto
viernes, 22 de febrero de 2019
Lenguaje de marcas 6
Las tablas son una herramienta basica a la hora de organizar una página web, pero a lo que diseño se refiere es un poco pobre, por lo que ahora usaremos un herramienta llamada div, con la que el diseño pude ser algo mas completo:
- <div class="(nombre del diseño que quieres usar del CSS)"></div> Etiqueta para generarun tabla con caracteristicas especiales
9º Os pondré como sería una organizacion con divs para una página web:
<html>
<head>
<title> Index </title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<!-- cookiealert.css -->
<link rel="stylesheet" href="cookiealert.css">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Anime</a>
</li>
</ul>
</nav>
<div class="row">
<div class="col-xl-12" style="background-color:#FFF" align="center"> <img src="img/kudasai-awards.jpg" class="rounded" alt="publicidad"> </div>
</div>
<div class="row">
<div class="col-xl-2" style="background-color:#FFF" align="center"> Publicidad </div>
<div class="col-xl-8" style="background-color:#98ff6e" align="center">
<br/>
<h1> LOS MEJORES ANIMES </h1>
<br/>
<div id="demo" class="carousel slide" data-ride="carousel" align="center">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/hellsing.jpg" alt="hellsing" class="rounded">
</div>
<div class="carousel-item">
<img src="img/bleach.jpg" alt="bleach" class="rounded">
</div>
<div class="carousel-item">
<img src="img/danganronpa.jpg" alt="danganronpa" class="rounded">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<br/>
<div class="row" style="background-color:#f3ff8a" align="center">
<div class="col-xl-12"> <br/> <h2> CATEGORIAS </h2> <br/> </div>
<div class="col-xl-4"> <img src="img/iconoaccion.jpg" class="rounded" alt="Icono accion"> <br/> Animes de accion <br/> <br/> </div>
<div class="col-xl-4"> <img src="img/iconosuspense.jpg" class="rounded" alt="Icono suspense"> <br/> Animes de suspense <br/> <br/> </div>
<div class="col-xl-4"> <img src="img/iconoaventura.jpg" class="rounded" alt="Icono aventura"> <br/> Animes de aventuras <br/> <br/> </div>
</div>
<div class="row" style="background-color:#63fff8" align="center">
<div class="col-xl-12"> <br/> <h2> GALERIA FOTOS </h2> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/ansatsukyoushitsu.jpg" class="rounded" alt="ansatsukyoushitsu"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/fairytail.jpg" class="rounded" alt="fairytail"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/nanatsunotaizai.jpg" class="rounded" alt="nanatsunotaizai"> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/nogamenolife.jpg" class="rounded" alt="nogamenolife"> <br/> </div>
</div>
<div class="row" align="center">
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/onepunchman.jpg" class="rounded" alt="onepunchman"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/psychopass.jpg" class="rounded" alt="psychopass"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/shingekinokyojin.jpg" class="rounded" alt="shingekinokyojin"> <br/> <br/> </div>
<div class="col-xl-3" style="background-color:#63fff8" align="center"> <img src="img/steinsgate.jpg" class="rounded" alt="steinsgate"> <br/> <br/> </div>
<br/>
</div>
<div class="row" style="background-color:#ff8a8a" align="center">
<div class="col-xl-12"> <br/> <h2> SORTEO </h2> <br/> </div>
<div class="col-xl-6"> <p class="parrafoanime"> Hola mis queridos amigos otakus, aqui os presento un gran evento al que estareis invitados completamente gratis
al primero que califique con un 10 esta web. Como veis en la imagen, es un evento completamente de anime y su mundillo. Hay venta de animes, concursos de cosplay,
exposiciones de figuritas, cine, torneo de juegos de mesa, cantantes de internacionales y TAMBIEN PUEDES GANAR UNA WII MINI. Todo un planazo... </p>
<p class="parrafoanime"> ¿¡ A QUE ESTAIS ESPERANDO !? </p> </div>
<div class="col-xl-6"> <img src="img/sorteoanime.jpg" class="rounded" alt="sorteo"> <br/> <br/> </div>
<br/>
</div>
<div class="container">
<h2> <br/> CONTACTA CON NOSOTROS <br/> <br/> </h2>
<form action="">
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="nombre" class="form-control" id="nombre" placeholder="Introduce nombre" name="nombre">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Introduce email" name="email">
</div>
<div class="form-group">
<label for="telef">Telefono:</label>
<input type="telef" class="form-control" id="telef" placeholder="Introduce telefono" name="telef">
</div>
<div class="form-group">
<label for="comentario">Comentario:</label>
<textarea class="form-control" rows="5" id="comentario" placeholder="Introduce comentario" name="comentario"></textarea>
</div>
</div>
<div class="form-group form-check">
<button type="submit" class="btn btn-primary"> Enviar </button>
</form>
</div>
<div class="container">
<div class="col-xl-6"> <span class="glyphicon glyphicon-envelope"> </span> </div>
<div class="col-xl-6"> <span class="glyphicon glyphicon-earphone"> </span> </div>
</div>
</div>
<div class="col-xl-2" style="background-color:#FFF" align="center"> Publicidad </div>
</div>
<div class="alert alert-dismissible text-center cookiealert" role="alert">
<div class="cookiealert-container">
<b>Te gustan las galletas?</b> 🍪 Utilizamos cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web.
<a href="http://cookiesandyou.com/" target="_blank"> Mas informacion </a>
<button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
Estoy de acuerdo
</button>
</div>
</div>
</body>
<script src="cookiealert-standalone.js"></script>
</html>
Con esto seria el uso de divs combinados con bootstrap para organización y diseño más completos
Lenguaje de marcas 5
Como ya conocemos lo relacionado al CSS, existe un CSS en internet llamado bootstrap que permite tener un muy completo CSS al que con solo cambiarle un par de cosas es posible crear un diseño espectacular:
- <link rel="stylesheet" href="(bootstrap.css utilizado)"> Etiqueta para vincular el CSS con el html
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>Etiquetas para vincular los javascript para el buen funcioamiento con el html
- <imput class="(nombre del diseño que quieres usar del CSS)" /> Etiquta para usar las caracteristicas de un CSS en un campo especifico
jueves, 13 de diciembre de 2018
Comentar página
En el codigo fuente de la página del Colegio Los Naranjos tiene un codigo complejo de html en comparacion al que hemos dado hasta ahora, pero he podido encontar cosas dadas hasta ahora, lo unico que puedo comentar es el uso basico del "html"," head" y "body" como principal en todas las páginas, por otro lado encuentro una gran cantidad de listas no ordenadas, imagenes exportadas, gran cantidad de lincks para acceder a otras páginas del colegio, el uso de "class" para CSS, bastante "script" para validación aunque no he visto un codigo preciso de opciones de validación,.
miércoles, 12 de diciembre de 2018
Lenguaje de marcas 4
Dentro de los formularios esta la validación de los mismos, que se realizara con el uso de javascript:
- <script> </script> Etiqueta para usar procesos de javascript
- function validacion ( ) { Etiqueta para definir que estamos validando
- var (variable)= document.getElementById("(idcampo)").value; Etiqueta para determinar variables
- alert ("(mensaje)"); Etiqueta para mostrar un mensaje por pantalla
- <form action="(URL)" method="post" onSubmit="return validacion()"> Etiqueta para validar
8º Os pondré como sería una validacion de formulario bastante completo para una página web:
<head>
<script> function validacion() { var valido= true; var apellidos= document.getElementById("tApellidos").value; var nombre = document.getElementById("tNombre").value; var dia= document.getElementById("tDia").value; var mes= document.getElementById("tMes").value; var ano= document.getElementById("tAno").value; var email= document.getElementById("tEmail").value; var arroba= email.indexOf("@"); var punto= email.lastIndexOf(".") var medio= punto - arroba; var final= email.length - punto; var contrasena= document.getElementById("tContrasena").value; var contrasena2= document.getElementById("tContrasena2").value; if (apellidos.length <= 5) { alert ("Apellidos debe tener 5 o mas caracteres"); valido = false; } if (nombre.length <= 2) { alert ("Nombre debe tener 2 o mas caracteres"); valido = false; } if (ano < 1900 || ano > 2018) { alert ("El ano no es correcto"); valido = false; } if (mes < 1 || mes > 12) { alert ("El mes no es correcto"); valido = false; } if (dia < 1 || dia > 31) { alert ("El dia no es correcto"); valido = false; } if ((mes == 1 || mes == 3 || mes == 5 || mes == 7 || mes == 8 || mes == 10 || mes == 12) && dia > 31) { alert ("El mes o el dia estan mal puestos"); valido = false; } if ((mes == 4 || mes == 6 || mes == 9 || mes == 11) && dia > 30) { alert ("El mes o el dia estan mal puestos"); valido = false; } if ((ano % 4 == 0) && mes == 2 && dia > 29) { alert ("El mes o el dia estan mal puestos"); valido = false; } if ((ano % 4 != 0) && mes == 2 && dia > 28) { alert ("El mes o el dia estan mal puestos"); valido = false; } if (contrasena.length < 10) { alert("Email no tiene la longitud necesaria"); valido = false; }else{ if (arroba = -1) { alert("Email no tiene @"); valido = false; }else{ if (punto = -1) { alert("Email no tiene un punto en posicion casi final"); valido = false; }else{ if (arroba < 3 || medio < 3 || final < 2) { alert("Email no tiene los caracteres necesarios en cada parte del Email"); valido = false; } } } } if (contrasena.length <= 8) { alert ("Contrasena debe tener 8 o mas caracteres"); valido = false; } if (contrasena2 != contrasena) { alert ("Contrasenas no coinciden"); valido = false; } return valido; } </script>
</head>
<body> <form action="http://www.colegio-losnaranjos.com/" method="post" onSubmit="return validacion()">
Con esto podeis tener una rápida idea de la forma de validar campos de un formulario de una manera facil, aunque hay muchos tipos de validaciones de diferentes tipos de datos
Lenguaje de marcas 3
Unas
de las capacidades del html es poder diseñar la pagina web, pero usamos
una hoja de CSS para tener todos los diseños y caracteristicas del html
en un solo lugar y poderlo usar en varios html:
Esto sería la parte del html principal al que le añadimos el CSS:
- <link rel="stylesheet" type="text/css" href="(.css utilizado)"> Etiqueta para vincular el CSS con el html
- <imput class="(nombre del diseño que quieres usar del CSS)" /> Etiquta para usar las caracteristicas de un CSS en un campo especifico
7º Os pondré como sería un formulario basico con CSS para una página web:
Esto sería la parte del html principal al que le añadimos el CSS:
<html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="css/examen2.css">
</head> <body> <form action="http://www.cfgslosnaranjos.net/" method="post" onSubmit="return validacion()"> <table> <tr> <td> <table width="100%" class="tablafondo"> <tr> <td align="left"> <h1> Mis datos personale </h1> </td> </tr> <tr> <td align="left"><input class="inputlinealarga" name="tNombre" id="tNombre" type="text" placeholder="Nombre" /></td> <tr> <td align="left"><input class="inputlinealarga" name="tEdad" id="tEdad" type="text" placeholder="Edad" /></td> </tr> <tr> <td align="left"><input class="inputlinealarga" name="tEmail" id="tEmail" type="text" placeholder="Email" /></td> </tr> <td align="left"><input class="inputlinealarga" name="tDNI" id="tDNI" type="text" placeholder="DNI" /></td> <tr> <tr> <td align="center"> <input class="inputboton" type="submit" name="Enviar" value="Enviar"/></td> </tr> </table> </td> </tr> </table> </form> </body> </html>
Y esto sería el CSS en el que determinamos el diseño de cada una de las partes del html:
body {
background-color: #CFC;
}
h1 {
color: red;
font-size: 20 px;
text-align: center;
font-family: "Comic Sans MS", cursive
}
.titulo {
color: black;
text-align: center;
font-family:"Arial Black", Gadget, sans-serif;
}
.tablafondo {
text-align: center;
width: 200%;
height: 80%;
border: 0;
margin-left: 70%;
background-color:#FFC;
border-radius: 6px;
}
p {
color: black;
font-size: 20px;
}
.inputlinealarga {
border: none;
border-bottom: 1px solid;
width: 90%;
margin: 6px 2px;
background-color:#FFC;
margin-left: 5%;
}
.inputboton {
background-color: #666;
border: none;
color: white;text-decoration: none;
border-radius: 4px;
width: 20%;
margin: 6px 2px;
margin-left: 70%;
padding: 4px 6px;
}
Todo el diseño se realiza en el CSS y asi podemos usar un CSS para varios html
Lenguaje de marcas 2
Unas de las capacidades del html es poder crear formularios, pero al ser bastante extenso lo explicare por separado con respecto a los puntos anteriores:
- <form> </form> Etiqueta para generar un formulario
- <imput type="" name="" value="" /> Etiqueta para generar un campo donde introducir datos
- type="text | password | checkbox | radio | submit | reset | file | hidden | image | button" Indica el tipo de control que se incluye en el formulario
- name="(nombre)" Indica un nombre al control
- value="(valor inicial)" Indica un valor inicial al control
- maxlength="(nº)" Indica el máximo numero de caracteres al control
- checked="checked" Indica qué opción aparece preseleccionada para los controles checkbox y radiobutton
- <label for=""> </label> Etiqueta para generar una lista desplegable
- <select id"" name=""> </selec> Etiqueta donde introducir las opciones
- <option value="" selected="selected"> </option> Etiqueta de opción predeterminada
- <option value=""> </option> Etiqueta de opción
6º Os pondré como sería un formulario bastante completo para una página web:
<html> <head> <title> Formulario cv </title> </head> <body> <form> <table> <tr> <td> <h1> Rellena tu CV </h1> </td> </tr> <tr> <td> Nombre <br/> <input type="text" name="nombre" value="" maxlength="10"/> </td> </tr> <tr> <td> Apellidos <br/> <input type="text" name="apellidos" value="" size="50" /> </td> </tr> <tr> <td> Contraseña <br/> <input type="password" name="contraseña" value="" maxlength="10"/> </td> </tr> <tr> <td> DNI <br/> <input type="text" name="dni" value="" size="10" maxlength="9" /> </td> </tr> <tr> <td> Sexo <br/> <input type="radio" name="sexo" value="" checked="checked"/> Hombre <br/> <input type="radio" name="sexo" value=""/> Mujer </td> </tr> <tr> <td> <label for="so"> Provincas </label> <br/> <select id="so" name="so"> <option value="" selected="selected">-seleciona-</option> <option value="Madrid"> Madrid </option> <option value="Toledo"> Toledo </option> <option value="valencia"> Valencia </option> <option value="Barcelona"> Barcelona </option> </select> </td> </tr> <td> <label for="so"> Fecha de nacimiento </label> <br/> <input type="text" size="3" maxlength="2" id="fecha_dia" name="fecha_dia"/> de <select id="fecha_mes" name="fecha_mes"> <option value="" selected="selected">-seleciona-</option> <option value="Enero"> Enero </option> <option value="Febrero"> Febrero </option> <option value="Marzo"> Marzo </option> <option value="Abril"> Abril </option> <option value="Mayo"> Mayo </option> <option value="Junio"> Junio </option> <option value="Julio"> Julio </option> <option value="Agosto"> Agosto </option> <option value="Septiembre"> Septiembre </option> <option value="Octubre"> Octubre </option> <option value="Noviembre"> Noviembre </option> <option value="Diciembre"> Diciembre </option> </select> de <input type="text" size="5" maxlength="4" id="fecha_año" name="fecha_año"/> </td> <tr> <td> <br/> Incluir mi foto <input type="text" name="foto_adjunta" value="" maxlength="10"/> <input type="file" name="foto_adjunta" value=""/> </td> </tr> <tr> <td> <br/> <input type="checkbox" name="suscribirme" value="" checked="checked"/> Suscribirme al boletin de novedades </td> </tr> <tr> <td> <br/> <input type="submit" name="guardar_cambios" value="Guardar cambios"/> <input type="submit" name="borrar_los_datos_introducidos" value="Borrar los datos introducidos"/> </td> </tr> <tr> <td> <br/> Descripción del producto <br/> <textarea id="descripcion" name="descripcion" cols="40" rows="5" /> </textarea></td> </tr> </table> </form> </body> </html>
Con esto sería generar un formulario en que que se inserten datos en distintos tipos de campos y creacion de botones con sus respectivas funcionalidades
Suscribirse a:
Entradas (Atom)