Weblogs Código

RecorteX

» xhtml
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes de la etiqueta xhtml

RSS
Recortes: 7

Etiquetas relacionadas:
html
php
flash
javascript
youtube
ajax
etiqueta
w3c
web
xml

Incrustar videos de youtube como XHTML 1.0 válido

Para introducir un video de youtube, manteniendo el código de la página como xhtml válido debemos modificar el código que nos presenta youtube de la forma…

 
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U">
</param>
<embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="425" height="350">
</embed>
</object>
 

A esta otra

 
<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/7_6B6vwE83U">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" /><
/object>
 

Cargar combos con Ajax

No se uds. pero antes hacer combos que se cargaran donde uno dependia de otro era algo engorroso, claro que habia varios metodos, se podia usar iframes o recargar la pagina, aunque sinceramente ninguno de esos me parece muy bueno, hace poco necesite hacer algo asi para una web app, asi que le digo como lo hice, no se si sera lo mejor pero talvez a alguien le sirva.

Por si acaso esto esta hecho con PHP y MySQL

Primero tenemos nuestro formulario

Esas dos son clases donde la primera permite manejar la Base de datos, esa clase la postee hace un tiempo aqui.( http://www.recortex.com/recorte/177 )
Todo lo que viene a continuacion esta dentro de un solo archivo formulario.php

 
<?php 	
        include("./cls/clsManejaBD.php"); 
	include("./cls/clsUbicacion.php"); 
?>
 
 
<form action="./actions/registrar_evento.php" method="post" id="frmRegistraEvento">
<fieldset><label>Departamento</label>
         <?php /*instancio la clase y llamo a un metodo de la misma que va a generar la lista de departamentos*/ 
               $u=new Ubicacion(); $u->Generar_Combo_Departamentos(); 
         ?>
</fieldset>
<fieldset><label>Provincia</label><div id="cmbProvincia">Provincia</div></fieldset>
<fieldset><label>Distrito</label><div id="cmbDistrito">Distrito</div></fieldset>
<fieldset><label>Fecha</label><input type="text" name="txtFecha" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><label>Tema</label><input type="text" name="txtTema" value="tema tratado"/></fieldset>
<fieldset><label>Publico</label><input type="text" name="txtPublico" value="publico atendido"/></fieldset>
<fieldset><label>Lugar</label><input type="text" name="txtLugares" value="lugar"/></fieldset>
<fieldset><label>Cantidad</label><input type="text" name="txtCantidad" value="0"/></fieldset>
<fieldset><label>N&deg; de Informe</label><input type="text" name="txtInforme" value="N&deg; de Informe" /></fieldset>
<fieldset><label>Fecha de Informe</label><input type="text" name="txtFecha_Informe" value="dd/mm/aaaa" size="10" maxlength="10"/></fieldset>
<fieldset><input type="button" name="aceptar" value="aceptar"/> <input type="button" name="borrar" value="borrar"/></fieldset>
</form>
 

Cuando se vea esta pagina el navegador reemplazara donde aparece nuestro codigo php por esto

 
<select id="departamento" onchange="cambio(id,2);">
<option> Amazonas</option>
<option> Ancash </option>
<option> Arequipa </option>
...
</select>
 

ahora viene la parte de javascript, yo tengo una funcion denominada cambio() dentro de la cual valido el destino y que pagina cargar, lo que sigue pueden ponerlo en la misma pagina o en un archivo js aparte

 
function cambio(id, dest)
{	var index=document.getElementById(id).selectedIndex;
	var url;
	var detino;
       /*de acuerdo al combo que cambie carga el dato del siguiente combo
combo "departamento" carga "provincias" y "provincias" carga "distritos" */
	if(dest==2)
		{ 
			url="cargar_provincias.php?idDep=" + (index+1); /*a la variable se le suma 1 ya que el indice del combo empieza en 0*/
			destino='cmbProvincia';
		}
		
	if(dest==3)
		{ 	url="cargar_distritos.php?idProv=" + (index+1) + "&idDep=" + (document.getElementById('departamento').selectedIndex + 1);
			destino='cmbDistrito';
		}
		
	cargarDatos(url, "action", destino);//esta es una funcion que llama al ajax
}
 

Bueno aunque yo tengo separado en archivos diferentes en este caso vamos a decir que tanto la funcion de arriba como la funcion para ajax se encuentra en el mismo archivo

 
function cargarDatos(pagina, dir, target)	
{	var page = false;
	var target;
	var url;
	url="./" + dir + "/" + pagina;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        page = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try 
        {
            page = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versi&oacute;n antigua
            try
            {
                page = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    } 
    else
	{	return false;}
	
    page.onreadystatechange = function ()
    {
        // funci&oacute;n de respuesta
		if (page.readyState != 4) {
			document.getElementById (target).innerHTML= '<div id="loader"><img src="./img/ajax-loaderC.gif" > Cargando datos...</div>';
		}else{
			//window.setTimeout("cargarpagina(page);",2000); //pretendemos demorar la respuesta unos segundos
			cargarpagina(page, target);
		} 		
    }
	
    page.open ('GET', url, true); // asignamos los m&eacute;todos open y send
    page.send (null);	
 
}
 
function cargarpagina(page, target)
{
    if (page.readyState == 4 && (page.status == 200 || window.location.href.indexOf ("http") == - 1))
		document.getElementById (target).innerHTML = page.responseText;
}
 

por ultimo debemos tener nuestros archivos php, yo los tengo en una carpeta llamada “action”
aqui le muestro el que carga los distritos para que se den una idea

 
<?php
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
?>
 

por ultimo no se uds. pero a veces me ha pasado a mi que en tutoriales como estos no ponen el codigo completo php y uno se pierde, asi que aqui les pongo el codigo de la clase Ubicacion.

getSQL($query);		
		return $rs;
	}
	
	function Generar_Combo_Departamentos()
	{ $rs=$this->ListarDepartamentos();
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='departamento' onchange='cambio(id,2);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarProvincias($fk_departamento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT idProvincia, nombre FROM Provincia where fk_Departamento=$fk_departamento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Provincias($idDepartamento)
	{ $rs=$this->ListarProvincias($idDepartamento);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='provincia' onchange='cambio(id,3);'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}
	
	function ListarDistritos($fk_departamento, $fk_provincia)
	{	
		$dbm=new ManejaBD;
		$query="SELECT DISTINCT idDistrito, nombre FROM Distrito where fk_Departamento=$fk_departamento and fk_Provincia=$fk_provincia";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	function Generar_Combo_Distritos($idDepartamento, $idProvincia)
	{ $rs=$this->ListarDistritos($idDepartamento, $idProvincia);
		if (mysql_num_rows($rs)>0)
			{	echo "<select id='distrito'>";				
	 			while($data=mysql_fetch_array($rs,MYSQL_NUM))
				{	echo  "<option> $data[1] </option>";			
				}
				echo "</select>";
 			}	
		else
			{	echo "no existen datos para mostrar";
			}
		mysql_free_result($rs);	
	}

	
	function Ubicacion_Evento($idEvento)
	{	
		$dbm=new ManejaBD;
		$query="SELECT direccion FROM Ubicacion where fk_Evento=$idEvento";		
		$rs=$dbm->getSQL($query);			
		if($rs)
		{	return $rs;
		}
		
	}
	
	
}

A pedido de un usuario ahi esta cargar_distritos.php

 
 
	include("../cls/clsManejaBD.php"); 
	include("../cls/clsUbicacion.php"); 
	$id_departamento=$_GET['idDep'];
	$id_Provincia=$_GET['idProv'];
	$u=new Ubicacion(); $u->Generar_Combo_Distritos($id_departamento,$id_Provincia);
 

aunque un poco largo espero sea entendible _

Insertar un SWF con XHTML valido

Esta es una de las maneras de insertar un SWF utilizando xhtml valido, ya que la etiqueta embed no es administida por la W3C.

 
<object type="application/x-shockwave-flash" data="./swf/anima.swf" width="786" height="165" >
							<param name="movie" value="./swf/anima.swf" />
							<param name="quality" value="high" />
							<param name="wmode" value="transparent" />
							<param name="aling" value="center" />
					</object>
 

Funcion para reemplazar caracteres especiales por codigo xhtml valido

En algunos casos hay personas que gustan de utilizar las tildes inclusive en las webs y en sus posts, asi que hice esta funcion para no tener que formatear manual mente los caracteres como las tildes y “ñ”, no es la gran cosa pero talvez a alguien le ayude asi como es sencillo agregarle mas caracteres.


  function caracteresEspeciales($texto)
	{	$nTexto=str_replace('á',"&aacute;",$texto);
		$nTexto=str_replace('é',"&eacute;",$texto);
		$nTexto=str_replace('í',"&iacute;",$texto);
		$nTexto=str_replace('ó',"&oacute;",$texto);
		$nTexto=str_replace('ú',"&uacute;",$texto);
		
		$nTexto=str_replace('?',"&Aacute;",$texto);
		$nTexto=str_replace('É',"&Eacute;",$texto);
		$nTexto=str_replace('?',"&Iacute;",$texto);
		$nTexto=str_replace('Ó',"&Oacute;",$texto);
		$nTexto=str_replace('Ú',"&Uacute;",$texto);
		
		$nTexto=str_replace('ñ',"&ntilde;",$texto);
		$nTexto=str_replace('Ñ',"&Ntilde;",$texto);
		
		return $nTexto;
	}

Etiqueta para insertar un flash

Cuidado con los "???"

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="???" height="???" VIEWASTEXT>
<param name="menu" value="false">
<param name="movie" value="???" />
<param name="quality" value="high" />
<embed src="???" menu="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="???" height="???"></embed>
</object>

Provee feeds para secciones diferentes

Provee acceso a los feeds de secciones específicas.
 
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/" title="Nombre sitio - Completo" />
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/seccion1/" title="Nombre sitio - Nombre seccion1" />
	<link rel="alternate" type="application/atom+xml" href="http://www.dominio.com/atom/seccion2/" title="Nombre sitio - Nombre seccion2" />
 

Plantilla XHTML 1.0

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>	
        <title>Título</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>
    <body>
        <!-- contenido -->
    </body>
</html>
 
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin