Es momento de pasar el diseño de nuestro website a código fuente, a este paso se le llama maquetar y para lo cual normalmente se tiene que escribir infinidad de etiquetas HTML con los infaltables símbolos de menor (<) y mayor (>), de la misma forma para los estilos tenemos que escribir infinidad de puntos y comas (;) y llaves ({}).

Sin embargo existen alternativas para evitar el trabajo anterior, en este artículo hablamos de Jade y Stylus, el primero es un motor de plantillas que genera código HTML y el segundo un pre procesador de CSS, los cuales agilizan el trabajo de maquetación sin necesidad de escribir etiquetas, puntos y comas y llaves, más bien, es necesario llevar un código ordenado.

Realizaremos un ejemplo donde generaremos código HTML y CSS al mismo tiempo de guardar los archivos en Jade y/o Stylus. Para esto necesitamos tener instalado Jade, Stylus y el editor Sublime Text.

Primero debemos instalar nodejs, para ello lo instalamos desde nodejs.org

Luego instalamos stylus y jade desde la línea de comandos de windows:

npm –g install stylus
npm –g install jade

En Sublime Text debemos instalar los paquetes correspondientes para tener los código Jade y Stylus resaltados.

Para empezar debemos crear un nevo sistema de construcción para Jade de la siguiente forma:

Se abrirá un archivo JSON modificamos el archivo como sigue:

{
  "cmd": ["cmd","/c","jade","-P","$file"],
  "selector": "source.jade"
}

Lo guardamos con el nombre “Jade.sublime-build” en la ubicación que se abre por defecto (C:\Users\[USERNAME]\AppData\Roaming\Sublime Text 2\Packages\User).

Para Stylus buscamos el archivo correspondiente (Stylus.sublime-build) en la carpeta de paquetes de Sublime Text y dentro de la carpeta Stylus. Lo editamos como sigue:

{
  "cmd": ["cmd","/c","stylus", "-c", "$file"],
  "file_regex" : ".",
  "selector": "source.stylus"
}

Hasta aquí podemos generar el código HTML y/o CSS presionando CTRL + B. Sin embargo si queremos generar el código al momento de guardar debemos instalar el paquete SublimeOnSaveBuild; una vez instalado lo configuramos seleccionando:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > Default

Copiamos el código a:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > User

Y agregamos las extensiones “styl” y “jade” a “filename_filter”,  asegurándonos de que “build_on_save” valga “1”.

Con esto al momento de guardar archivos Jade y/o Stylus se generará automáticamente el código HTML y/o CSS correspondiente.

Al abrir el archivo “hola.html” obtendrémos el siguiente resultado:

En este tutorial les voy a mostrar una manera de las muchas que puedan haber para crear una Pagina web con PHP Orientado a Objetos.

Hay muchos que tiene esa duda, espero poder resolver esa duda, existen CMS como wordpress, joomla, etc. Que hace uso bastante del paradigma de la POO(Programacion Orientada a Objetos).

Bueno esta es una pagina básica la cual contiene:

– Cabecera
– Menú
– Contenido
– Pie de pagina.

Entonces manos a la obra.

Primero voy a crear mi Hoja de Estilos CSS. Lo guardare con el nombre oop-estilos.css y estara en mi carpeta css/

Creamos las propiedades CSS

body{
font-family: 'Text Me One', sans-serif;
color: #000;
}

#cabecera{
width: 100%;
height: 50px;
}

#menu{
width: 100%;
height: 50px;	
background-color:#036;
text-align: center;
}

#menu a:link{
color:#fff;
text-decoration: none;
}	

#menu a:active{
color:#ff;
text-decoration: none;
}	

#menu a:visited{
color:#fff;
text-decoration: none;
}	

#menu a:hover{
color:#fff;
text-decoration: none;
}	

#contenido{padding: 10px;}

#img_php{
float: left;
margin-top:5px;
margin-right: 10px;
}

#text_der_img_php{
margin-top:5px;
}

ul.menu_nav ,
ul.menu_nav  li,
ul.menu_nav  ul {
 list-style: none;
 text-align: center;
 margin-right: 30px;
}

ul.menu_nav  {
 position: relative;
 z-index: 597;
 float: left; 
}

ul.menu_nav  li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 text-align: center;
 zoom: 1;
 width: 180px;
}

ul.menu_nav  li.hover,
ul.menu_nav  li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
 background-color:#F90;
 float: left;
 width: 180px;
}

ul.menu_nav  ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.menu_nav  ul li {
 float: left;
 background-color: #000;
 margin-left: -40px;
}

ul.menu_nav  ul ul {
 top: 1px;
}

ul.menu_nav  li:hover > ul {
 visibility: visible;
}

ul.menu_nav  li.rtl ul {
 top: 100%;
 right: 0;
 left: auto;
}

ul.menu_nav  li.rtl ul ul {
 top: 1px;
 right: 99%;
 left: auto;
}

ul.desplegable {
 font-weight: bold;
}

ul.desplegable li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}

#footer{
float: left;
width: 100%;
text-align: center;
font-weight: bold;
}

Ahora voy a crear un archivo llamado index.php, este archivo sera la pagina principal en donde graficare mi web a traves de metodos, objetos, clases, etc. de PHP.

Haciendo Referencia.

Hacemos Referencia o llamamos a nuestros archivos externos.

NOTA: Dentro de las etiquetas body vamos a ir colocando todos nuestros métodos, objetos, clases, etc. de PHP.

Creamos la estructura de nuestra web:

//Cabecera
texto = $titulo;
	}
	
	public function graficar() //Metodo
	{
		//echo"
".$this->texto."
";
		?>
		
texto;?>
		
link;
		$menu[] = array('Inicio' => array('Mision', 'Vision', 'Nosotros'));
		$menu[] = array('Nosotros' => array('La empresa', 'Servicios', 'Portafolio'));
		$menu[] = array('Servicios' => array('Diseño web', 'Diseño grafico', 'SEO', 'Marketing'));
		$menu[] = array('Contacto' => array('Redes sociales', 'Telefonos', 'Formulario', 'Mapa'));
		
		foreach ($menu as $menu_key => $menu_item)
		{
			foreach ($menu_item as $menu_name => $sub_menu)
			{
				echo "
".$menu_name."";
				if(isset($sub_menu))
				{
					echo "
";
					foreach($sub_menu as $items)
					{
						echo"
".$items."";
					}
					echo "
";
				}
				echo "
";
			}			
		}
		
	}
}
?>

lineas[] = $li;
	}
	
	public function graficar()
	{
		for ($i=0;$ilineas);$i++)
		{
			?>	
            
		
            
lineas[$i];?>
			texto = $cadena;
	}
	
	public function graficar()
	{
		?>
		

		texto;?>
		cabecera = new Cabecera($texto_cabecera);
		$this->menu = new Menu();
		$this->body = new contenido();
		$this->pie = new Footer($texto_pie);
	}
	
	public function iniciar_contenido($texto)
	{
		$this->body->iniciar_linea($texto);
	}
	
	public function vista()
	{
		echo "
";
		echo "
"; $this->cabecera->graficar(); echo "
";
		echo "
"; $this->menu->graficar(); echo "
";
		echo "
"; $this->body->graficar(); echo "
";
		echo "
"; $this->pie->graficar(); echo "
";
		echo "
";
	}
}
//*************************************************************************
//Ahora creamos la vista de nuestra web
$pag = new Pagina("Bienvenido a mi Web","Desarrollado por Juan Castro Lurita - 2013");
$pag->iniciar_contenido(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet lectus sit amet tortor imperdiet iaculis. Cras ornare scelerisque libero et pellentesque. Mauris malesuada interdum sapien a porta. Curabitur cursus odio et nibh pretium, quis ornare purus aliquet. Aliquam gravida sodales convallis. Fusce nec viverra quam. Proin ultrices augue massa, in accumsan dui volutpat a. Quisque fringilla augue at nisl sagittis vestibulum. Duis venenatis, mauris in pharetra aliquet, ipsum massa aliquam lectus, ut volutpat nisl arcu iaculis turpis. Ut vehicula sollicitudin diam, ut pulvinar justo ornare vitae. Sed gravida auctor faucibus. Sed vel risus ac lorem commodo tincidunt a in dui. Fusce tellus magna, adipiscing et suscipit eget, malesuada at orci. Aenean vitae dignissim velit. Sed facilisis tempor lacus ac bibendum.




Nullam et lacus lobortis, congue erat at, lacinia eros. Ut dictum sodales nisi id convallis. Fusce posuere quam eget orci interdum sagittis. Maecenas vitae elementum sem. Sed et massa sem. Phasellus ac lobortis est. Praesent sit amet euismod leo. Maecenas sagittis vel ligula vitae imperdiet. Etiam condimentum elit nibh. Aliquam urna purus, sollicitudin quis est nec, convallis aliquet leo. Cras elementum, est sed feugiat sollicitudin, lorem ante venenatis urna, quis consectetur libero odio sed libero. Mauris nisi arcu, molestie ac enim nec, sagittis scelerisque turpis. Fusce sodales, nulla a venenatis eleifend, quam velit venenatis dui, vel aliquam lorem odio a lacus. Morbi vehicula felis lectus. Mauris faucibus, ante sed cursus imperdiet, est urna suscipit libero, vitae. "
);
$pag->vista();
?>		

Esos es todo.

Por si tienen algun problema aca les dejo los archivos para descargarlos:

LINK

Tambien les dejo una DEMO

Espero les sirva mucho.

Gracias.

En esta oportunidad les voy a enseñar una manera de recoger y enviar la URL a través de un formulario.

Voy a utilizar el array $_SERVER y dentro colocare el HTTP_REFERER que emplea el agente de usuario para la pagina actual.

en mi PHP que recibe y envia el formulario quedaria asi:

Código PHP :

$sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];

Quizás pueda servir para encontrar rápidamente la pagina desde donde se envió el formulario.
A mi me ayudo cuando manejaba una tienda en linea la cual tenia mas de 400 productos en linea y por este método, los ubicaba al instante, bueno ustedes le pueden dar el uso que deseen.

NOTA: Utilice la versión de Google Crohme 18, el cual soporta la validación nativa de HTML5 , que es con la cual valida el formulario.

Bueno vamos al tutorial.

Primero creo la pagina para mi formulario de contacto, la cual llamo index.php :

Código HTML :

  Ingresa tu Nombre :  Ingresa Tu E-mail para enviar la URL :  @   

Luego creo mi archivo PHP que procesa y envía la información, lo voy a llamar enviar.php :

Código PHP :

  
// En esta sección se declaran las variables

   $sPlace = $_POST['place'];
   $sEmail = $_POST['email'];
   $sClientemail = $_POST['clientemail'];
   $sAsunto = $_POST['asunto'];
   $sMensaje = $_POST['mensaje'];
   $sNombre = $_POST['nombre'];   
   $sUrl= $_POST['url'] = $_SERVER['HTTP_REFERER'];

//Aca se ponen los datos del remitente
$myname = $sNombre; 
$myemail = $sEmail;

//Aca se cambia la dirección de correo del destinatario
$contactemail1 = $sEmail.'@'.$sClientemail;

$sTitulo = "Datos recibidos de ".$myname."
"; $sDetalles = "Asunto : ".$sAsunto."
"."E-mail : ".$sEmail."@".$sClientemail."
"."URL: ".$sUrl."
"; $message = $sTitulo.$sDetalles; $subject = $sAsunto; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; $headers .= "From: ".$myname." <".$myemail.">\r\n"; $headers .= "To: ".$contactname1." <".$contactemail1.">\r\n"; mail($contactname1, $subject, $message, $headers);

Al final del mismo archivo enviar.php que procesa el envio, coloco un javascript para redireccionar a la pagina ok.php que confirma que ha sido enviado:

location.href = "ok.php";

Puede ver en el código PHP que estoy recogiendo la URL y la meto en la variable $sUrl, para luego enviarla y mostrarla en el correo:

$sTitulo = "Datos recibidos de ".$myname."";
$sDetalles = "Asunto : ".$sAsunto."
"."E-mail : ".$sEmail."@".$sClientemail."
"."URL: ".$sUrl."";

Ahora creo unas pocas lineas de código CSS para mi estilizar mi formulario, creo un archivo llamado estilos.css :

input:invalid {
    border: 1px solid red;
  }

   /* Estilo por defecto */
  input:required:invalid {
    border: 1px solid red;
  }

  input:required:valid {
    border: 1px solid green;
  }

.botonform {
   font-family: Arial, Helvetica, sans-serif;
   color: #FFF;
   background-color: #333;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 5px;
   padding-left: 10px;
   cursor: pointer;
}
.rojita {
   color: #F00;
}

Por ultimo creo una pagina que muestra el mensaje de “Enviado ! ” , que se va mostrar una ves que mi formulario haya sido enviado sin problemas, lo guardo con el nombre: ok.php :

Enviado !

Listo eso es todo !

Ustedes me dirán porque, puse los inputs de el correo en dos partes, lo que paso es que mi jefe lo quería así, según el obligaba a que el usuario escriba su correo, trate de convencerlo pero era bien terco, bueno lo deje así y nunca decidí cambiarlo, pero ustedes lo pueden hacer, les dejo a su criterio, al menos ya esta la idea.

Les dejo una DEMO para que puedan ver un ejemplo en funcionamiento (Ingresa tu correo para que te llegue la URL y puedas ver el ejemplo adecuadamente):

http://jrcl.net76.net/dm/recoger_url_con_php/

Espero les haya gustado !

En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web pequeña o para otras aplicaciones que deseamos y que tiene un montón de interacción con el usuario y desea ejecutar un evento cuando el ratón del usuario se encuentra en una distancia determinada de un elemento.

Solo creamos las variables globales, el evento y la función para el documento.

Código Javascript :

<script type="text/javascript">
$(document).ready(function(){
   var mX, mY, distance,
    $distance = $('#distancia span'),
    $element  = $('#elemento');

    function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }

    $(document).mousemove(function(e) {
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);
    });
});
</script>

Como se puede ver en el código hemos establecido una función en el evento .mousemovede manera cada vez que la persona mueve el ratón se procedera con lo siguiente.

Luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

Ahora creamos nuestros contenedores divs para recibir los datos:

<div id=”distancia”>La distancia hasta el punto es: <span> </span> pixeles.</div>
<br />
<div id=”texto”>
<h4>Partiendo del punto de partida que es el 0 de color naranja</h4>
<p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>
</div>
<div id=”elemento”>0</div>

Eso es casi todo, aca dejo una demo en donde estan todo el codigo completo (le das botón derecho del mouse en la pagina de la demo y luego le das ver codigo fuente) :

DEMO

Eso es todo, espero te haya gustado y que te sea muy útil.

Quiero compartir un codigo que desarrollé para que lo usen en sus páginas webs: mediante PHP una imagen de día, tarde o noche se mostrará de acuerdo al horario que corresponda.

Les dejo el Código:

Código completo !

<?php

$hora = date("H"); /* <-- H = Hora de 00 horas a 23 horas por default en PHP, entonces sabiendo esto seguimos abajo*/

if($hora < 11){
$file = ('http://tcc.tutv.com.uy/weatherSubrayado/images/Weather/tiempo_sol_small.png');
$mensaje = "Buenos Dias";
}
else if($hora < 18 ){
$file = ('http://tiempovenezuela.com/assets/images/weather_yr/3.png');
$mensaje = "Buenas Tardes";
}
else{
$file = ('http://www.cuandopasa.com/pic/n/000/000/n0000000130zgk.jpg');
$mensaje = "Buenas Noches";
}
?>

<html>
<body>
<?=$mensaje?>
<img src="<?=$file?>";
</body>
</html>

Explico un poco:

Si la variable $hora es menor que 11hrs, entonces que imprima la imagen de dia  dentro del body en :

<?=$mensaje?>

Y también que me imprima su respectiva imagen dentro del body en:

<img src="<?=$file?>";

El resto es similar, sólo que va a cambiar la imagen.

Las imágenes que cambian son:

• dia.jpg
• tarde.jpg
• noche.jpg

Como sabemos, la hora de PHP se basa en la hora de nuestros hosting o servidor. A mí me marca la hora así:

• a las 11pm(abarca desde las 12pm a la 1pm) –> imagen de dia(dia.jpg)
• a las 6pm –> imagen de tarde(noche.jpg)
• a las 12an –> imagen de mañana(mañana.jpg)

$file = ('http://www.nuevaubicacion.com/dia.jpg');