Ocultar avisos de warning en PHP

¡Hola a todos!

Hoy os voy a  enseñar una funcionalidad de PHP muy sencilla: ocultar los warning en el propio código fuente del php;

Esta funcionalidad  es sumamente sencilla y nos puede sacar de avisos que son feos de ver  en el acabado final de nuestra página web.

Comprobaremos en que línea del código nos da el aviso, y  en la línea que nos marque el código php le pondremos delante una “@”  de este modo

@session_start( );

Otro ejemplo puede ser :

@$fp = fopen($archivo,"r");

Seguro que esta herramienta la acabáis usando en algún momento.

¡Un saludo!

Galeria animada en CSS

¡Buenas a todos!

Hoy os voy a explicar cómo poder hacer una galería de fotos con movimiento en CSS 3.0.
Aun quedan muchas cosas por acabar de completar ya que este ejemplo no puede ejecutarse en Internet Explorer y su comportamiento difiere entre el navegador Chrome y Mozilla. Cuando estas opciones estén estandarizadas para todos los navegadores eliminaremos –webkit- de la etiqueta.
En Mozilla veremos fotos sobrepuestas que dependiendo donde ponemos el ratón veremos una foto entra u otra. Sin embargo en Chrome estas fotos se giraran cuando entremos en la zona sensible de la foto.
En el código html iremos insertando una div por imagen que vayamos a insertar dentro de un div general llamado galería.
Cada div de imagen tiene un estilo propio donde se sitúa en la página web.

#img1 {
top: 150px;
left: 130px;
z-index:1;
}
Diseñaremos la capa para que en cada div tenga un borde, una sombra y que haya trozos que no se vean cuando este el ratón este fuera de la zona sensible de la foto.

#galeria div {
position: absolute;
overflow: hidden;
opacity: 0.9;
-webkit-transition: all 0.5s linear;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: -3px -3px 50px #666;
box-shadow: -3px -3px 50px #666;
-webkit-transform: scale(0.60);
}
Cuando pongamos el ratón encima de la foto la foto se pondrá en un primer plano (el efecto que veremos en Mozilla) o se girara unos grados (esto lo veremos en Chrome).


#galeria div:hover {
z-index:599;
-webkit-transform: rotate(10deg);
opacity: 1;
}
Podemos ver el ejemplo en funcionamiento desde este enlace.
¡Un saludo!

Degradados con CSS 3.0

¡Buenas a todos!

Hoy os explicaré una nueva función de CSS 3.0: diseñar degradados. Esta función por ahora no es posible para navegadores como Internet Explorer.

Crearemos  3 diferentes tipos de  degradados: lineal y dos diagonales. La sintaxis general  para poder crear estos degradados es la siguiente  (aunque la  personalizaremos según el navegador con el que trabajaremos)

background: linear-gradient(lado de inclinacion, color1, color2);

Para poder ver el efecto en funcionamiento pinchad en el enlace.

¡Un saludo!

Deagradado lineal :

.degradado1{
background: -webkit-linear-gradient(#FFFF00, #FF4500);
background: -moz-linear-gradient(#FFFF00, #FF4500);
background: -o-linear-gradient(#FFFF00, #FF4500);
background: linear-gradient(#FFFF00, #FF4500);
}
Degradado Diagonal derecho :

.degradado2{
background: -webkit-linear-gradient(top right, #1E90FF, #FFFFFF);
background: -moz-linear-gradient(top right, #1E90FF, #FFFFFF);
background: -o-linear-gradient(top right,#1E90FF, #FFFFFF);
background: linear-gradient(top right, #1E90FF, #FFFFFF);
}

Degradado Diagonal izquierdo :

.degradado3{
background: -webkit-linear-gradient(top left, #FF69B4, #fff);
background: -moz-linear-gradient(top left, #FF69B4, #fff);
background: -o-linear-gradient(top left, #FF69B4, #fff);
background: linear-gradient(top left, #FF69B4, #fff);
}

Boton imprimir en pagina web

¡Buenas a todos!

Hoy vamos a trabajar  un código sobre como poder imprimir páginas a partir de nuestro código web. Hoy trabajaremos con JavaScript para poder desarrollar este ejemplo.

Usaremos parte del código con el que trabajamos en el ejemplo de Gestor de Noticias para seguir adelante con este tutorial. Creamos un enlace   hacia una pagina   más simple (que será la que se imprima) con la noticia a imprimir. Enviamos la id de la noticia por  URL e imprimir la recibirá por el método GET  (como en Gestor de Noticias)

a href="imprimir.php?id=$id" target="_blank"

En Imprimir  llamaremos a la function window.print() para imprimir el archivo html generado con la noticia que hemos elegido.


window.print();
Para ver el ejemplo en marcha podeis pinchar en Gestor de Noticias, ya que os llevará al enlace.

¡Un saludo!

Gestor de noticias

¡Buenas a todos!

Hoy os enseño como poder generar un sistema  gestor de noticias para nuestra website. Es un código muy sencillo  en PHP que nos puede servir para muchas utilidades.

Este es el enlace para que podáis ver el ejemplo.

El secreto de este código es que enviamos la id de la noticia que queremos ampliar  por URL a la segunda página (tenemos que añadir los simbolos <> delante de las comillas)  .

echo "a href=ampliar.php?id=$id";

En la segunda página recogemos por el método get el campo id  para poder desarrollar la consulta y leer la noticia por completo

$id = (int) $_GET["id"];

Pinchando aquí podeis descargar el código por completo  ( sin base de datos)  y así poderlo adaptar a vuestras necesidades

¡Un saludo!

Juncal

Indexacion de nuestra website por buscadores

¡Buenas a todos!

Hoy os explicaré como hacer una buena cabecera de una pagina web. Es  muy importante tener bien estructurada este sector de la página web  para que nuestra página web este bien indexada  en los buscadores y podamos recibir más visitas.

Las etiquetas que debemos insertar son los META NAMES.

Dentro del head ( cabecera) de nuestra web incluiremos estos META NAMES , ellos   muestran diferente información referente a nuestra página web. Aquí os muestro los META NAMES más importantes :

• Meta Name Title : Deberemos  incluir el nombre de nuestra pagina web,  el titulo debe de  tener un minimo de 10 letras y máximo de 70.

<meta name=”title” content=”titulo-del-webite”>

• Meta Name Descripcion : Breve descripción  de nuestra pagina web.  Esta descripción no debe de sobrepasar los 160 caracteres.

<meta name="description" content="descripción-del-website”>

• Meta Name KeyWords : Incluiremos un listado de palabaras relacionadas con la tematica de nuestra pagina web para que pueda ser indexada por los buscadores.

<meta name="keywords" content="palabra1,palabra2,palabraN”>

• Meta Name Lenguage :  Especificará el  idioma en el que se encuentra desarrollado el website.

<meta name =”Language” content=”ES|EN|FR”>

• Meta Name Author :  Informaremos del autor de  la página web.

<meta name =”Author” content=”Autor”>

• Meta Name Robots : Especificaremos que nivel de indexacion deseamos :

• all :  La página será indexada por completo.
• none :El website será indexado, pero no sus archivos.
• index : La página puede ser indexada por los robots.
• noindex: La página no podrá ser indexada por los robots.
• follow : Permite que los robots sigan los vínculos de nuestro website a otros.
• nofollow : Bloquea que los robots sigan los vínculos de nuestra página a otras.

<meta name=”robots” content=”all”>

La cabecera completa sería :

<head><title>Titulo del website title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="keywords" content="palabra1,palabra2,palabran " />

<meta name="description" content=" Descripcion-del-web" />

<meta name =”Language” content=”ES”>

<meta name =”Author” content=”Autor”>

<meta name=”robots” content=”all”>

</head> 

¡Un saludo!

Controlar cantidad de caracteres

¡Buenas a todos!

Hoy os presentaré un código en JavaScript que puede sernos útil para el desarrollo de formularios. En ocasiones se nos puede presentar la necesidad de  controlar la cantidad de caracteres que han sido introducidos… además puede que necesitemos que en el momento en que lleguemos a esa cantidad no se nos deje escribir mas palabras en dicho campo.

El código se basa en dos partes :

<form name="descuento" action="">

Caracteres restantes:
<input readonly size=3 maxlength=3 value="100"><br>

<textarea rows="10" cols="30"
onKeyDown=
"ContarCaracteres(this.form.txtMensaje,this.form.contador,100);"

onKeyUp=
"ContarCaracteres(this.form.txtMensaje,this.form.contador,100);">
</textarea>

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

</form>

En el formulario tenemos el campo contador que es el que nos mostrará los caracteres que nos  quedan por ser utilizados y después el  campo multilinea txtMensaje. En dicho campo tenemos varios eventos(OnKeyDown y onKeyUP que controlan cuando esta el cursor dentro del campo del formulario)  que llaman a la función JavaScript que  después os mostraré.  Hemos puesto como tope 100 caracteres y si queremos que sea un numero diferente de caracteres lo modificaremos  donde aparezca dicha cantidad.

<SCRIPT LANGUAGE="JavaScript">

function ContarCaracteres(field, count, max) {

if (field.value.length > max)
field.value = field.value.substring(0, max);
else

count.value = max - field.value.length;
}
</script>

Esta función JavaScript ContarCaracteres controla los caracteres restantes que podemos usar y además  si hemos llegado al carácter máximo de utilización.

Aquí tenéis un enlace donde podéis ver dicho código en marcha. Espero que os sirva de ayuda.

¡Un saludo!

Reconocer resolucion de pantalla

¡Buenas a todos!

Hoy os explicaré como podéis detectar la resolución de pantalla con la que el cliente visita vuestro sitio web.  Este código puede ser muy útil para elegir  como diseñar la web.

Al ser un control que se realiza al lado del cliente debemos de  desarrollarlo mediante JavaScript

<script language="JavaScript">

if (screen.width + "x" +screen.height == "1024x768")
 {
 document.write("La resolucion es 1024x768");
 }

if (screen.width + "x" +screen.height == "1280x800")
 {
 document.write("La resolucion es 1280x800");
 }

if (screen.width + "x" +screen.height == "1280x1024")
 {
 document.write("La resolucion es 1280x1024");
 }

</script>

Añadiremos   diferentes if para poder controlar las resoluciones que queramos controlar.Pinchad en el siguiente enlace para poder ver el ejemplo en funcionamiento.

¡Un saludo!

Sombra con CSS 3

¡Buenas a todos!

Hoy os voy a enseñar una propiedad que será  una de las grandes novedades en CSS 3.  Aunque esta propiedad ya esta en funcionamiento solo no es visible para Internet Explorer, es decir…el resto de los navegadores la  admiten pero como siempre IE va por detras…

Me ahorraré el codigo HTML porque todos sabemos que debemos de tener una capa con  la ID correspondiente que adjudiquemos a la declaracion de CSS.

#sombra  {
background-color: #E6399B;
width: 300px;
padding: 10px;
box-shadow: 5px 5px 0 #ffffff;
-webkit-box-shadow: 5px 5px 0  #ffffff;
-moz-box-shadow: 5px 5px 0  #ffffff;
color:#ffffff;
}

Las nuevas sentencias son las tres ultimas, como vemos  todas tienen la base de box shadow ( que es como se llamará la declaracion de dicha sombra), pero además por ahora las debemos de añadir -moz ( para navegador Mozilla) y Webkit ( para Webkit, Chrome…) y las diferewntes propiedades de  color, grosor y distancia.

¡Un saludo!

Seleccionar CSS dependiendo de navegador

¡Buenas a todos!

Hace unas semanas  os informe de cual era el código para  detectar el navegador que estábamos usando.  Esta herramienta es  muy útil para diversos procedimientos y uno de ellos es seleccionar la hoja de estilos dependiendo del navegador del cliente.

Muchos de vosotros  os habréis peleado en infinitas ocasiones para  poder optimizar cada hoja de estilos en los navegadores mas  populares. En este caso   usaremos este ejemplo con los dos navegadores  por excelencia Internet Explorer y Mozilla Firefox.

<?php

$navegador = getenv("HTTP_USER_AGENT");

if (preg_match("/MSIE/i", "$navegador"))

{

$css="ie.css";

}

else if (preg_match("/Mozilla/i", "$navegador"))

{

$css="firefox.css";

}

echo '<link rel="stylesheet" media="screen" href="' .$css. '" />';

?>

El código que os indico  esta en lenguaje PHP . Como podeis ver guardamos en la variable $css  la hoja de estilos correspondiente y luego hacemos un echo de la sentencia que en html inserta el css con la variable correspondiente.

¡Un saludo!

Juncal