domingo, 28 de agosto de 2016

[Fecha de publicación: 2016-08-25]-Semana-07

Acumulativo:

<script>

document.write('<table width="100%" border="1">');
//-----------------------------------------------------------------------
document.write('<tr>');
    document.write('<td><b>A:</b></td>');
    document.write('<td><input type="text" id="a" value=""></td>');
document.write('</tr>');
//-----------------------------------------------------------------------
document.write('<tr>');
     document.write('<td><b>B:</b></td>');
    document.write('<td><input type="text" id="b" value=""></td>');
document.write('</tr>');
//-----------------------------------------------------------------------
document.write('<tr>');
     document.write('<td><b>Operacion:</b></td>');
     </script>

   <td><select id="Operacion" >
   <option value="1" selected> suma </option>
   <option value="2"> resta </option>
   <option value="3"> multiplicacion </option>
    <option value="4"> division </option>
  </select></td>'
</tr>'
<script type="text/javascript">
//-----------------------------------------------------------------------
document.write('<tr>');
     document.write('<td><b>A:</b></td>');
    document.write('<td><input type="button" value="Calcular" onClick="calcular()"></td>');
document.write('</tr>');
//-----------------------------------------------------------------------
document.write('</table>');


function calcular(){
a = document.getElementById("a").value;
b =  document.getElementById("b").value;
opera = document.getElementById("Operacion").value;

if (opera==1) {

alert(parseFloat(a)+parseFloat(b));

}
if (opera==2) {
alert(parseFloat(a)-parseFloat(b));

}
if (opera==3) {

alert(parseFloat(a)*parseFloat(b));

}
if (opera==4) {
if (a==0) {
  alert(error);
}
else{
if(b==0){

  alert(error);

}
else{

  alert(parseFloat(a)/parseFloat(b));
}

}

jueves, 25 de agosto de 2016

Para el acumulativo

CSS Tutorial

CSS es un lenguaje que describe el estilo de un documento HTML.
CSS se describe cómo se deben mostrar los elementos HTML.
Este tutorial te enseñará CSS desde básico hasta avanzado.

Ejemplo CSS

body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

{
    font-family: verdana;
    font-size: 20px;
}
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>
tomado de:http://www.w3schools.com/css/

Vamos como se pueden alinear los objetos dentro de las celdas de una tabla:
xxxxxxxxx
xxxxxxxxx
Primera fila (alineación horizontal):
  • En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la alineación que se establece por defecto. (Podría escribirse, de todas formas: <td align="left">).
  • En la segunda celda el texto está alineado en el centro: <td align="center">.
  • En la tercera celda el texto está alineado a la derecha: <td align="right">.
Segunda fila (alineación vertical):
  • En la primera celda el texto está alineado en la parte superior: <td valign="top">.
  • En la segunda celda el texto está alineado en la parte central. No hay que hacer nada, es la alineación vertical establecida por defecto. (Podría escribirse, de todas formas: <td valign="middle">) .
  • En la tercera celda el texto está alineado en la parte inferior: <td valign="bottom">.
tomado de: http://roble.pntic.mec.es/apuente/html/paginas/doce.htm 

jueves, 18 de agosto de 2016

[Fecha de publicación: 2016-08-18]-Semana-06

Presentacion del Proyecto

Codigo de la figura:

<?php
$color='#ff00ff'
$f= 100;
$c= 50;
$df = $f/2;
$dc = $c/2;
$mf = round($df);
$mc = round($dc);
  echo '<table width="100%" border="1">';

    for ($i = 1; $i <=$f ; $i++) {

      if ($i>=$mf) {

        echo"<tr bgcolor='$color'>";
 
 
      }
      else{

        echo"<tr>";

      }

    for ($o = 1; $o <= $c; $o++) {
           
      if ($o<=$mc) {
        echo"<td bgcolor='$color'> &nbsp; </td>";
 
      }
      else{
        echo"<td>&nbsp;</td>";
      }
      }
        echo"</tr>";
      }



     

?>

miércoles, 17 de agosto de 2016

Conceptos para acabar el proyecto

Barras de navegación

Las barras de navegación son componentes adaptados al diseño web responsive y que se utilizan como elemento principal de navegación tanto en las aplicaciones como en los sitios web.
En los dispositivos móviles se muestran inicialmente minimizadas y al pulsar sobre ellas, se despliegan todas sus opciones. Si la anchura del dispositivo aumenta hasta un nivel suficiente, las barras de navegación muestran todos sus contenidos horizontalmente.
Dependiendo del contenido de tu barra de navegación, puede ser necesario modificar el punto a partir del cual se muestra horizontal en vez de minimizada. Para ello, modifica el valor de la variable @grid-float-breakpoint en tu archivo LESS o añade tu propia media query en el archivo CSS.

6.7.1. Barra de navegación básica

Ejemplo:
<nav class="navbar navbar-default" role="navigation">
  <!-- El logotipo y el icono que despliega el menú se agrupan
       para mostrarlos mejor en los dispositivos móviles -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Desplegar navegación</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Logotipo</a>
  </div>
 
  <!-- Agrupar los enlaces de navegación, los formularios y cualquier
       otro elemento que se pueda ocultar al minimizar la barra -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Enlace #1</a></li>
      <li><a href="#">Enlace #2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Menú #1 <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Acción #1</a></li>
          <li><a href="#">Acción #2</a></li>
          <li><a href="#">Acción #3</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #4</a></li>
          <li class="divider"></li>
          <li><a href="#">Acción #5</a></li>
        </ul>
      </li>
    </ul>

tomado de: http://librosweb.es/libro/bootstrap_3/capitulo_6/barras_de_navegacion.html

LISTAS DE DEFICIONES O DE DESCRIPCIONES
Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este tipo de código en alguna página web poder interpretar su significado. Las listas de definiciones se usan cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y su definición o descripción. Por ejemplo, esto serían varios términos y sus definiciones:
Término
Definición
FTP
Protocolo para transmisión de ficheros entre ordenadores
HTML
Lenguaje de etiquetas empleado para generar páginas web
PHP
Lenguaje interpretado en servidor que permite generar páginas web dinámicas


Estos términos y sus definiciones o descripciones podríamos ponerlos de varias maneras dentro de una página web (como texto sin más, como lista ordenada, no ordenada…) y una de estas maneras es ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definición o descripción asociada a un término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener como descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
Los listados de definición se separarán automáticamente si escribimos varios de ellos.


EJEMPLO
Escribe este código en tu editor de texto, guárdalo como archivo html y comprueba el resultado.
<!DOCTYPE html> <html>     <head>                <meta charset="utf-8">          <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>     </head>     <body>
<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Segunda definición, separada automáticamente de la anterior.</dd>
</dl>
</body> </html>



Habitualmente, los navegadores generan de forma automática el efecto de que la definición o descripción queda desplazada hacia la derecha (tabulada) respecto a el término, así como el espacio de separación entre distintas listas de definiciones.


ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el siguiente código en un editor de texto como bloc de notas o Notepad++ y guárdalo con un nombre de archivo como ejemploCU00718B.html.
<!DOCTYPE html> <html>     <head>                <meta charset="utf-8">          <title>Ejemplo del uso de listas - aprenderaprogramar.com</title>     </head>     <body>
<ul>
<li>Lenguajes de programación estructurada </li>
<ol>
<li> Lenguaje C </li> <li> Lenguaje Pascal </li> <li> Lenguaje Fortran </li>
</ol>
<hr style="height:8px; color: black; background-color: black;" />
<li>Lenguajes de programación orientada a objetos </li>
<ol>
<li>Lenguaje Java </li> <li>Lenguaje PHP </li>
</ol>
</ul>
</body>
</html>


El resultado de este código cuando lo visualizamos en un navegador sería algo similar a lo que mostramos en la siguiente imagen.
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto, podemos gracias al atributo “type”.
Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos. Vamos con un pequeño ejemplo en código:
<ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul>
Cuyo resultado visual será el que veremos a continuación:
  • Esto es un tipo de punto.
  • Este es otro.
  • Y este es otro diferente.
Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:
<ol> <li value="20">Este será el número 20. </li> <li>Este será el 21. </li> <li> Este será el 22. Y así sucesivamente. </li> </ol>
Y el resultado será el siguiente:
  1. Este será el número 20.
  2. Este será el 21.
  3. Este será el 22. Y así sucesivamente.
Listas de definiciones: <dl>, <dt> y <dd>.
Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.
La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.
La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición.
Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación.
Aquí podemos ver un ejemplo de código de dos listado de definición:
<dl> <dt>Aquí va el término que definiremos</dt> <dd>Y aquí dentro irá la definición propiamente dicha.</dd> </dl> <dl> <dt>Aquí va la segunda definición</dt> <dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd> </dl>
Cuyo resultado será el siguiente:
Aquí va el término que definiremos
Y aquí dentro irá la definición propiamente dicha.
Aquí va la segunda definición
Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.
tomado de: http://html.hazunaweb.com/110.php

round

(PHP 4, PHP 5, PHP 7)
round — Redondea un float

Descripción ¶

float round ( float $val [, int $precision = 0 [, int $mode = PHP_ROUND_HALF_UP ]] )
Devuelve el valor redondeado de val con la precision especificada (número de dígitos después del punto decimal). precision puede también ser negativo o cero (valor predeterminado).
tomado de: http://php.net/manual/es/function.round.php
 
La estructura del elemento background es la siguiente:
background: [color] [image] [repeat] [attachment] [position];
¿que ofrecía lamp?  
Localhost
Apache
MySQL
Php
#ff00ff color Magenta

lunes, 15 de agosto de 2016

Tablas

Crear Tabla HTML con ID y Mostrar Información (PHP,MySQL)

1.- Primero que nada debemos de tener nuestra tabla ya lista.
2.- Ahora tenemos que modificar un poco la creación de nuestra tabla la cual tiene este código:
Y lo vamos a cambiar por este otro
Y resultado de nuestra tabla va a ser los Id con un link hacia una página llamada searchEmployee.php.
Este es el código completo  que nos da el resultado anterior:
3.-Ahora vamos a realizar la búsqueda de la información del empleado. Podemos ver que en el query string obtenemos la variable id con un valor, algo así:
Como la información es enviada a través de un query string en php la vamos a obtener con $_GET, ya que la información no es enviada por una forma. Entonces con el siguiente código realizamos la busqueda y guardamos el valor en una variable $row.
4.- Ahora para mostrar la información del empleado vamos a usar una forma. La razón por la que se usa una forma es por que en un siguiente post voy a mostrar como editar o eliminar un registro  y ésta va a ser la plantilla base.
Una vez mostrado nuestra información queda listo para ser editada o eliminada.



UN INFINIDAD DE EJEMPLOS DE TABLAS SE ENCUENTRAN AQUI: https://www.uv.es/jac/guia/tablaeje.htm