sábado, 7 de junio de 2014

Estructura Condicional if en php

En algoritmos la llamamos Si condicional, esta estructura de decisión es la más importante y la que mas usamos, evalúa una condición y si esta se cumple (if) se hacen diversas operaciones, caso contrario (else) como no se cumple la condición realizamos otras operaciones.
Sintaxis:
if(condición)
{
operación1;
operación2;
...
}
else
{
operaciónA;
operaciónB;
...
}
Ejemplo:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<input type="submit" name="btnOk" value="1">
<input type="submit" name="btnOk" value="2">
<input type="submit" name="btnOk" value="3">
<input type="submit" name="btnOk" value="4">
<input type="submit" name="btnOk" value="5">
<input type="submit" name="btnOk" value="6">
<input type="submit" name="btnOk" value="7">
<input type="submit" name="btnOk" value="8">
<input type="submit" name="btnOk" value="9">
<input type="submit" name="btnOtro" value="A">
</form>
<?php
if(isset($_GET["btnOk"]))
{
  $dato = $_GET["btnOk"];
  if($dato >= 1 && $dato <= 4)
    echo "Número marcado esta entre 1 y 4";
  else
  if($dato >= 5 && $dato <= 8)
    echo "Número marcado esta entre 5 y 8";
  else
    echo "Eligio un 9";
}
else
  echo "<hr>Opción no elegida";
?>

Estructura Condicional switch en php

Esta estructura evalúa una variable y según los valores que se tengan, ejecutan diversas ordenes, break es la finalización de un bloque. Ten en cuenta también que default inicia el conjunto de ordenes cuando ninguna de las condiciones se cumple.
Sintaxis: 
switch ($variable) {
case 'valor1':
  echo "Ordenes del valor uno";
break;
case 'valor2':
  echo "Ordenes del valor dos";
break;
default:
  echo "Ordenes cuando no cumple ningún valor";
break;
}

Ejemplo: Las estaciones del año (grabar el archivo con el nombre condicionalsw.php).

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form action="condicionalsw.php" method="get">
Elije tu estación favorita:
<select size="1" name="cboDatos">
<option>...</option>
  <option>Primavera</option>
<option>Verano</option>
<option>Otoño</option>
<option>Invierno</option>
</select>
<input type="submit" name="btnEnviar" value="OK" />
</form>
<?php
if(isset($_GET["btnEnviar"]))
{
  $valor = $_GET["cboDatos"];
  switch ($valor) {
    case 'Primavera':
      echo "<hr>La primavera: Es una estación templada.<hr>";
    break;
    case 'Verano':
      echo "<hr>El verano: La estación calurosa del año.<hr>";
    break;
    case 'Otoño':
      echo "<hr>El otoño: Es templada con tendencia al frio.<hr>";
    break;
    case 'Invierno':
      echo "<hr>El invierno: La estación más fria.<hr>";
    break;
    default:
      echo "<hr>No es una estación";
    break;
  }
}
?>

Estructura Repetitiva for en php

Esta estructura repite un conjunto de ordenes un número definido de veces, tiene un valor inicial, un valor final y el incremento del contador.
Sintaxis:
for(inicializar contador;limite del contador;incremento del contador)
{
ordenes del bucle
}
Ejemplo - Los Números del Contador
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form method='get' action='repetitivafor.php'>
Escribe un número: <input type='text' name='txtLimite'>
<input type='submit' name='btnEnviar' value='OK'>
</form>
<?php
if(isset($_GET["btnEnviar"]))
{
  $limite = $_GET["txtLimite"];
  echo "<ul>";
  for($contador=1;$contador<=$limite;$contador++)
  {
    echo "<li>Valor del contador: $contador</li>";
  }
  echo "</ul>";
}
?>

Estructura Repetitiva while en php

Esta estructura repite un conjunto de operaciones siempre y cuando la condición se cumpla, el objetivo es entonces hacer que la condición se rompa dentro de las operaciones, para luego terminar el bucle.

Sintaxis:
while(condición)
{
operacion1;
operacion2;
operacion3;
...;
}
Ejemplo - El número Primo
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
Ingresa un número: <input type="text" name="txtDato">
<input type="submit" name="btnEnviar" value="OK">
</form>
<?php
if(isset($_GET["btnEnviar"]))
{
  $dato = $_GET["txtDato"];
  $esprimo=1;
  $k = 2;
  while($k <= $dato / 2)
  {
    if($dato % $k == 0)
    {
      $esprimo=0;
      $k=$dato;
    }
    $k++;
  }
  if($esprimo == 1) echo "Es Primo"; else echo "No es Primo";
}
else
  echo "<hr>Opción no elegida";
?>

Estructura Repetitiva do ... while en php

La diferencia con la anterior estructura es que la condición se evalúa después de ejecutar las operaciones, por tanto las operaciones se ejecutan por lo menos una vez, recuerda que las operaciones se repiten siempre que la condición se cumpla.

Sintaxis:
do
{
operación1;
operación2;
....;
}
while(condición);
Ejemplo - La Tabla de Multiplicar
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
Ingresa un número: <input type="text" name="txtDato">
<input type="submit" name="btnEnviar" value="OK">
</form>
<?php
if(isset($_GET["btnEnviar"]))
{
  $k = 0;
  $dato = $_GET["txtDato"];
  echo "<center><h1>TABLA DE MULTIPLICAR DE $dato</h1><hr>";
  echo "<table border='1' align='center'>";
  do
  {
    echo "<tr><td>$dato</td><td>*</td><td>$k</td>";
    echo "<td>=</td><td>".($dato*$k)."</td></tr>";
    $k++;
  }
  while($k <= 12);
  echo "</table></center>";
}
else
  echo "<hr>Tabla de multiplicar...";
?>

Posted on 12:36 p.m. by ghel

No comments

sábado, 24 de mayo de 2014

PHP y Formularios HTML

En la sección anterior hemos visto los elementos de un formulario en HTML, ahora debemos realizar la combinación con PHP. De ahora en adelante, nuestros ejemplos y ejercicios tendrán dos partes, una el formulario y otra el código en php.

Tienes que tener en cuenta que cuando usas php, los proyectos normalmente tienen dos partes, el diseño y los elementos visuales que se realizan en HTML y el código, los módulos, el acceso a la base de datos y otros que se hacen en php. En muchos ejemplos usaremos dentro de un mismo archivo el código de los formularios y el php junto, luego veremos que esto lo puedes programar separando el código del diseño.

En la figura puedes observar las partes de nuestro código y los elementos básicos en php para manejar los datos enviados desde un formulario.


Ejercicio 1. El Saludo

El siguiente ejercicio muestra un mensaje de bienvenida y un saludo al ingresar tu nombre, deberás grabarlo con el nombre de ejercicio1.php, pues el formulario envía datos a este mismo archivo.
Solución

<form method='get' action='ejercicio1.php'>
Ingresa tu Nombre: <input type='text' name='txtNombre' />
<input type='submit' name='btnEnviar' value='ENVIAR'/>
</form>

<?php
/*Evaluar si el parametro txtNombre existe*/
if(isset($_GET["txtNombre"]))
{
  /*Asignación del valor del parametro*/
  $dato = $_GET["txtNombre"];
  echo "Hola $dato bienvenido a PHP";
}
?>

Ejercicio 2. La Edad

Hacer un programa que pida un nombre, edad y nos muestre un mensaje indicando si la persona es mayor o menor de edad (ver la figura. Ten en cuenta que debes grabar el archivo con el nombre de "miedad.php").

Solución

<form method="get" action="miedad.php">
    Ingresa tu Nombre:
    <input type="text" name="txtNombre" /><br />
    Ingresa tu edad:
    <input type="text" name="txtEdad" /><br />
    <input type="submit" name="btnEnviar" value="ENVIAR" />
</form>
<?php
if(isset($_GET["btnEnviar"],$_GET["txtNombre"],$_GET["txtEdad"]))
{
$nombre = $_GET["txtNombre"];
$edad = $_GET["txtEdad"];
if ($edad >= 18)
echo "<h1>Hola $nombre tu eres mayor de edad, tienes $edad</h1>";
else
echo "<h1>Hola $nombre tu eres menor de edad, tienes $edad</h1>";
}
?>



Posted on 7:57 p.m. by ghel

No comments

FORMULARIOS

Cuando creamos una aplicación en php que tiene formularios, debemos tener en cuenta que los formularios los vamos a hacer en HTML y no en php. El php lo usaremos para hacer procesos con la información enviada desde el formulario.

Elementos de un formulario en HTML

Los formularios tiene la siguiente forma:
<FORM >
El contenido del formulario
</FORM >

El formulario tiene parámetros en este caso usaremos el parámetro METHOD el cual nos indica que protocolo de envió de datos usamos, si enviamos con "post" nos datos no serán visibles, y si enviamos con "get", los datos si serán visibles en la barra de direcciones.



Tenemos el parámetro ACTION, este indica el destino al cual los datos del formulario se van, en la figura de la parte superior puedes ver que el destino es programa.php.

Al usar method en la figura usamos GET que significa que los datos se envían por la dirección.

CONTROLES DE FORMULARIO

Seguramente ya estas familiarizado con el uso de paginas Web, en ellas habrás encontrado numerosos controles similares al de un formulario de Windows, como es natural los formularios en Web esta basados en etiquetas HTML, por ello deberás aprender estas etiquetas y su uso.


Cuadro de texto

Es un control donde podemos escribir datos.
Ejemplo:
<input type="text" name="txtDato" size="20" value="jose">

  • type="text"; significa que el control es de tipo cuadro de texto.
  • name="txtDato"; es el nombre del control por el cual haremos referencia desde código.
  • size="20"; es la cantidad de caracteres que tiene el cuadro de texto.
  • value="jose"; es el valor que aparecerá en el control.

Cuadro de texto con barras de desplazamiento

Este control es similar al anterior, con la diferencia que aqui podemos colocarmás datos y el control no tiene limite definido.
Ejemplo:
<textarea rows="5" name="txtDescripcion" cols="20">
Es de color rojo
</textarea>

Casilla de verificación

Ejemplo:

<input type="checkbox" name="chkCambiar" value="ON">
Botón de opción
Este control tiene una peculiaridad, para que trabaje en grupo deberá tener el mismo nombre, es decir, cada grupo de controles de este tipo debe tener el mismo nombre.
Ejemplo:
<input type="radio" value="azul" checked name="rbdColor">
<input type="radio" value="Rojo" checked name="rbdColor">
<input type="radio" value="Verde" checked name="rbdColor">

Lista desplegable

Ejemplo:
<select size="1" name="cboDias">
<option selected>lunes</option>
<option>martes</option>
<option>miércoles</option>
</select>

Botón de comando

Ejemplo:
<input type="submit" value="Entra a la página" name="btnEnviar">

Campo oculto

<input type="hidden" name="hiEdad" value="55">
Este último tipo de campo resulta especialmente útil cuando que remos pasar datos ocultos en un formulario.



Posted on 4:28 p.m. by ghel

No comments

domingo, 18 de mayo de 2014

Comenzando a Programar en PHP

Ya debes tener instalados los programas que te mensione en la introducción, ahora no toca desarrollar nuestros primeros programas.
Antes de comenzar deberas asegurarte que el servidor apache esta activado.

Programa 01 en PHP.

Mostraremos un mensaje el clasico "Hola Mundo", este ejemplo debera estar grabado en la siguiente carpeta c:\wamp\www, lo grabamos con el nombre de index.php
Código:

El resultado:

Nota. 
El programa 1 muestra un texto en el browser, tambien podriamos colocar en lugar del mensaje "Hola Mundo...", el mensaje "Hola <br> <h1>Mundo</h1>"; prueba este mensaje y veras que puedes insertar codigo html y este es mostrado a travez del comando echo.

Estudiando el código:

  • ■ <?php, es el inicio del programa php.
  • ■ ?>, es el final del programa php.
  • ■ echo, esta orden permite mostrar texto como mensaje .


Programa 02 en PHP.

Hacer un programa que muestre una presentación del curso usando texto con código HTML.
Codigo:

Resultado:

Variables en PHP

En php podemos crear variable como en otros lenguajes de programación, la diferencia esta en que una variable no tiene un tipo de dato fijo, sino que este puede cambiar al asignarle otro valor. Las variables se crean utilizando el prefijo $.
Ejemplos:
Declaración de variableSignificado del argumento
$pi = 3.141593;Crear un numero real
$y = 7;Crear un entero
$estado = "Soltero";crear una cadena//

Tipos de datos en PHP

Los tipos de datos que soporta el php son:
  • array
  • números en punto flotante
  • entero
  • objeto
  • cadena

Enteros

Los enteros se puede especificar usando una de las siguientes sintaxis:
Declaración de variableSignificado del argumento
$edad = 22;entero positivo
$a = -123;entero engativo
$contador = 0;//entero con valor cero

Números reales

Los números en punto flotante ("double") se pueden especificar utilizando cualquiera de las siguientes sintaxis:
Declaración de variableSignificado del argumento
$x = 1.234;numero con decimal
$sueldoB = 1.2e3;El numero 1200

Cadenas

Las cadenas de caracteres se pueden especificar usando uno de dos tipos de delimitadores.
Comillas dobles ("cadena"), este tipo de cadena tiene cierta ventaja al momento de usar variables y concatenar cadenas con estas.
Comilla simples ('cadena'), es el tipo de cadena basico de php, necesitamos siempre hacer las concatenaciones cuando las usamos.
Declaración de variableSignificado del argumento
$nombre = "Angel";Declara una cadena
$diaMes = '08-01';Declara una cadena

Caracteres especiales.

Como en otros lenguajes de programación similares al C, en php tenemos caracteres especiales:
  • ■ \\ Barra invertida o contra slash
  • ■ \" Comilla doble  

Concatenar cadenas

Las cadenas se pueden concatenar usando el operador ’.’ (punto).

Programa 03

El siguiente programa crear variables usando los tipos de datos descritos y los muestra en mensajes, estos mensajes están enriquecidos con html.


Programa 04

Este programa realiza algunas operaciones con números y concatena cadenas.


PROGRAMA 05

Programa que muestra un mensaje de bienvenida, concatenando cadenas.

PROGRAMA 06

Programa que calcula el sueldo de un empleado.



Posted on 12:42 p.m. by ghel

No comments

¿Que necesito para comenzar a programar en PHP?

Necesitas conocer el lenguaje html y algunos conceptos de diseño de paginas WEB.

¿Que es PHP?

PHP es el acrónimo de Hipertext Preprocesor. Es un lenguaje de programación del lado del servidor gratuito e independiente de plataforma, rápido, con una gran librería de funciones y mucha documentación.

Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de que se envíe la página a través de Internet al cliente. Las páginas que se ejecutan en el servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear la página final que verá el cliente. El cliente solamente recibe una página con el código HTML resultante de la ejecución de la PHP. Como la página resultante contiene únicamente código HTML, es compatible con todos los navegadores.

¿Como ejecuta una página PHP?

Podemos ver en el gráfico, que todo el proceso comienza cuando un cliente solicita una pagina al servidor, luego procesa la pagina php, luego esta pagina se ejecuta y se convierte en codigo html, luego esta pagina html la puede manejar o ver el usuario que solicito la información al servidor.



Caracterizticas del PHP5

El 13 de julio de 2004, fue lanzado PHP 5, utilizando el motor Zend Engine 2.0 (o Zend Engine 2). Incluye todas las ventajas que provee el nuevo Zend Engine 2 como:

  • ­■ Mejor soporte para la programación orientada a objetos, que en versiones anteriores era extremadamente rudimentario.
  • ­■ Mejoras de rendimiento.
  • ­■ Mejor soporte para MySQL con extensión completamente reescrita.
  • ­■ Mejor soporte a XML (XPath, DOM, etc.).
  • ­■ Soporte nativo para SQLite.
  • ­■ Soporte integrado para SOAP.
  • ­■ Iteradores de datos.
  • ­■ Manejo de excepciones.
  • ­■ Mejoras con la implementación con Oracle.


Ventajas de PHP


  • ­■ Orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.
  • ­■ El código fuente escrito en PHP es invisible al navegador web y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable.
  • ­■ Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.
  • ­■ Capacidad de expandir su potencial utilizando módulos (llamados ext's o extensiones).
  • ­■ Posee una amplia documentación en su sitio web oficial, entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda.
  • ­■ Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
  • ­■ Permite aplicar técnicas de programación orientada a objetos.
  • ­■ Biblioteca nativa de funciones sumamente amplia e incluida.
  • ­■ No requiere definición de tipos de variables aunque sus variables se pueden evaluar también por el tipo que estén manejando en tiempo de ejecución.
  • ­■ Tiene manejo de excepciones (desde PHP5).
  • ­■ Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a la hora de programar (muchos otros lenguajes tampoco lo hacen), aun haciéndolo, el programador puede aplicar en su trabajo cualquier técnica de programación o de desarrollo que le permita escribir código ordenado, estructurado y manejable. Un ejemplo de esto son los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista Controlador (MVC), que permiten separar el tratamiento y acceso a los datos, la lógica de control y la interfaz de usuario en tres componentes independientes.


Desventajas de PHP


  • ­■ Como es un lenguaje que se interpreta en ejecución, para ciertos usos puede resultar un inconveniente que el código fuente no pueda ser ocultado. La ofuscación es una técnica que puede dificultar la lectura del código pero no la impide y, en ciertos casos, representa un costo en tiempos de ejecución.
  • ­■ Debido a que es interpretado los desarrollos hechos en PHP resultan en algunas ocasiones un poco lentos.
  • ­■ Soporta objetos, sin embargo no es un lenguaje que soporte un programacion orientada a objetos debido a que obliga a usar scripts para recibir peticiones de formularios.
  • ­■ Las variables al no ser tipadas dificulta a los diferentes IDEs para ofrecer asistencias para el tipeado del codigo. Esto es solventado por Zend Studio añadiendo un cometario con el tipo a la declaración de la variable.


¿Que necesitamos para desarrollar programas en PHP?

Antes de poder programar en php necesitamos convertir nuestro ordenador en un servidor local Web, para ello podemos instalar el programa llamado WAMP, este programa es un paquete para Windows, que incluye el servidor Apache, el servidor de base de datos MySQL, y porsupuesto el soporte de php, lo puedes descargar de la siguiente dirección: http://www.wampserver.com/

Tambien pudemos instalar el programa llamado XAMPP, que también es un programa que incluye apache, mysql y php, los puedes descargar de la siguiente dirección: https://www.apachefriends.org

Como IDE de desarrollo, es decir el editor del programa podemos usar el Sublime, que puede ser descargado de la siguiente dirección: http://www.sublimetext.com/

Tambien podemos usar el IDE para el desarrollo llamada NetBeans basado en JAVA, lo puedes decargar en la siguiente dirección: http://netbeans.org/downloads/

En realidad php lo puedes desarrollar incluso en un bloc de notas, pero siempre usamos un IDE para aprovechar las herramientas especializadas y que ayudan al desarrollador a escribir su código.


Posted on 10:56 a.m. by ghel

No comments

lunes, 7 de abril de 2014

Elementos y Código para Tu Blog o Página Web (CSS, HTML, JavaScript)

Aqui tengo una selección de código simples que he encontrado y simplificado funcionan, lo puedes usar en tus paginas web o en tu blog, para tu blog solo tienes que agregar un gadget o en alguna parte de tu blog que acepte código html o CSS investiga, por supuesto teniendo siempre cuidado en lo que haces al modificar código en tu blog o plantilla Web.

MENÚ VERTICAL EN CSS

Menú Vertical

  • Copia este código CSS al lugar que deses en tu blog, de preferencia el estilo lo pegas en la zona de estilos del blog de esta forma no necesitaras pegarlo una y otra vez. El código html lo puedes poner en la entrada o lugar que deseas que usa html.

CÓDIGO CSS

<style type="text/css">
#mimenuvertical ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      width: 200px; /* ancho del menú */
      font-size: 10pt;
}
#mimenuvertical ul li {
      background-color: #A0CBEE; /* color de fondo del menú */
      padding: 0px;
}
#mimenuvertical ul li a {
      color: #000; /* color de las letras */
      text-decoration: none;
      display: block;
      padding: 5px 5px 5px 10px;
}
#mimenuvertical ul li a:hover {
      background: #336699; /* color del botón al pasar el cursor */
      border-left: 10px solid #000066; /* color del rectángulo junto al título */
      color: #FFFFFF; /* color de las letras al pasar el cursor */
}
</style>


CÓDIGO HTML

<div id="mimenuvertical">
      <ul>
            <li><a href="#"> 1.... </a></li>
            <li><a href="#"> 2.... </a></li>
            <li><a href="#"> 3.... </a></li>
            <li><a href="#"> 4.... </a></li>
      </ul>
</div>


Cajas

  • Copia este código al lugar que deses en tu blog, de preferencia deberás colocarlo en la zona de estilos del blog, para no pegarlo una y otra vez (plantilla/diseñador de plantillas/avanzado/código CSS). El html lo puedes poner en la zona que desees siempre y cuando acepte código html. 

CÓDIGO CSS


<style type="text/css">
.micaja1/*Caja morada*/
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#FFF;
 background-color:#D7D7FF;
 color:#006;
 padding:10px;
}
.micaja2/*Caja roja*/
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#FFF;
 background-color:#EAEAF4;
 color:#750000;
 padding:10px;
}
.micaja3/*Caja Verde*/
{
 border:solid 3px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#ffffff;
 background-color:#E8FFE8;
 color:#030;
 padding:10px;
}
.micaja4/*Caja Negra*/
{
 border:solid 4px #000000;
 -moz-border-radius-topleft: 24px;
 -moz-border-radius-topright:5px;
 -moz-border-radius-bottomleft:5px;
 -moz-border-radius-bottomright:26px;
 -webkit-border-top-left-radius:24px;
 -webkit-border-top-right-radius:5px;
 -webkit-border-bottom-left-radius:5px;
 -webkit-border-bottom-right-radius:26px;
 border-top-left-radius:24px;
 border-top-right-radius:5px;
 border-bottom-left-radius:5px;
 border-bottom-right-radius:26px;
 border-color:#F60;
 background-color:#000000;
 color:#FFF;
 padding:10px;
}
</style>



CÓDIGO HTML

<div class="micaja1">
Contenido de Caja1
</div>
<br />
<div class="micaja2">
Contenido de Caja2
</div>
<br />
<div class="micaja3">
Contenido de Caja3
</div>
<br />
<div class="micaja4">
Contenido de Caja4
</div>



Slider

  • Copialo en un gadget u otra parte de tu blog, en una zona donde acepte código html.
  • El más simple que he encontrado, solo tienes que poner las url de las imágenes, asegúrate que las imágenes tengan el mismo tamaño para mejores resultados o agrégale el código de ancho y alto a la etiqueta de imagen.
  • El problema de este código es que solo lo puedes usar una vez en tu blog, de preferencia en la zona del titulo o alguna alguna zona permanente. Buscare la forma de arreglar este problema.

Código CSS

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript' >
</script>

<script type="text/javascript">
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
</script>

Código HTML

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN2"/></div>
    <div><img src="URL_IMAGEN3"/></div>
</div> 



Popup Simple

  • Este código funciona directamente en cualquier lugar html y nos permite mostrar en una ventana nueva una imagen o el contenido de una página web, puedes cambiar el tamaño de la ventana y su posición. 

<!--CODIGO PARA COPIAR-->

Código HTML con JavaScript Código I - Apertura Automática

<!--Apertura automática de la ventana-->
<script>
window.open("URLPaginaóImagen", "_blank", "width=400,height=400,top=100px,left=200px");
</script>

Código HTML con JavaScript Código II - Apertura con Clic

<!--Apertura de la ventana al hacer click-->
<a href="URLPaginaóImagen" onclick="window.open(this.href, this.target, 'width=400,height=400, top=200px,left=300px'); return false;" target="_blank">
MENSAJE DEL LINK
</a>



Popup Constante

  • Este código esta basado en estilos CSS, funciona perfectamente y no da ningún tipo de alerta de apertura, es muy bueno.
  • Copia este código al lugar que deses en tu blog, solo debes cambiar el HTML, la parte de nombre del titulo y poner luego el contenido en html que quieras. 

<!--CODIGO PARA COPIAR-->

Código CSS

<style type="text/css">
.mioverlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.mioverlay:target {
    visibility: visible;
    opacity: 1;
}
.mipopup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.mioverlay:target+.mipopup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.miclose {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.miclose:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.miclose:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
</style>

Código para HTML

<!--Link para abrir el popup-->
<a href="#mielemento" >Clic Aquí</a>
<!--Contenido del Popup-->
<a href="#x" class="mioverlay" id="mielemento"></a>
<div class="mipopup">
    <h2>TITULO DEL POPUP 1</h2>
        CONTENIDO DEL POPUP 1
    <a class="miclose" href="#miclose"></a>
</div>



BOTON DE COMPARTIR EN FACEBOOK

Codigo HTML

<a href="http://www.facebook.com/sharer.php?u=URL-DePaginaóImagen">
<img src="URL-DelLogoCompartirDeFacebook" />
</a>


Ejemplo HTML

<a href="http://www.facebook.com/sharer.php?u=http://creandomispaginasweb.blogspot.com">
<img src="http://www.mantenimientogratis.junkers.es/var/pool/images/home/compartir_facebook.png?imageRequest" />
</a>


CAJA CON TRANSPARENCIA Y SCROLL

Esta caja es gris y tiene cierta transparencia y un scroll; el scroll es una barra de desplazamiento vertical que aparece cuando el contenido de una caja que tiene cierta altura a sobrepasado su contenido, esta la realizamos colo con CSS.

Codigo CSS

.angelcajascroll
{
    border:solid 3px #242024;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: rgba(67, 67, 67, 0.3);
    background: rgba(67, 67, 67, 0.3);
    color: rgba(3, 3, 10, 1);
    -moz-box-shadow: 3px 5px 12px #262226;
    -webkit-box-shadow: 3px 5px 12px #262226;
    box-shadow: 3px 5px 12px #262226;
    padding: 7px;
    height:300px;
    overflow:auto;/*Coloca una barra vertical*/
    margin: 10px;
}

Código HTML

<div class="angelcajascroll">
    INICIO DEL CONTENIDO DE EJEMPLO
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    <br>a<br>a<br>a<br>a<br>a<br>a<br>a
    FIN DEL CONTENIDO DE EJEMPLO
</div>



Posted on 7:56 a.m. by ghel

1 comment