Búsqueda personalizada

29 mar 2014

Formularios, tipos de input's y validación con HTML5

Aquí os voy a enseñar algunos de los nuevos input que hay en el HTML5, que aunque a estas alturas ya no es nuevo, todavía hay mucha gente que no los conoce.

La verdad es que estos nuevos campos de formulario ayuda muchísimo a la hora de validar y de dar un toque más profesional a nuestros formularios.

Vamos a ver algunos ejemplos:

Nuevos input HTML5: 


  • <input type="color" />



  • <input type="date" />




  •  <input type="datetime-local" />
  • <input type="email" />


  • <input type="month" />

  • <input type="number" />

  • <input type="range" />

  • <input type="search" />


  • <input type="time" />
  • <input type="url" />

  • <input type="week" />


Validación nativa con HTML5

Aparte de los inputs anteriores, que ya de por sí, sirven para validar (porque no te obliga a utilizar un formato concreto), también contamos con el atributo required, que al ser booleano no tenemos más que poner la palabra dentro del input, para hacer obligatorio que el campo esté relleno al momento de enviar el formulario.
Ejemplo:
  • <input type="text" required />

También podemos usar el placeholder para guiar al usuario a poner lo que queremos que escriba o como lo queremos.
Ejemplo:
  • <input type="email" placeholder="suemail@email.com" />



Y bueno, hasta donde mi memoria llega, quizás alla más, pero estos son quizás los que podemos usar más. ¡Un saludo a todos!




Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

28 mar 2014

Cambiar plantilla de blogger baja las visitas

Hace una semana que cambié la plantilla de mi blog. Y de repente noté una bajada bastante notable de visitas y mis sospechas es que fuera a causa del cambio del template, ya que ya tenía un constante de visitas diarias y de repente me pasó esta bajada, que me preocupó muchisimo, ya que después de mi gran esfuerzo porque esto funcionara se estaba yendo al traste por un template, que de todos los que había visto era el que más me gustaba. Bueno, pensé en volver al template anterior para volver a recuperar mis visitas, pero después de pensarlo una y otra vez, decidí dejarlo unos días más para seguir viendo las estadísticas de las visitas, y ahora por fin se está viendo que se está recuperando y está subiendo de nuevo.



Entonces mi duda es, esta bajada a sido a causa del cambio del template o ha sido por algún otro motivo puntual que no tiene nada que ver.

¿Cambiar la plantilla de blogger baja las visitas? ¿Os ha pasado alguna vez? ¿Que opináis al respecto?



Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

23 mar 2014

Código de los colores para usar en tu web - HTML - CSS

Elige los colores en la paleta y obtendrás tu código más abajo, en RGB o hexadecimal.



Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

¿Cuánto vale mi página web? - Otros




Alguien quiere comprar nuestro blog o nuestra página web y queremos saber cuánto vale nuestra página web, o simplemente estamos aburridos o nos da la curiosidad.

Pues pongo aquí mis datos de lo que vale mi web a día de hoy, que es de 105$, si cuando estés leyendo esto, ese precio ha subido, significa que estamos mejorando, jeje:



Si le das click al precio de mi web te llevará a la página donde te hace el cálculo.

Os invito a que dejeis en los comentarios el precio de vuestra página web y un enlace a esta.

¡Un saludo!

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

Como aumentar pagerank de mi web - Otros




Para empezar... ¿Qué es el pagerank?

El pagerank de una página es como la importancia de dicha página web en Internet. Es una marca comercial de la propiedad de Google. Es un algoritmo complejo que explicado de forma simple mide los enlaces que hay en otras páginas web hacia la tuya propia. De hecho, cuando una página web A pone un enlace en su página hacia una página web B, dicho enlace es un voto a favor de la página web B.

Tener un pagerank alto es casi tan importante como hacer una buena estrategia de SEO.

El pagerank de esta página al día de hoy es de tristemente 0.

Aquí lo podeis ver:

PageRank Google

(Si pinchais en él os llevará a una página donde podeis calcular el vuestro propio)


Pero hasta el día de hoy no me he preocupado de este aspecto. Bueno en realidad casi de ninguno, con este blog solo busco transmitir conocimiento y ayudar en la medida de lo posible a los demas.

Aunque a partir de ahora, cada vez que tenga ratos libres voy a dedicarme a intentar subirlo, ahora que ya conozco como se hace.

Bueno, al tema... ¿Cómo subir el pagerank de mi web?

Básicamente tienes que trabajar para que el enlace de tu web se muestre en el mayor número de páginas posibles, y si dichas páginas tienen un pagerank alto, mejor que mejor.

Podeis intercambiar enlaces con otros blogs. Hablando con los dueños para que lo pongan en un buen sitio de su página. Podéis daros de alta en directorios webs.

Por cierto, se me olvidaba, si tenéis un blog os recomiendo este directorio:


Directorio de Blogs

También os invito a dejar aquí en los comentarios el enlace de vuestras páginas para que todos los conozcamos.

¡Un saludo!

Si te gustó no olvides ayudarme a seguir creciendo compartiendolo en tus redes sociales favoritas. ¡Gracias!

22 mar 2014

¿Quieres participar en este blog? - Otros



¿Quieres participar en este blog y que se te reconozca tus auditorias? ¿Quieres promocionarte como escritor o editor? ¿Quieres dar publicidad a tu propio blog?

Si la respuesta a algunas de estas preguntas es sí, te animo a participar en mi blog sobre alguna temática de informática, diseño web, programación, blogs, apps, android, experiencias personales en este mundillo... cualquier cosa que se te ocurra relacionado con este mundillo.

Sólo tienes que ir a la pestaña Contactos y mandarme un mensaje en el que me digas que quieres participar y sobre el tema que quieres escribir, o bien dejando aquí un comentario y dejandome un email o forma de contacto.


20 mar 2014

Calcular edad con la fecha de nacimiento en php - Ejercicios básicos de PHP

Ahora vamos a calcular la edad de una persona con una fecha dada a través de un formulario en PHP.

Cargar fecha de nacimiento en una variable y calcular la edad.

Código:

<?php

 echo "<h1>Cargar fecha de nacimiento en una variable y calcular la edad.</h1><br /><hr /><br /><br />";

 if(isset($_POST['mes'])){//Comprobamos si está disponible la variable mes
 
  //fecha de nacimiento
  $dia = $_POST['dia'];
  $mes = $_POST['mes']; //almacenamos en variables
  $anio = $_POST['anio'];
  
  //hoy
  $diaAC=date("j");
  $mesAC=date("n");
  $anoAC=date("Y");
  
 
 
  //si el mes es el mismo pero el día inferior aun no ha cumplido años, le quitaremos un año al actual
   
  if (($mes == $mesAC) && ($dia > $diaAC)) {
  $anoAC=($anoAC-1); }
   
  //si el mes es superior al actual tampoco habrá cumplido años, por eso le quitamos un año al actual
   
  if ($mes > $mesAC) {
  $anoAC=($anoAC-1);}
   
  //ya no habría mas condiciones, ahora simplemente restamos los años y mostramos el resultado como su edad
   
  $edad=($anoAC-$anio);
  
  echo "Tiene ".$edad." años";
 }
 
?>
 <form method="post" action="3.php" />
  <input type="number" name="dia" placeholder="dia" required />
  <input type="number" name="mes" placeholder="mes" required />
  <input type="number" name="anio" placeholder="año" required />
  <input type="submit" value="Mostrar" />
 </form>

Cargar en variables mes y año e indicar el número de días del mes - Ejercicios básicos de PHP

Seguimos con nuestros ejercicios PHP.

Cargar en variables mes y año e indicar el número de días del mes

Aqui el código:

<?php

 echo "<h1>Cargar en variables mes y año e indicar el número de días del mes.</h1><br /><hr /><br /><br />";

 if(isset($_POST['mes'])){//Comprobamos si está disponible la variable mes
  $mes = $_POST['mes']; //almacenamos en variables
  $anio = $_POST['anio'];
  
  $dias = cal_days_in_month(CAL_GREGORIAN, $mes, $anio); // 31
  echo "Hubo ".$dias." días en el mes ".$mes." del ".$anio;
 
 }
 
?>
 <form method="post" action="2.php" />
  <select name="mes">
   <option value="1">Enero</option>
   <option value="2">Febrero</option>
   <option value="3">Marzo</option>
   <option value="4">Abril</option>
   <option value="5">Mayo</option>
  </select>
  Año : <input type="text" name="anio" required />
  <input type="submit" value="Mostrar" />
 </form>

Cargar dos números en variables y escribir el mayor de ellos en PHP - Ejercicios básicos PHP

Hoy vamos a empezar a realizar una serie de ejercicios en PHP, iré poniendo los códigos de cada ejercicio con sus respectivos comentarios para irlos explicando.
Estos son ejercicios de aprendizaje típicos de cuando empiezas a aprender PHP en el instituto o en otras formaciones. También sirven para practicar si estás aprendiendo por tu cuenta.

Vayamos al lío.

Cargar dos números en variables y escribir el mayor de ellos en PHP - Ejercicios básicos PHP


Código:


<?php

 echo "<h1>Cargar dos números en variables y escribir el mayor de ellos</h1><br /><hr /><br />";

if(isset($_POST['num1'])){ //comprobamos si en la variable recogida por el formulario contiene algo, 
//no es necesario comprobar los dos numeros
 $numero1=$_POST['num1'];//almacenamos en variables
 $numero2=$_POST['num2'];//almacenamos en variables
 
 if($numero1>$numero2){//comprobamos si numero1 es mayor que numero2
  echo "Entre ".$numero1." y ".$numero2." el número mayor es ".$numero1; 
//mostramos resultado
 }else{ //si no es mayor numero1 que numero2 mostramos el resultado contrario
  echo "Entre ".$numero1." y ".$numero2." el número mayor es ".$numero2;
 }
 
 echo "<br /><br /><hr /><br /><br />Comprobar otra vez: <br />";
//damos la opcion de hacer otra comprobacion
 
}
?>

<html>
 <head></head>
 <style>
 
 </style>
 <body>
  <form action="1.php" method="POST">
   Número 1 = <input type="number" name="num1" required /><!-- required es para obligar a 
que el campo no este vacio antes de enviar el formulario -->
   Número 2 = <input type="number" name="num2" required />
   <input type="submit" value="Calcular" />
  </form>
 </body>
</html>


Nos quedaría algo tal que así:


19 mar 2014

Palabras más buscadas de Google - Otros



¿Quieres saber cuales son las palabras más buscadas de Google?

Aquí puedes ver cuales son las palabras más buscadas de Google para el día de hoy. Podrás mirarlo cada día y hacer un estudio de qué se demanda en la red. ¿Qué buscan los internautas? ¿Qué le interesa a la gente? ¿Qué temas son más interesantes para hablar en tu página web o blog?

Aquí lo puedes ver:

17 mar 2014

Fondos o backgrounds para tu página web - Recomendacion

Encontrar fondos o backgrounds-image para tu página web es relativamente fácil.

Pero, como desarrolladora web que soy, me gusta reconocer el trabajo de otros desarrolladores cuando estos son interesantes y sobre todo útiles.

En esta página podreis encontrar muchos y diferente fondos para descargar gratis, además de que podeis configurar los colores y el tamaño.

Aquí un pantallazo de la página:


Y aquí el enlace:


http://www.patterncooler.com/

Como empezar una página web en HTML5

Breve post en el que voy a comentar como empezar a diseñar un página web desde cero con HTML5.

Para empezar creamos el archivo index.html, el que tendremos el siguiente código escrito:


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<link href="favicon.ico" rel="shortcut icon">
<meta name="description" content="">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
</body>
</html>

Ahora vamos a crear dos carpetas en la raiz que se llamaran img (para guardar las imágenes) y otra css (para los estilos).

En la carpeta css crearemos un archivo llamado style.css, en el cual tendremos escrito:


body {margin:0}
.container {width:980px; margin:0 auto}
h1, h2, h3, h4 {font-weight:normal}
ul, li {margin:0; padding:0; list-style-type:none}
img {border:0}
.clear {clear:both}

Ahora ya podemos comenzar a crear nuestra página web desde cero.

Más adelante iré poniendo aquí los siguientes post que le siguen a éste para seguir diseñando.

¡Un saludo!

13 mar 2014

Recompensa de Jazztel por sus fallos de red - Noticias

jazztel recompensa por fallos


Jazztel estuvo casi todo el día de ayer con problemas en su red móvil y parece que hoy algunos todavía tienen los resquicios de dichos problemas.

Desde la empresa de Jazztel ya han confirmado que recompensarán a todos sus clientes con 5 euros de descuentos en la factura de este mes.

Esta recompensa se hará efectiva de forma automática, sin que los clientes tengan que pedirla de forma expresa.

¿Qué te opinión te merece el tema?

Formulario de contacto con HTML5 y CSS3 (Con ejemplo)

Vamos a ver como hacer fácilmente un formulario de contacto con HTML5 y CSS3, con ejemplos incluidos.

Primero vamos a elaborar el código HTML.


<form action="#" class="contact_form" method="post">
<ul>
<li>
            <h2>
Formulario de contacto</h2>
</li>
<li>
           <label for="name">Nombre:</label>
           <input placeholder="Chey" required="" type="text" />
       </li>
<li>
           <label for="email">Email:</label>
           <input name="email" placeholder="mercedesconde@ymail.com"
            required="" type="email" />
       </li>
<li>
           <label for="website">Sitio Web:</label>
           <input name="web" placeholder="http://cheydeveloper.blogspot.com.es/"
           required="" type="url" />
       </li>
<li>
           <label for="Mensaje">Mensaje:</label>
           <textarea cols="40" name="Mensaje" required="" rows="6"></textarea>
       </li>
<li>
          <button class="submit" type="submit">Enviar</button>
        </li>
</ul>
</form>

Nos quedaría un formulario más o menos así:

Ahora vamos a mostrar el css:





.contact_form h2 {
    background: none repeat scroll 0 0 #F3F3F3;
    border-radius: 5px;
    color: blue;
    display: block;
    font-family: sans-serif;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
    width: 433px;
}


.contact_form ul {
    width:750px;
    list-style-type:none;
    margin:0px;
    padding:0px;
}

.contact_form li{
    padding:12px; 
    position:relative;
}

.contact_form label {
    color: #555555;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-top: 3px;
    padding: 3px;
    width: 90px;
}

.contact_form input {
    height:20px; 
    width:220px; 
    padding:5px 8px;
}

.contact_form textarea {
    padding:8px; 
    width:300px;
}

.contact_form button {
    margin-left:90px;
}

.contact_form input, .contact_form textarea { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    color: #888;
    font-size: 12px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}

.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:80px;
}

.contact_form input:required:valid, .contact_form textarea:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

button.submit {
    padding: 9px 17px;
   font-family: Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1;
   color: #444;
   border: none;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), 
   to(#bbb));
   background-image: -moz-linear-gradient(0% 100% 90deg, #BBBBBB, #FFFFFF);
   background-color: #fff;
   border: 1px solid #f1f1f1;
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

button.submit:hover {
    opacity:.55;
    cursor: pointer; 
    color: #fff;
}

button.submit:active {
    border: 1px solid #222;
    box-shadow: 0 0 10px 5px #444 inset; 
}

Y ahora nuestro formulario quedaría así:


No voy a explicar los códigos porque supongo que si estáis haciendo esto es porque más o menos entendéis, pero no tenéis imaginación para hacerlo o no estabais inspirados.

Aún y así, si tenéis alguna duda con ellos, ser libre de preguntarme que contestaré en cuanto pueda.

Espero que os sirva, ¡un saludo!

10 mar 2014

Como adaptar nuestro blog a la política de Cookies

Para empezar os invito a ver este vídeo de 5 minutos dónde se explica un poco el rollo este de las Cookies, y cómo cumplirlo.

Ahora que ya sabemos un poco de qué va el tema, vamos a la parte práctica de como poner el tema de las cookies en nuestro blog.

Como adaptar nuestro blog a la política de Cookies


1.       Para empezar vamos a crear una página para informar al usuario sobre nuestro uso de las Cookies. Esta página tiene que estar siempre disponible para visitar en nuestro blog. Debemos poner un enlace a esta en cualquier parte del blog. Por ejemplo al pie del blog. Esta página debe contener:

a.       ¿Qué son las Cookies?
b.      ¿Qué tipo de Cookies estamos usando?
c.       Cómo eliminar las Cookies.

Puedes copiar y pegar mi página de información sobre las Cookies y adaptarla a tus necesidades.
Para crear una nueva página en tu blog sigue estos pasos:

a.       Vamos al menú de administración de nuestro blog.
b.      Vamos a páginas -> Página nueva.
c.       Le damos el nombre de “Política de Cookies”
d.      Copiamos y pegamos la página con la información que tengamos preparada.
e.      Publicamos.

2.       Cuadro flotante para informar y obtener el consentimiento del usuario sobre las Cookies.
Recomiendo usar Cookie-Script. Es un Servicio gratuito que nos ayuda muchisímo en esta tarea de las Cookies en el blog de Blogger. Vamos al siguiente enlace:


cookie-script.com

a.       Entra en la página.
b.      Registráte.
c.       Identificate y entra.
d.      Una vez dentro crea un nuevo ítem o nuevo artículo.
e.      Ponle un nombre (el nombre de vuestro blog por ejemplo) y elige un diseño.
f.        Rellena los datos que te va pidiendo en configuración y elige los colores que quieres.
g.       Guardar y cerrar.

1.       Ahora podemos copiar y pegar el códico html en nuestro blog para darle uso y así hacer que nuestro blog de Blogger (o cualquier otro blog o página web) cumpla con la política de Cookies.

a.       En la página de Cookie-Script, una vez creado y cerrado. Le damos a Use ítem.
b.      Copiamos el código que aparece.
c.       Vamos a nuestro panel de administrador de nuestro blog.
d.      Vamos a la pestaña Plantilla -> Editar HTML.
e.      Prácticamente al final de todo este código, hay una etiqueta tal que así “</ BODY>”
f.        Justo antes de ésta, pegamos nuestro código copiado de antes.
g.       Guardar plantilla.
h.      Actualizamos nuestro blog o página web y verificamos que funciona correctamente.
i.         A mi me ha salido a la primera, ¡bien!


Espero que os haya servido este tutorial. ¡Un saludo!

Más visitas para tu blog

Más visitas para tu blog

Vuestras visitas:

Trucos Blogger

Sobre Google

Los + vistos en la semana

 

© 2014 Aplicaciones ...---Chey---.... All rights resevered. Designed by Chey Developer

Back To Top
Recibe las actualizaciones directo a tu correo