viernes, 25 de agosto de 2017

Agosto 23 /2017

Agosto 23 /2017

Clase N° 30

ACUMULATIVO!!!

El docente creo un servidor en el cuál se encontraba una carpeta llamada "base" la cual debíamos copiar y pegar ya que allí se encontraba el index.php y saludos.php, en el "index" se encontraba una caja de texto y un botón y en "saludos" se encontraba los saludos hacia la persona.

Debíamos modificar estos archivos de forma que=

  • Debía tener un template.
  • Una caja de selección.
  • Un botón.
-Si en la caja se seleccionaba "a" debía mostrar la información de Augusta Ada Lovelace.

-Si en la caja se seleccionaba "b" debía mostrar la información de Charles Babbage. 

-Si en la caja se seleccionaba "x" debía mostrar la información de derechos, la cuál debía contener todo lo especificado en anteriores publicaciones, agregándole el vínculo hacia el blog. (de esta forma se hizo calificación del blog).


SERVIDOR:

      Usuario: trax
      Dominio: se deja igual
      Clave: coinsda


NOTA: Estos dos archivos (index.php y saludos.php) debían estar contenidos dentro de una carpeta llamada "acumulativo_primer apellido_#lista_10a" .
Ejemplo: acumulativo_barajas_04_10a

martes, 22 de agosto de 2017

PROYECTO (con tablas)

resultado.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_04_10a</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Resultado</a></h2>
      <p>
    <br><br>
    <?php
$numero =$_POST['numero'];
$funcion =$_POST['funcion'];




/*if ($funcion == "seno"){
   echo "<font color='#330033'><h2>Seno</h2></font>";
    }
 
   else{

    if($funcion == "coseno"){
      echo "<font color='#330033'><h2>Coseno</h2></font>";
     }
     else{

      if($funcion == "tangente"){
        echo "<font color='#330033'><h2>Tangente</h2></font>";

       }

       else{

        if($funcion == "arco_de_tangente"){
          echo "<font color='#330033'><h2>Arco de Tangente</h2></font>";
         }

         else{

          if($funcion == "tangente_hiperbolica"){

            echo "<font color='#330033'><h2>Tangente Hiperbolica</h2></font>";
            }
         
          else{

            echo "<font color='#330033'><h2>Raiz Cuadrada</h2></font>";


              }


              }



            }

          }
       
        }


echo "<br>";*/





 
   if ($funcion == "seno"){

    $name="Seno";
     $rta="<u>Rta</u>: ".(sin($numero));

   }
   else{

    if($funcion == "coseno"){

      $name="Coseno";
      $rta="<u>Rta</u>: ".(cos($numero));
     }
     else{


      if($funcion == "tangente"){

        $name="Tangente";
        $rta="<u>Rta</u>: ".(tan($numero));

       }

       else{

        if($funcion == "arco_de_tangente"){

          $name="Arco de Tangente";
          $rta="<u>Rta</u>: ".(atan($numero));
         }

         else{

          if($funcion == "tangente_hiperbolica"){

            $name="Tangente Hiperbolica";
            $rta="<u>Rta</u>: ".(tanh($numero));


          }
          else{ //echo(sqrt($numero));

            if($funcion == "raiz_cuadrada" && $numero>=0){

              $name="Raiz Cuadrada";
              $rta="<u>Rta</u>: ".(sqrt($numero));

            }

              else{
                $validar=($numero*(-1));

                $name="Raiz Cuadrada";
                $rta="<u>Rta</u>: "."Raiz imaginaria de ".$numero." es: ".(sqrt($validar));
              }

              }


              }



            }





          }






         }


echo "<table height:'300px'>";

echo "<tr >";
echo "<td>";
echo "<font color='#330033' size='6'>".$name."</font>"."<br>";
echo "</td>";
echo "</tr>";

echo "<tr>";
echo "<td>";
echo  "<br>".$rta;
echo "</td>";
echo "</tr>";

echo "</table>";



  ?>

     </p>
      <br />
   
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
         <li><a href="index.php">Inicio</a></li>
          <li><a href="resultado.php">Resultado</a></li>
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
   
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>


NOTA: index.php y derechos.php quedan exactamente igual.

CLICK AQUÍ PARA DESCARGAR LA CARPETA CON TODOS LOS ARCHIVOS!!!

sábado, 19 de agosto de 2017

PROYECTO 2 (TERMINADO)!!!

ESPECIFICACIONES DEL PROYECTO SE ENCUENTRAN EN LA PUBLICACIÓN DEL 16 DE AGOSTO DEL 2017...

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_04_10a</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Inicio</a></h2>
      <p>

      <script>

      function validar(){

        var numero=document.getElementById("numero").value;
        var funcion=document.getElementById("funcion").value;


        if(numero.length!=0){

          if(funcion!=""){

            if(!isNaN(numero)){

             document.getElementById("formulario").submit();
           }
           else{ alert("En el espacio destinado para numero solo se pueden digitar valores numericos.");}

           }
           else{ alert("Debe seleccionar una opción de función para poder realizar la operacion.");}

         }

         else{ alert("Debe digitar en el espacio de numero (solo valores numericos)");}

          }



      </script>


    
    
    <form id="formulario" name="formulario" method="post" action="resultado.php"  >
  <br>
  <p><b>Ingrese el numero por favor:</b><br><br>
    <input type="text" name="numero" id="numero" autocomplete="off"/>
  </p>
<br><br><br>
<p><b>Escoja la funcion que quiere realizar:</b><br><br>
  <select id="funcion" name="funcion" autocomplete="off">
   <option value="" selected>Seleccione una opci&oacute;n</option>
   <option value="seno"> seno </option>
   <option value="coseno"> coseno </option>  
   <option value="tangente"> tangente </option>
   <option value="arco_de_tangente"> arco de tangente </option>
   <option value="tangente_hiperbolica"> tangente hiperbolica </option>
   <option value="raiz_cuadrada"> raiz cuadrada </option>
 
  </select>
  </p><br><br><br>

  <p>
    <input type="button" onclick="validar()" value="CALCULAR">
  </p>

</form>

 
</p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
            <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>

resultado.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_04_10a</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Resultado</a></h2>
      <p>
    <br><br>
    <?php
$numero =$_POST['numero'];
$funcion =$_POST['funcion'];




if ($funcion == "seno"){
   echo "<font color='#330033'><h2>Seno</h2></font>";
    }
   
   else{

    if($funcion == "coseno"){
      echo "<font color='#330033'><h2>Coseno</h2></font>";
     }
     else{

      if($funcion == "tangente"){
        echo "<font color='#330033'><h2>Tangente</h2></font>";

       }

       else{ 

        if($funcion == "arco_de_tangente"){
          echo "<font color='#330033'><h2>Arco de Tangente</h2></font>";
         }

         else{ 

          if($funcion == "tangente_hiperbolica"){

            echo "<font color='#330033'><h2>Tangente Hiperbolica</h2></font>";
            }
          
          else{ 

            echo "<font color='#330033'><h2>Raiz Cuadrada</h2></font>";


              }


              }



            }

          }
        
        }


echo "<br>";

 
   
   if ($funcion == "seno"){
   echo "<u>Rta</u>: ".(sin($numero));

   }
   else{

    if($funcion == "coseno"){
      echo "<u>Rta</u>: ".(cos($numero));
     }
     else{

      if($funcion == "tangente"){
        echo "<u>Rta</u>: ".(tan($numero));

       }

       else{ 

        if($funcion == "arco_de_tangente"){
          echo "<u>Rta</u>: ".(atan($numero));
         }

         else{ 

          if($funcion == "tangente_hiperbolica"){

            echo "<u>Rta</u>: ".(tanh($numero));


          }
          else{ //echo(sqrt($numero));

            if($funcion == "raiz_cuadrada" && $numero>=0){

              echo "<u>Rta</u>: ".(sqrt($numero));

            }

              else{
                $validar=($numero*(-1));


                echo "<u>Rta</u>: "."Raiz imaginaria de ".$numero." es: ".(sqrt($validar));
              }

              }


              }



            }





          }






         }





  ?>
 
     </p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
         <li><a href="index.php">Inicio</a></li>
          <li><a href="resultado.php">Resultado</a></li>
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>

derechos.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_04_10a</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>
<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Derechos</a></h2>
      <br><br>
      <p>
    <center><img src="img.jpg" width="100px"></center>
    <br><br>
    <center>
<b>Angela Sofía Barajas Ochoa</b><br><br>
 <b>Grado:</b> 10A<br><br>
 <b>Sala:</b> Biling&uuml;ismo<br><br>
 <b>Presentado a:</b> Nelson Enrique Peña Ferrei<br><br>
 Colegio Integrado Nuestra Señora Del Divino Amor<br><br>
</center>
    
</p>

</p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
           <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
         <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>


NOTA: 
  • Las modificaciones realizadas en index.php y derechos .php fueron mínimas, la única fue el cambio de el <title>barajas_04_10a</title>.

  • Las modificaciones realizadas en resultado.php fue un ; y un } para permitir el funcionamiento de la validación de un número negativo en la raíz cuadrada.
  • Al igual la sentencia if para que saliera el nombre de la función escogida al momento de mostrar el resultado.



viernes, 18 de agosto de 2017

Agosto 16 /2017

Agosto 16 /2017

Clase Nº 30


Se inició y se terminó el segundo proyecto, el cual constaba de:

  • Tener un template totalmente limpio con 3 módulos (inicio, resultado, derechos).
  • derechos.php: debe contener nombre completo, nombre de la persona a presentar, colegio, sala donde se presentó el proyecto, grado, y una foto del estudiante.

Crear aplicación donde:

  • Haya una caja llamada "número", esta debe ser obligatoria y solo debe aceptar números.
  • Una caja de selección llamada "función" donde debe ser obligatoria la selección de una opción. Conteniendo las siguientes opciones: seno, coseno, tangente, arco de tangente, tangente hiperbólica, raíz cuadrada. NOTA: La opción de raíz cuadrada debe estar validada para poder realizar la operación con números negativos.
  • Botón con un value de "calcular".
Al oprimir el botón debe:

crear una tabla con dos filas, en la fila superior debe aparecer la opción que se escogió en la caja de selección llamada función.
y en la segunda fila debe aparecer la respuesta de la operación igualmente depende el número que ingresó y la opción que escogió.

  • El archivo debe llamarse primerapellido_#lista_10a
  • Se debía comprimir el archivo del proyecto en formato.zip, y enviarselo al docente vía gmail.

PROYECTO ENVIADO EL DÍA DE LA PRUEBA

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Manuscript Free Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Inicio</a></h2>
      <p>

      <script>

      function validar(){

        var numero=document.getElementById("numero").value;
        var funcion=document.getElementById("funcion").value;


        if(numero.length!=0){

          if(funcion!=""){

            if(!isNaN(numero)){

             document.getElementById("formulario").submit();
           }
           else{ alert("En el espacio destinado para numero solo se pueden digitar valores numericos.");}

           }
           else{ alert("Debe seleccionar una opción de función para poder realizar la operacion.");}

         }

         else{ alert("Debe digitar en el espacio de numero (solo valores numericos)");}

          }



      </script>


    
    
    <form id="formulario" name="formulario" method="post" action="resultado.php"  >
  <br>
  <p><b>Ingrese el numero por favor:</b><br><br>
    <input type="text" name="numero" id="numero" autocomplete="off"/>
  </p>
<br><br><br>
<p><b>Escoja la funcion que quiere realizar:</b><br><br>
  <select id="funcion" name="funcion" autocomplete="off">
   <option value="" selected>Seleccione una opci&oacute;n</option>
   <option value="seno"> seno </option>
   <option value="coseno"> coseno </option>  
   <option value="tangente"> tangente </option>
   <option value="arco_de_tangente"> arco de tangente </option>
   <option value="tangente_hiperbolica"> tangente hiperbolica </option>
   <option value="raiz_cuadrada"> raiz cuadrada </option>
 
  </select>
  </p><br><br><br>

  <p>
    <input type="button" onclick="validar()" value="CALCULAR">
  </p>

</form>

 
</p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
            <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>

resultado.php

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Manuscript Free Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Resultado</a></h2>
      <p>
    
    <?php
$numero =$_POST['numero'];
$funcion =$_POST['funcion'];
 
   if ($funcion == "seno"){
   echo (sin($numero));

   }
   else{

    if($funcion == "coseno"){
      echo (cos($numero));
     }
     else{

      if($funcion == "tangente"){
        echo (tan($numero));

       }

       else{ 

        if($funcion == "arco_de_tangente"){
          echo (atan($numero));
         }

         else{ 

          if($funcion == "tangente_hiperbolica"){

            echo (tanh($numero));


          }
          else{ echo(sqrt($numero));

            /*if($funcion == "raiz_cuadrada" && $numero>=0){

              echo (sqrt($numero));

            }

              else{
                $validar=($numero*-1)


                echo "raiz imaginaria".(sqrt($validar));*/

              }


              }



            }

       }

 }

 ?>
 
     </p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
         <li><a href="index.php">Inicio</a></li>
          <li><a href="resultado.php">Resultado</a></li>
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>

derechos.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Manuscript Free Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>
<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Derechos</a></h2>
      <br><br>
      <p>
    <center><img src="img.jpg" width="100px"></center>
    <br><br>
    <center>
<b>Angela Sofía Barajas Ochoa</b><br><br>
 <b>Grado:</b> 10A<br><br>
 <b>Sala:</b> Biling&uuml;ismo<br><br>
 <b>Presentado a:</b> Nelson Enrique Peña Ferrei<br><br>
 Colegio Integrado Nuestra Señora Del Divino Amor<br><br>
</center>
    
</p>

</p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
           <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
         <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>
















martes, 15 de agosto de 2017

Validaciones

VALIDACIÓN CON HTML5

http://html5facil.com/tutoriales/validacion-formularios-nativos-html5/


https://lenguajehtml.com/p/html/formularios/validaciones-html5


https://www.adictosaltrabajo.com/tutoriales/validacion-lado-cliente-con-html5/


http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=508:hipervinculos-links-o-enlaces-html-etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-cu00717b&catid=69&Itemid=192


http://librosweb.es/libro/javascript/capitulo_7/validacion.html





VALIDACIÓN CON JAVASCRIPT



PROYECTO 1

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_10a_04</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Inicio</a></h2>
      <p>
 

    <script>

    var letras= /[^a-zA-ZáéíóúÁÉÍÓÚñÑ ]/;

function validar(){

var codigo=document.getElementById("codigo").value;
var nombre=document.getElementById("nombre").value;
var grado=document.getElementById("grado").value;
var texto=document.getElementById("texto").value;
var OK = letras.test(document.getElementById('nombre').value);

if(codigo.length!=0){
  if (nombre.length!=0){
    if (texto.length!=0){
      if(grado!=""){
        if(codigo.length == 15){
          if(!OK){
            if(texto.length >= 10){

              document.getElementById("form1").submit();

            }
            else{ alert("En la caja de texto debe ingresar mínimo 10 caracteres.")}
          }
          else{ alert("El nombre no es valido, debe ingresar solo letras.")}

          }
        else{ alert("En el espacio para código solo pueden ser ingresados exactamente 15 dígitos.")}
      }
      else{ alert("Debe seleccionar una opción de grado.");}
    }
    else{ alert("Debe digitar en el espacio para texto (mínimo 10 caracteres).");}
  }
  else{ alert("Debe digitar en el espacio para nombre (letras).");}
}
else{ alert("Debe digitar en el espacio para código (15 dígitos).");}

}
  </script>

   <form id="form1" name="form1" method="post" action="resultado.php">
  <br>
  <p><b>Ingrese el codigo por favor:</b><br><br>
    <input type="text" name="codigo" id="codigo" autocomplete="off"/>
  </p>
<br>
  <p><b>Ingrese su nombre:</b><br><br>
      <input type="text" name="nombre" id="nombre" autocomplete="off"/>
  </p>
<br>
  <p><b>Escoja la clase a la que pertenece:</b><br><br>
  <select id="grado" name="grado" autocomplete="off">
   <option value="" selected>Seleccione una opci&oacute;n</option>
   <option value="10a"> Grado 10a </option>
   <option value="10b"> Grado 10b </option>

  </select>
  </p><br>
  <p><b>Ingrese el texto:</b><br><br>
      <textarea rows="5" cols="30" id="texto" name="texto" value="" autocomplete="off" placeholder="Digite mínimo 10 caracteres!!!"></textarea>
  </p><br>

<p>
    <input type="button" onclick="validar()" value="ENVIAR">
  </p>
</form>


     </p>
      <br />
   
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
          <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
 
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>

</html>


resultado.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_10a_04</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
      <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Resultado</a></h2>
      <p>

    <?php
$codigo =$_POST['codigo'];
$nombre =$_POST['nombre'];
$grado =$_POST['grado'];
$texto =$_POST['texto'];

$palabras=(str_word_count($texto, 1));
$ultimo= (count($palabras));

if ($grado == "10a")
   {
    $caracteres = strlen($texto);
    $mitad1= substr($texto, 0, (($caracteres/2)));
    $mitad2= substr($texto, (($caracteres/2)));

    echo "<font color='#00cc00'><u>".$mitad1."</font></u>"."<font color='#0000ff'><s>".$mitad2."</font></s>";
  }
  else{
    $lcapital = ucwords($texto);
    echo $lcapital."<br>";

              if($ultimo!=0){
                echo "<hr> <center>".$palabras[$ultimo-1]."</center><hr>";
              }
              else{
                echo "<hr><center> no hay palabras que mostrar</center> <hr>";
              }

  }

    ?>
     </p>
      <br />
   
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
          <li><a href="index.php">Inicio</a></li>
          <li><a href="resultado.php">Resultado</a></li>
          <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
 
  </div>
  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>

</html>


derechos.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>barajas_10a_04</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "images/style.css";
</style>
</head>
<body>

<div class="content">
  <div id="header">
    <div class="title">
     <h1>Proyecto</h1>
      <h3>2017</h3>
    </div>
  </div>
  <div id="main">
    <div class="center">
      <h2><a href="#">Derechos</a></h2>
      <br><br>
      <p>
    
    <center><img src="img.jpg" width="100px"></center>
<br><br>
<center>
<b>Angela Sofía Barajas Ochoa</b><br><br>
 <b>Grado:</b> 10A<br><br>
 <b>Sala:</b> Biling&uuml;ismo<br><br>
 <b>Presentado a:</b> Nelson Enrique Peña Ferrei<br><br>
 Colegio Integrado Nuestra Señora Del Divino Amor<br><br>
</center>
  </li>
</p>

</p>
      <br />
     
      <br />
    </div>
    <div class="leftmenu">
      <div class="nav">
        <ul>
          <li><a href="index.php">Inicio</a></li>
          <!--<li><a href="resultado.php">Resultado</a></li>-->
      <li><a href="derechos.php">Derechos</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="prefooter">
    
  </div>



  <div id="footer">
    <div class="padding"> Copyright &copy; 2006 Your Site Name | Design: <a href="http://www.free-css-templates.com">David Herreman </a> | <a href="#">Contact</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://www.solucija.com">Solucija.com</a> | <a href="#">Login</a> </div>
  </div>
</div>
</body>
</html>


link para descargar la carpeta completa: DESCARGAR AQUÍ

viernes, 11 de agosto de 2017

Agosto 9 /2017

Agosto 9 /2017

Clase N° 29

Se inicia la realización de un proyecto. 

  • El sitio web debe ser llamado= primerapellido_10a_#lista
  • Hacer uso de un template, el cuál debe tener el mismo diseño para todos los módulos que van a ser usados.
  • Debe existir un archivo llamado: derechos.php, el cuál debe contener nombres y apellidos, grado al que se pertenece, a quien se lo estamos presentando, sala, colegio y una foto del estudiante.
  • No puede existir ningún archivo .html
  • Crear: 
- 2 cajas de texto, una caja de selección, una textarea y un botón.

Primera caja de texto= debe tener el título de "código" y debe tener el símbolo "*" para indicar que es obligatorio. Debe tener exactamente 15 dígitos, no puede admitir más o menos de esto.

Segunda caja de texto= debe tener el título de "nombre"  y debe tener el símbolo "*" para indicar que es obligatorio. Debe estar validado para que solo se permita escribir letras y no números.

Caja de selección= debe tener el título de "clase" y debe tener dos opciones, 10a y 10b.

Textarea= debe tener el título de "texto",  y debe tener el símbolo "*" para indicar que es obligatorio. Deben ser digitados mínimo 10 caracteres.

Botón= debe estar llamado como "enviar"


  • Las que estén con el símbolo "*" se debe validar para que no se pueda enviar la información si esta vacío.

FUNCIÓN DEL CÓDIGO PHP

  • Si el texto es de 10a: la mitad del texto debe ser color verde y subrayado, y la otra mitad debe ser de color azul y tachado.

  • Si el texto es de 10b: el texto debe aparecer en letra capital (todo). Y adicional aplicar un <hr>visualizar la última palabra del texto<hr>
               es decir quedaría: 


palabra



Nota: a causa de que nadie logró terminar el proyecto en el tiempo estipulado, la próxima clase se va a iniciar un nuevo proyecto para el cual se va a disponer de una hora.

martes, 8 de agosto de 2017

TEMPLATE






EJERCICIOS VARIOS PHP/JAVASCRIPT/HTML












SUMA DE DOS NÚMEROS EN PHP

HTML= 

<!DOCTYPE HTML>
<html lang="es-ES">
<head>
 <meta charset="UTF-8">
 <title>Suma de 2 numeros en PHP</title>
</head>
<body>
<H2>Suma de 2 numeros en PHP</H2>
<form action="suma.php" method="POST">
 <table>
 <tr>
  <td><input type="text" name="numero1"></td>
 </tr>
 <tr>
  <td><input type="text" name="numero2"></td>
 </tr>
 <tr>
  <td> <input type="submit" value="sumar"> </td>
 </tr>
</table>
</form>
</body>
</html>

PHP= 
<?php
 if($_POST)
 { 
  $num1 = $_POST
  ['numero1'];
  $num2 = $_POST
  ['numero2'];
  $suma = $num1 
  + $num2;
  echo "La suma de ".$num1." y ".$num2." es ".$suma; 
 }
?>


Tomado de: http://codigos-taz.blogspot.com.co/2013/01/como-sumar-dos-numeros-en-php-asp-jsp.html

CREAR UNA PLANTILLA CON INCLUDES EN PHP

Cómo crear una plantilla en PHP y hacer un sitio homogéneo utilizando sencillos includes.
Vamos a comenzar introduciendo a que nos referimos con plantilla. Una plantilla va a ser un portada genérica para nuestra web, que solo contendrá los menus y elemenos indispensables que además mostraremos en todas las páginas por igual.

¿Para qué queremos esto?

Pues esto nos puede ser sumamente util en algunos casos por dos motivos.
1. Teniendo una plantilla conseguimos un codigo más limpio, ya que los marcos y todo lo que engloba al diseño general pueden ir engoblados en un solo archivo, de modo que cualquier modificicación se puede hacer sobre este mismo archivo afectando de manera inmediata al resto de las páginas. Además de ahorrarnos mucho trabajo ;)
2. Conseguimos una web más uniforme, de modo que el usuario no sé perderá entre diferentes secciones llenas de menús que puedan hacer engorrosa la navegabilidad.

Comencemos

Nuestro código va a ser sumamente simple, para empezar crearemos una tabla que no servirá como marco donde deberemos poner nuestros logotipos, menus, publicidad,.. y lo más importante, el contenido.
Lo que diferencia una plantilla de una página normal, es que el contenido lo vamos a generar de otra forma, vamos a ver como queda inicialmente lo que hemos hecho hasta ahora:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Plantilla en PHP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="3"><div align="right">Logotipo y Titulo</div></td> 
</tr> 
<tr> 
<td width="20%"><p>Menu principal</p> 
<ul> 
<li><a href="">Sección 1 </a></li> 
<li><a href="">Sección 2 </a></li> 
<li><a href="">Sección 3 </a></li> 
</ul></td> 
<td colspan="2" valign="top"> 
Aquí irá el contenido 
</td> 
</tr> 
<tr> 
<td colspan="3">Pie de página </td> 
</tr> 
</table> 
</body> 
</html>
Ya tenemos lista la primera parte, ahora veamos como vamos a utilizar el PHP para poder introducir contenido dentro de esta plantilla.
Para ello vamos a utilizar la función include de PHP. Esta nos permite introducir una página dentro de otra con tan solo indicarle la ruta del archivo, así utilizaremos una variables (que pasaremos por URL) para indicar a que sección queremos acceder.
Por ejemplo, si utilizamos una variable llamada $sec por ejemplo podriamos acceder a una sección utilizando el link "?sec=seccion1", de modo que a continuación en nuestro código y para evitar fallos innecesarios comprobaremos que el archivo 1.html/ 1.htm/ 1.php/... existe y en tal caso lo incluiremos.
Veamos a contianuación el código:
<?php 
if(empty($sec)) 

include("presentacion.html"); 

else 

if(file_exists($sec.".php")) 
include($sec.".php"); 
elseif(file_exists($sec.".html")) 
include($sec.".html"); 
else 
echo 'Perdón pero la página solicitada no existe'; 

?>
En este caso hemos comprobado solo si existe el archivo "1.html" y "1.php".
Pero ¡cuidado con este código!, ya que en el caso de que tengamos ambos archivos en nuestro servidor siempre se mostrará el ".php" ya que es el primero que aparece.
De este modo conseguimos finalmente un fichero con la siguiente forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Plantilla en PHP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 

<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="3"><div align="right">Logotipo y Titulo</div></td> 
</tr> 
<tr> 
<td width="20%"><p>Menu principal</p> 
<ul> 
<li><a href="?sec=1">Secci&oacute;n 1 </a></li> 
<li><a href="?sec=2">Secci&oacute;n 2 </a></li> 
<li><a href="?sec=3">Secci&oacute;n 3 </a></li> 
</ul></td> 
<td colspan="2" valign="top"> 
<?php 
if(empty($sec)) 

include("presentacion.html"); 

else 

if(file_exists($sec.".php")) 
include($sec.".php"); 
elseif(file_exists($sec.".html")) 
include($sec.".html"); 
else 
echo 'Perdón pero la página solicitada no existe'; 

?> 
</td> 
</tr> 
<tr> 
<td colspan="3">Pie de p&aacute;gina </td> 
</tr> 
</table> 
</body> 
</html> 

Aquí podeis ver el ejemplo, en él existen 3 archivos, el index.php que será nuestra plantilla, 1.php que será una de nuestras secciones, 2.html que será otra de nuestras secciones y el link a la sección tres la hemos dejado que apunte a un archivo que aun no hemos creado para comprobar que nuestra funcion file_exists funciona correctamente.
Bueno y solo comentar un pequeño detalle más, debeis tener cuidado con las páginas que incluis dentro de otras, ya que las cabeceras y los tags van dentro de nuestro index.php, si incluis un archivo con cabeceras dentro de otro creareis un mal código html, que posiblemente no tenga mucho efecto en el visitante pero sí será un obstaculo para encontrar posibles errores o simplemente para leer vuestro propio codigo.

TIPOS DE VARIABLES EN PHP

VARIABLES EN PHP
Las variables en PHP son representadas con un signo de dólar ($) seguido por el nombre de la variable. El nombre de la variable es sensible a minúsculas y mayúsculas. Es decir, las siguientes declaraciones de variables son distintas entre ellas:

$variable, $Variable, $variAble, $VariAble, etc. representan a distintas variables.
Recordar que una variable es un espacio de la memoria del ordenador (en este caso del servidor) a la que asignamos un contenido que a grandes rasgos puede ser un valor numérico (sólo números, con su valor de cálculo) o alfanumérico (sólo texto o texto con números, sin valor de cálculo).
Para declarar un nombre de variable válido, éste tiene que empezar con una letra (o si no empieza con una letra, tendrá que hacerlo con un carácter de subrayado), seguido de cualquier número de letras, números y caracteres de subrayado, sin espacios. Veamos algunos ejemplos:
Posible nombre de variable
Validez
$4variable
Nombre de variable inválido.
$_4variable
Nombre de variable válido.
$variable4
Nombre de variable válido.
$otra
Nombre de variable válido.
$1_otra
Nombre de variable inválido.
$variable_de_nombre_muy_largo
Nombre de variable válido.
$ABC
Nombre de variable válido.
$ A B C
Nombre de variable inválido.
$A_y_B_x_C
Nombre de variable válido.


Cuando el intérprete PHP detecta un error en la sintaxis al declarar una variable, cuando tratamos de accecer a la página php nos aparecerá un mensaje de error. Por ejemplo si en un archivo php incluimos una línea como $ A B C = 5; donde el nombre de variable es inválido ya que tiene espacios intermedios, nos aparecerá un mensaje de error:
Parse error: syntax error, unexpected T_STRING, expecting T_VARIABLE or '$' in /home/miraiz/domains/midominio.com/public_html/prueba.php on line 3. Este mensaje nos informa de que hay un problema en el archivo php y nos indica la línea donde el intérprete considera que está el problema.


DIFERENCIAS ENTRE LOS OPERADORES DE ASIGNACIÓN E IGUALDAD. ASIGNACIÓN (=)
El operador de asignación es "=". Se podría pensar que es como un "igual a". No lo es. El operador igual en programación no tiene el mismo sentido que en matemáticas. En programación, significa que el valor de la expresión de la derecha se establece en el operando de la izquierda.
Fíjate en este ejemplo y en los comentarios.
<?php
$a = 3; // asignamos el valor 3 a la variable $a
$b = "cadena"; // asignamos el valor "cadena" a la variable $b

?>


OPERADOR DE IGUALDAD (==)
El operador comparador de igualdad es ==. Como su propio nombre indica, sirve para comparar dos valores o variables y no para asignar valores. Este operador devuelve el resultado de la operación lógica de 'igual a' tal y como podemos apreciar en el siguiente ejemplo.
Fíjate en este ejemplo y en los comentarios.
<?php
$a = 3;
$b = 3;
$a == $b; // El resultado de la comparación es TRUE porque $a es igual a $b
$a = 3;
$b = 4;
$a == $b; // El resultado de la comparación es FALSE porque $a no es igual a $b
?>


TIPOS DE DATOS
En PHP no es obligatorio indicar el tipo de datos al que pertenece una variable como en otros lenguajes, sino que los tipos de datos son establecidos directamente por el intérprete PHP, que es el encargado de interpretar el código.
Ahora veremos en una tabla los distintos tipos de datos que se pueden usar en PHP.
TIPO DE DATO
DEFINICIÓN
integer
Los integers, o enteros, pueden tener distintos valores numéricos enteros que se expresan con diferentes notaciones.
$variable = 18; // Número entero positivo
$variable = -18; // Número entero negativo
$variable = 0x12; // Notación hexadecimal, en principio no la utilizaremos
float o double
Este tipo de datos son los números de punto flotante a los que normalmente llamamos “números decimales”, por ejemplo, 9.876. Ambos tienen mucha precisión, pero double es el más preciso (con más decimales). La sintaxis para utilizarlos es bastante simple:
$variable = 9.876;
string
El tipo de datos string, también conocido como cadena de caracteres, se expresa con la siguiente sintaxis:
$variable = "Yo soy una cadena";
boolean
Se trata de un tipo lógico. Sus posibles valores son true (verdadero) o false (falso).
$variable = true;
$variable = false;


INSTRUCCIÓN ECHO
Esta instrucción muchas veces se dice que sirve para que se muestre por pantalla un texto, una variable, o una combinación de texto y variables. Pero realmente no es así: echo no es una instrucción que sirva para mostrar algo por pantalla (aunque podemos usarla para esto), sino que sirve para insertar texto dentro del documento HTML subyacente al código PHP.
Por ejemplo: echo "salida por pantalla. "; hará que se inserte este texto en el documento html. Si lo hacemos entre las etiquetas <body> y </body> lo veremos por pantalla porque cualquier texto insertado en ese lugar se mostrará por pantalla, no porque la instrucción echo dé lugar a que se muestre por pantalla.
Sin embargo echo "<h1>Salida por pantalla. </h1> "; no hará que se muestren por pantalla las etiquetas h1 y el texto, sino que introducirá en el documento HTML las etiquetas con el texto, éstas etiquetas funcionarán como código HTML y lo que se mostrará por pantalla será Salida por pantalla con formato de título h1 (letras más grandes de lo normal).
En general en php son válidas tanto las comillas dobles como las comillas simples, por lo que se puede escribir tanto echo "<h1>Salida por pantalla. </h1> "; como echo '<h1>Salida por pantalla. </h1>';
Los paréntesis no son necesarios (echo en realidad no es una función sino que es lo que se denomina una <<construcción del lenguaje>>, de ahí que no sean estrictamente necesarios los paréntesis), pero se pueden incluir si se desea. Ejemplo: echo ('con paréntesis y comillas simples');
Crea un archivo php con el siguiente código, ponle un nombre como usoDeEcho.php y súbelo al servidor. Luego invócalo usando la ruta adecuada según la dirección web con la que estés trabajando (será similar a http://apr2.byethost7.com/usoDeEcho.php.)
<?php
echo "salida por pantalla. ";
$a = 5;
echo $a;
echo " El valor de a es $a.";
?>


Ten en cuenta que $a se muestra por pantalla como 5 porque el intérprete de PHP considera que debe mostrarse siempre el valor de la variable, incluso si va dentro de un texto. Prueba a escribir la siguiente línea: echo " El valor de la variable \$a es $a.";
Comprobarás que se muestra por pantalla “salida por pantalla. 5 El valor de la variable $a es 5.”
Cuando antecedemos un nombre de variable del carácter \ hacemos que se interprete como texto en lugar de como una variable. El carácter \ se suele llamar “carácter de escape” porque permite que se considere texto algo que en principio se iba a interpretar como otra cosa (como una variable por ejemplo).
Crea ahora un archivo php con el siguiente código, ponle un nombre como usoDeEcho2.php y súbelo al servidor. Luego invócalo usando la ruta adecuada según la dirección web con la que estés trabajando (será similar a http://apr2.byethost7.com/usoDeEcho2.php.)
<html>
<head>
<title> Ejemplo php aprenderaprogramar.com </title>
<meta charset="utf-8">
</head>
<body>
<?php
echo 'con comillas simples<br/>';
echo ('con paréntesis y comillas simples<br/>');
echo ("con paréntesis y comillas dobles<br/>");
echo '<h1>Salida por pantalla</h1><br/>';
echo "salida por pantalla. ";
$a = 5;
echo $a;
echo " El valor de a es $a.";
?>
</body>
</html>


La visualización en tu navegador deberá ser similar a:
con comillas simples
con paréntesis y comillas simples
con paréntesis y comillas dobles

Salida por pantalla

salida por pantalla. 5 El valor de a es 5.

Puedes comprobar que <br/> no se muestra por pantalla porque es código HTML, y el navegador cuando detecta este código HTML introduce un salto de línea en lugar de mostrarlo por pantalla.
Para comprender bien la utilidad de la instrucción echo piensa en esta equivalencia:
<body>
<? php
echo '<h1>Cuzco</h1>'
?>
</body>
- - - - - - - - Equivale a - - - - - - - >
<body>
<h1>Cuzco</h1>
</body>


El navegador recibe el HTML “equivalente” generado y lo interpreta, dando lugar a los resultados que se mostrarán por pantalla.