Compatibilidad HTML5 y Php

deywibkiss · #1 (**permalink**) 11/03/2012, 18:45

Hola!! quisiera salir de una duda. He esta ultimamente aprendiendo html5 y css, me encontre en la web con un diseño para crear un formulario, el cual quise implementar en mi web. En mi web yo uso archivos .php pero he notado que el ejemplo del formulario esta en .html (usa codigo html5 y css3).

Cuando guardo mi archivo con extension .php me sale sin estilo o solo muestra parte de el a pesar de que estoy enlazando el archivo css correctamente.

Solo se visualiza el estilo si lo guardo como html...

alguien podria explicarme por qué pasa eso?

rikimm · #2 (**permalink**) 11/03/2012, 19:49

Hasta donde yo se no deveria de pasar pero porque no pones tu codigo para poder checarlo y ver si hay algun error

karlos2101 · #3 (**permalink**) 11/03/2012, 22:03

Ponga el codigo para ver que problema tiene

deywibkiss · #4 (**permalink**) 13/03/2012, 15:41

ok. No solo he notado que pasa con lo del formulario sino con los scripts....

En el ejemplo siguiente, tengo una pagina del sitio web donde deseo ponerle uno de los efectos de glossy.js a una imagen para que se vea cristalizada. No lo consigo si guardo el archivo como .php No se si mi navegador necesite una activacion especial de algo pero lo pruebo con todos los navegadores y no consigo el resultado...

aqui el codigo del sitio con extension .php:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="CSS/estiloprincipal.css" rel="stylesheet" type="text/css">
<link href="CSS/estilocuerpo.css" rel="stylesheet" type="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="cvi_glossy_lib.js"></script>
    <script type="text/javascript" src="glossy.js"></script>      
</head>
 
<!-- este es el cuerpo de la pagina -->
<body>
<!-- aqui comienza el encabezado estatico -->
 
    <div class="menustatic">
        <div id="logocontraste"><img src="images/logocontraste.bmp" width="90" height="27"></div>
        <div id= "buscador">
            <form action="#" method="post">
                <input type="text" class="campostextocuerpo"> <input type="button" class="boton" value="Buscar">
            </form>
        </div>  
        <div class="enlacesprimarios">
            <ul>
                <li><a href="#">|&nbsp;Acerca de&nbsp;|&nbsp;</a></li>
                <li><a href="#">|&nbsp;Ayuda&nbsp;|&nbsp;&nbsp;</a></li>
            </ul>
        </div>
        
    </div>
<!--este es el cuerpo exterior de la pagina mas angosto que el body -->
    <div id="cuerpoext">
        <br>
        <br>
        <br>
        <div id="cuerpoint">
            <form action="#" method="post" enctype="multipart/form-data">
            <div><img src="images/user.png" class="cvi_glossy" /></div><!-- capa de la foto lateral-->
            </form>
        </div> <!-- fin capa interior-->
        <br>
          
    </div><!--fin capa exterior-->
    
 
<!-- este es el pie de pagina -->
    <div class="menustatic">
        
        <div id="producto">Sistema Planificador de Proyectos Personales</div>
        <div id="version">Home Edition v.1.0&nbsp;&nbsp;Fukushi &copy 2012 por Brian Serrano Satizabal</div>
        
        <div class="enlacesprimarios">
            <ul>
                <li><a href="#"><img src="images/facebook_logo.png" width="20" height="20" class="imagenselec">&nbsp;</a></li>
                <li><a href="#"><img src="images/logo_twitter.PNG" width="20" height="20" class="imagenselec"></a></li>
                <li><a href="#">&nbsp;|&nbsp;T&eacute;rminos Y Condiciones&nbsp;|&nbsp;</a></li>
                
            </ul>
        </div>
        
    </div>   
    
</body>
</html>

Y si este mismo codigo lo guardo como .html me funciona todo!!! Lo que quiero es encontrar el error o la forma para poder usar archivos en mi web .php y que se ejecuten estilos css3 html5 y javascript sin ningun problema

Rafael · #5 (**permalink**) 13/03/2012, 22:22

En mi humilde opinión estás un poco revuelto.
1) Tu archivo no es html 5, es xhtml
2) Y si no ves nada cambiando la extensión, tu servidor probablemente simplemente no procesa archivos php. Eso es por tu proveedor de hosting.

Bluesman74cl · #6 (**permalink**) 14/03/2012, 07:47

Estados líneas nos indican que tu archivo no está bajo HTML5

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

y además de la ausencia de TAGS como :
section
header
nav

deywibkiss · #7 (**permalink**) 14/03/2012, 10:45

ok entonces que debo hacer?.... mi servidor es apache estoy en estado de desarrollo... uso xamp como administrador, que debo hacerrrr!!!! ayuda por favor, denmen un consejo de experto...

Charles87 · #8 (**permalink**) 14/03/2012, 12:11

mmmmm el php no puede leer html asi como lo tienes, necesitas modificarlo.

algo asi:

Código PHP:

  <?php 
echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"; 
echo "<html xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://ogp.me/ns/fb#'>"; 
echo "<head>"; 
echo "<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />"; 
echo "<title>Documento sin titulo</title>"; 
echo "<link href='CSS/estiloprincipal.css' rel='stylesheet'type='text/css'>"; 
echo "<link href='CSS/estilocuerpo.css' rel='stylesheet'type='text/css'>"; 
echo "<meta http-equiv='imagetoolbar' content='no'>"; 
echo "<meta http-equiv='Content-Style-Type' content='text/css'>"; 
echo "<meta http-equiv='Content-Script-Type' content='text/javascript'>"; 
echo "<script type='text/javascript' src='cvi_glossy_lib.js'></script>"; 
echo "<script type='text/javascript' src='glossy.js'></script>"; 
echo "</head>"; 
echo "<!-- este es el cuerpo de la pagina -->"; 
echo "<body>"; 
echo "<!-- aqui comienza el encabezado estatico -->"; 
echo "<div class='menustatic'>"; 
echo "<div id='logocontraste'><img src='images/logocontraste.bmp' width='90' height='27'></div>"; 
echo "<div id= 'buscador'>"; 
echo "<form action='#' method='post'>"; 
echo "<input type='text' class='campostextocuerpo'><input type='button' class='boton' value='Buscar'>"; 
echo "</form>"; 
echo "</div>*"; 
echo "<div class='enlacesprimarios'>"; 
echo "<ul>"; 
echo "<li><a href='#'>|&nbsp;Acerca de&nbsp;|&nbsp;</a></li>"; 
echo "<li><a href='#'>|&nbsp;Ayuda&nbsp;|&nbsp;&nbsp;</a></li>"; 
echo "</ul>"; 
echo "</div>"; 
echo "</div>"; 
echo "<!--este es el cuerpo exterior de la pagina mas angosto que el body -->"; 
echo "<div id='cuerpoext'>"; 
echo "<br>"; 
echo "<br>"; 
echo "<br>"; 
echo "<div id='cuerpoint'>"; 
echo "<form action='#' method='post'enctype='multipart/form-data'>"; 
echo "<div><img src='images/user.png' class='cvi_glossy'/></div><!-- capa de la foto lateral-->"; 
echo "</form>"; 
echo "</div> <!-- fin capa interior-->"; 
echo "<br>"; 
echo "</div><!--fin capa exterior-->"; 
echo "<!-- este es el pie de pagina -->"; 
echo "<div class='menustatic'>"; 
echo "<div id='producto'>Sistema Planificador de Proyectos Personales</div>"; 
echo "<div id='version'>Home Edition v.1.0&nbsp;&nbsp;Fukushi &copy 2012 por Brian Serrano Satizabal</div>"; 
echo "<div class='enlacesprimarios'>"; 
echo "<ul>"; 
echo "<li><a href='#'><img src='images/facebook_logo.png' width='20' height='20' class='imagenselec'>&nbsp;</a></li>"; 
echo "<li><a href='#'><img src='images/logo_twitter.PNG' width='20' height='20' class='imagenselec'></a></li>"; 
echo "<li><a href='#'>&nbsp;|&nbsp;T&eacute;rminos Y Condiciones&nbsp;|&nbsp;</a></li>"; 
echo "</ul>"; 
echo "</div>"; 
echo "</div>"; 
echo "</body>"; 
echo "</html>"; 
?>

Ahora para que te tome el css prueba a poner el link completo del css es decir: http://miurl.com/css/nombre.css

eso primero asegurandote de que el navegador abre esa url de donde subiste el css, si hereda el codigo en el php lo mas seguro es que hayas puesto entonces mal la ubicacion de tu css

rikimm · #9 (**permalink**) 14/03/2012, 13:03

Cita:

Iniciado por Charles87

mmmmm el php no puede leer html asi como lo tienes, necesitas modificarlo.

algo asi:

Código PHP:

  <?php 
echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"; 
echo "<html xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://ogp.me/ns/fb#'>"; 
echo "<head>"; 
echo "<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />"; 
echo "<title>Documento sin titulo</title>"; 
echo "<link href='CSS/estiloprincipal.css' rel='stylesheet'type='text/css'>"; 
echo "<link href='CSS/estilocuerpo.css' rel='stylesheet'type='text/css'>"; 
echo "<meta http-equiv='imagetoolbar' content='no'>"; 
echo "<meta http-equiv='Content-Style-Type' content='text/css'>"; 
echo "<meta http-equiv='Content-Script-Type' content='text/javascript'>"; 
echo "<script type='text/javascript' src='cvi_glossy_lib.js'></script>"; 
echo "<script type='text/javascript' src='glossy.js'></script>"; 
echo "</head>"; 
echo "<!-- este es el cuerpo de la pagina -->"; 
echo "<body>"; 
echo "<!-- aqui comienza el encabezado estatico -->"; 
echo "<div class='menustatic'>"; 
echo "<div id='logocontraste'><img src='images/logocontraste.bmp' width='90' height='27'></div>"; 
echo "<div id= 'buscador'>"; 
echo "<form action='#' method='post'>"; 
echo "<input type='text' class='campostextocuerpo'><input type='button' class='boton' value='Buscar'>"; 
echo "</form>"; 
echo "</div>*"; 
echo "<div class='enlacesprimarios'>"; 
echo "<ul>"; 
echo "<li><a href='#'>|&nbsp;Acerca de&nbsp;|&nbsp;</a></li>"; 
echo "<li><a href='#'>|&nbsp;Ayuda&nbsp;|&nbsp;&nbsp;</a></li>"; 
echo "</ul>"; 
echo "</div>"; 
echo "</div>"; 
echo "<!--este es el cuerpo exterior de la pagina mas angosto que el body -->"; 
echo "<div id='cuerpoext'>"; 
echo "<br>"; 
echo "<br>"; 
echo "<br>"; 
echo "<div id='cuerpoint'>"; 
echo "<form action='#' method='post'enctype='multipart/form-data'>"; 
echo "<div><img src='images/user.png' class='cvi_glossy'/></div><!-- capa de la foto lateral-->"; 
echo "</form>"; 
echo "</div> <!-- fin capa interior-->"; 
echo "<br>"; 
echo "</div><!--fin capa exterior-->"; 
echo "<!-- este es el pie de pagina -->"; 
echo "<div class='menustatic'>"; 
echo "<div id='producto'>Sistema Planificador de Proyectos Personales</div>"; 
echo "<div id='version'>Home Edition v.1.0&nbsp;&nbsp;Fukushi &copy 2012 por Brian Serrano Satizabal</div>"; 
echo "<div class='enlacesprimarios'>"; 
echo "<ul>"; 
echo "<li><a href='#'><img src='images/facebook_logo.png' width='20' height='20' class='imagenselec'>&nbsp;</a></li>"; 
echo "<li><a href='#'><img src='images/logo_twitter.PNG' width='20' height='20' class='imagenselec'></a></li>"; 
echo "<li><a href='#'>&nbsp;|&nbsp;T&eacute;rminos Y Condiciones&nbsp;|&nbsp;</a></li>"; 
echo "</ul>"; 
echo "</div>"; 
echo "</div>"; 
echo "</body>"; 
echo "</html>"; 
?>

Ahora para que te tome el css prueba a poner el link completo del css es decir: http://miurl.com/css/nombre.css

eso primero asegurandote de que el navegador abre esa url de donde subiste el css, si hereda el codigo en el php lo mas seguro es que hayas puesto entonces mal la ubicacion de tu css

en esa parte creo que que estas mal amigo hasta donde yo se si puedes leer html no es necesario que lo pongas dentro de las lineas php y dos apoyo la idea de que puede ser del servidor no se me ocurre otra cosa .

Rafael · #10 (**permalink**) 14/03/2012, 16:45

Rikimm tiene razón. No necesitas ponerle echo. En realidad ese código no trae nada de php que procesar.

Y lo del servidor me suena ilógico que no procese directo un archivo php. Probablemente tu plan de hosting no incluye procesar php por ser un paquete básico o gratis.

emprear · #11 (**permalink**) 14/03/2012, 20:08

Cita:

Iniciado por deywibkiss

ok. No solo he notado que pasa con lo del formulario sino con los scripts....

En el ejemplo siguiente, tengo una pagina del sitio web donde deseo ponerle uno de los efectos de glossy.js a una imagen para que se vea cristalizada. No lo consigo si guardo el archivo como .php No se si mi navegador necesite una activacion especial de algo pero lo pruebo con todos los navegadores y no consigo el resultado...

aqui el codigo del sitio con extension .php:

.....

Y si este mismo codigo lo guardo como .html me funciona todo!!! Lo que quiero es encontrar el error o la forma para poder usar archivos en mi web .php y que se ejecuten estilos css3 html5 y javascript sin ningun problema

Si no modificaste ningún archivo de configuración de xampp, ese archivo, tal cual está, lo guardes como php o como html, se te tiene que ejecutar de la misma manera

hacer esto

Código PHP:

Ver original<?php 
echo "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>";
 echo "<html xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://ogp.me/ns/fb#'>";
 echo "<head>"; 
echo "<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />";

Es completamente descabellado, en tu caso en particular.

Para mi se te está pasando algún detalle en la información que das
Saludos

daPhyre · #12 (**permalink**) 17/03/2012, 00:10

Hagamos una prueba rápida.

Escribe estas líneas en un archivo php y ábrelo desde el servidor:

Código PHP:

  <?php 
 phpinfo();
?>

Si todo funciona correctamente, se mostrará toda la información que necesitas para asegurarte que todos los módulos están correctos. Si no muestra nada, o intenta descargarlo, significa que tu servidor no puede procesar archivos PHP, y entonces hay que ver si los admite, y si no hay nada mal configurado. Suerte

emprear · #13 (**permalink**) 17/03/2012, 07:06

@daPhyre
Eso no es definitivo, muchos servidores compartidos, tienen incluida phpinfo() es su lista de "disable_functions"
Podria ejecutar algo asi

Código PHP:

Ver original<?php
header("content-type:text/html; charset=utf-8");
session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Información </title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
 
* {
font-family: verdana, serif;
font-size: 10pt;
}
 
h3 {
font-size: 12pt;
}
</style>
</head>
<body>
<?php
echo "<h1 style='font-size: 18pt;'>Información sobre instalación de php</h1>\n";
echo "<h2 style='font-size: 16pt;'>Versión de PHP \n";
echo phpversion();
echo "</h2>\n";
echo "<hr />\n<div>\n";
echo "<h2 style='font-size: 16pt;'>Extensiones cargadas</h2>\n<pre>\n";
print_r(get_loaded_extensions());
echo "</pre>";
echo "<h2 style='font-size: 16pt;'>Variables del servidor</h2>\n";
echo "<div style='white-space: pre-line;width: 90%; padding: 15px; border:dotted 1px #530000;'>";
debug();
echo "</div>";
echo "<h2 style='font-size: 16pt;'>Valores de phph.ini</h2>\n";
$var_uno = ini_get_all("pcre");
$var_dos = ini_get_all();
echo "<textarea cols='150' rows='30' style='width: 90%; height: 300px; color:#002200;border:dotted 1px #002200;'>";
print_r($var_uno);
print_r($var_dos);
echo "
</textarea>
<pre style='color: darkblue; font-weight: 900;'>
 
Constante                   Valor           Modificable
PHP_INI_USER                1           La entrada puede ser modificada en las scripts de usuario
PHP_INI_PERDIR              2           La entrada puede ser modificada en php.ini, .htaccess o httpd.conf 
PHP_INI_SYSTEM              4           La entrada puede ser modificada en php.ini o httpd.conf 
PHP_INI_ALL                 7           La entrada puede ser modificada por cualquiera 
 
 
";
 
echo 'display_errors = ' . ini_get('display_errors') . "\n";
echo 'register_globals = ' . ini_get('register_globals') . "\n";
echo 'post_max_size = ' . ini_get('post_max_size') . "\n";
echo 'post_max_size+1 = ' . (ini_get('post_max_size')+1) . "\n";
echo 'post_max_size in bytes = ' . devuelve_bytes(ini_get('post_max_size'));
 
function devuelve_bytes($val) {
    $val = trim($val);
    $last = strtolower($val[strlen($val)-1]);
    switch($last) {
        // 
        case 'g':
            $val *= 1024;
        case 'm':
            $val *= 1024;
        case 'k':
            $val *= 1024;
    }
    return $val;
}
?>
</pre>
</div>
</body>
</html>
<?php
 
########################################
function debug(){
//echo "\n\n\n<!-- variables \n";
echo "_SERVER\n";
foreach ($_SERVER as $indice=>$str){
$$indice =  $str ;
echo "$indice = ". htmlentities($str) . "\n";
}
echo "_POST\n";
foreach ($_POST as $indice=>$str){
$$indice =  $str ;
echo "$indice = $str \n";
}
echo "_GET\n";
foreach ($_GET as $indice=>$str){
$$indice =  $str ;
echo "$indice = $str \n";
}
echo "_COOKIE\n";
foreach ($_COOKIE as $indice=>$str){
$$indice =  $str ;
echo "$indice = $str \n";
}
echo "_SESSION\n";
foreach ($_SESSION as $indice=>$str){
$$indice =  $str ;
echo "$indice = $str \n";
}
//echo "-->";
}
?>

Saludos

Rafael · #14 (**permalink**) 17/03/2012, 09:15

Vamos a vernos exigentes ahora con el script de prueba.

Supongo que le hace falta una sección de "control" o sea que se pueda ver un poquito de html para que a simple vista se note que el documento cargó.

Un simple

Código HTML:

Ver original<h1>El documento de prueba ha cargado</h1>
<p>Vamos a revisar si el código php es procesado</p>

¿no?

emprear · #15 (**permalink**) 17/03/2012, 09:51

En realidad como los encabezados están definidos fuera del php

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Información </title>

Con tan solo ver el título, bastaría
ó simplemente, ver el código fuente generado donde apareceran <body></body>
Saludos

daPhyre · #16 (**permalink**) 19/03/2012, 00:03

Hmm... No contaba con el disable_functions

En dado caso, quizá una prueba tan básica somo funcional sería:

Código PHP:

 
<h1><?php echo 2+2; ?></h1>

Eso debe mostrar se forma simple y concreta si funciona o no, ¿No?

emprear · #17 (**permalink**) 19/03/2012, 00:19

Cita:

Iniciado por daPhyre

Hmm... No contaba con el disable_functions

En dado caso, quizá una prueba tan básica somo funcional sería:

Código PHP:

 
<h1><?php echo 2+2; ?></h1>

Eso debe mostrar se forma simple y concreta si funciona o no, ¿No?

Si, tan solo con la archiconocida

<?php
echo "Hola mundo";
?>

Podés saber si se esta procesando con php, la mia fue una respuesta un poco exagerada al phpinfo().
Me pregunto si habrá iniciado el server?
Saludos