phpexcel

Modificar la alineación de las celdas de excel desde PHP

Modificar la alineación de las celdas de excel desde PHP

en el siguiente código te muestro cómo puedes la alineación de una celda de un fichero Excel creado con PHP

Se supone que ya sabes cómo escribir o crear un fichero de Excel desde PHP de lo contrario te recomiendo que visualices el siguiente ejemplo

primero crearemos una variable estilo y la rellenaremos con una matriz en la que indicaremos que alineación queremos en las celdas, en nuestro caso … a la derecha ….

una vez hecho esto, sólo tenemos que indicar al objeto de Excel a que celdas quieres aplicar este estilo.

 $estilo = array( 
        'alignment' => array(
            'horizontal' => PHPExcel_Style_Alignment::HORIZONTAL_RIGHT,
        )
    );

    $objPHPExcel->getActiveSheet()->getStyle("J40")->applyFromArray($estilo);

 

Modificar la alineación de las celdas de excel desde PHP

Modificar la alineación de las celdas de excel desde PHP

phpexcel

Aplicar bordes a las celdas de excel desde PHP

Aplicar bordes a las celdas de excel desde PHP

en el siguiente código te muestro cómo puedes aplicar formato a los bordes de una celda de un fichero Excel creado con PHP

Se supone que ya sabes cómo escribir o crear un fichero de Excel desde PHP de lo contrario te recomiendo que visualices el siguiente ejemplo

primero crearemos una variable estilo y la rellenaremos con una matriz en la que indicaremos que queremos modificar los bordes externos utilizando un estilo de borde fino

una vez hecho esto, sólo tenemos que indicar al objeto de Excel a que celdas quieres aplicar este borde o estilo

$estilo = array( 
  'borders' => array(
    'outline' => array(
      'style' => PHPExcel_Style_Border::BORDER_THIN
    )
  )
);

 $objPHPExcel->getActiveSheet()->getStyle('B43:D45')->applyFromArray($estilo);

 

Aplicar borde a celdas de excel desde PHP

Aplicar borde a celdas de excel desde PHP

phpexcel

Escribir o crear un fichero Excel desde PHP

Escribir o crear un fichero Excel desde PHP

en el siguiente ejemplo te muestro una forma muy simple de escribir un fichero en formato Excel por medio de PHP utilizando la librería PHPExcel

La puedes descargar aqui.

lo primero que tenemos que hacer es instanciar la librería PHPExcel.php  y crear una nueva instancia

después llenamos el objeto Excel con las propiedades del fichero que queremos crear .

A continuación, en la hoja activa, indicamos la celda y el contenido que queremos que tenga en nuestro caso lo he hecho en dos celdas A1 y A2

Y para finalizar indicamos en el encabezado que queremos crear un documento de tipo Excel indicándole el nombre del fichero.

si ejecutas este documento en un navegador verás que en la parte de abajo en la zona de descargas te ha generado un nuevo documento Excel y si lo abres verás que te mostrará el contenido en la celda A1 y A2

include ("excel/Classes/PHPExcel.php");
$objPHPExcel = new PHPExcel();
// Establecer propiedades
$objPHPExcel->getProperties()
->setCreator("videotutoriales.es")
->setLastModifiedBy("videotutoriales.es")
->setTitle("Documento Excel")
->setSubject("Documento Excel")
->setDescription("crear archivos de Excel desde PHP.")
->setKeywords("Excel Office 2007 php")
->setCategory("Pruebas de Excel");

$objPHPExcel->setActiveSheetIndex(0)
->setCellValue('A1', 'videotutoriales.es')
->setCellValue('A2', 'Cursos para descargar')
;

// indicar que se envia un archivo de Excel.
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="prueba.xlsx"');
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save('php://output');

si te ha gustado el tema en las siguientes entradas te muestro como puedes dar formato a los datos incluidos en las celdas

Escribir o crear un fichero Excel desde PHP

Escribir o crear un fichero Excel desde PHP

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

Ejemplos de que es y como usar push en un ARRAY en javascript

el método push permite añadir un elemento al final de un array

como puedes ver en el siguiente ejemplo he creado una función que se llama mifuncion que se ejecuta al pulsar en el botón

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.push("HTML5");
document.getElementById("demo").innerHTML = cursos;
}
</script>

esta función añade elemento HTML5 al array cursos utilizando el método push y después mostramos el resultado en un párrafo identificado como demo.

si quieres añadir varios elementos al ARRAY utiliza el método push e incluye en los parámetros todos los elementos separados por comas

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.push("HTML5","CSS");
document.getElementById("demo").innerHTML = cursos;
}
</script>

si lo que quieres es añadir el elemento al principio del array utiliza el método  unshift().

<p>CLICA EN EL BOTON PARA AÑADIR UN ELEMENTO AL ARRAY.</p>

<button onclick="miFuncion()">Pulsa</button>

<p id="demo"></p>

<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;

function miFuncion() {
cursos.unshift("HTML5");
document.getElementById("demo").innerHTML = cursos;
}
</script>

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

Ejemplos de que es y como usar un ARRAY en javascript

un array en Javascript es una variable que puede contener multiples valores como por ejemplo si tuviésemos que memorizar varios cursos en lugar de tener una variable para cada curso lo que haremos es tener una variable de tipo array en los siguientes ejemplos aprendes cómo funciona.

como puedes ver en el siguiente ejemplo la sintaxis es muy simple creamos una variable y después del símbolo igual y entre corchetes introducimos los valores separados por comas

var nombre-array = [valor1valor2, ...];

como por ejemplo si quisiesemos memorizar varios cursos y siguiendo la sintaxis anterior ….

crearemos una variable llamada cursos, pondremos el símbolo =  un corchete [  y un valor,  recuerda que si es texto tiene que ir entre comillas "  y si es un número no es necesario

y después una coma    ,     y otro valor.

y así sucesivamente,  y para finalizar cerramos el corchete ]  y un punto y coma   ;      para finalizar la línea:

var cursos = ["Javascript", "JQuery", "PHP"];

con el siguiente ejemplo puedes ver cómo mostrar el contenido de un array

tenemos un párrafo identificado como demo y una vez hemos declarado el array cursos,  como hemos hecho anteriormente,  identificamos el elemento demo por su id y utilizamos el método inner HTML indicando que muestre el contenido de la variable cursos

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
document.getElementById("demo").innerHTML = cursos;
</script>

una forma más visual de declarar un array es separándolo por lineas el resultado sería el mismo

var cursos = [
"Javascript",
"JQuery",
"PHP"
];

Acceder a los elementos de un Array

para poder acceder alguno de los elementos de un array primero tienes que saber que cada uno de los elementos está identificado por un índice es decir el primero es 0 el segundo es 1 y así sucesivamente

por ejemplo en este caso JavaScript está en el índice 0 jQuery esté en el índice 1 y  PHP está en el índice 2

var cursos = ["Javascript", "JQuery", "PHP"];

si seguimos con el ejemplo anterior del párrafo identificado como demo con el siguiente ejemplo mostramos el segundo elemento de la matriz cursos en este caso jQuery,  si quisieses que mostrase el primer valor pones 0 entre los corchetes,  y si quisieses que mostrase el tercer valor pones 2 entre corchetes

document.getElementById("demo").innerHTML = cursos[1];

y también puedes modificar un valor como puedes ver en el siguiente ejemplo en el cual asignamos a el tercer elemento el curso HTML5 recuerda siempre que un array empieza por 0

cursos[2]="HTML5";

para mostrar cada uno de los elementos de un array utilizaremos una estructura de control que haga un loop en el array,  en este caso utilizaremos la estructura for

si te fijas en el siguiente ejemplo primero hemos definido el array cursos con los diferentes cursos y hemos creado una variable llamada texto que empieza una lista desordenada

después empezamos el loop, y entre paréntesis iniciamos una variable i   , en la condición indicamos que realice la siguiente acción mientras la variable i sea menor de la longitud del array cursos utilizando el método length que nos devuelve el tamaño del array

dentro de las llaves vamos añadiendo a la variable texto cada uno de los elementos del array cursos y como índice utilizamos la variable i

después solo nos falta mostrar el resultado de la variable texto en el elemento identificado como demo en este caso un párrafo

<p id="demo"></p>
<script>
var cursos = ["Javascript", "JQuery", "PHP"];
texto="<ul>";

for (i = 0; i < cursos.length; i++) {
texto += "<li>" + cursos[i] + "</li>";
}

texto += "</ul>";
document.getElementById("demo").innerHTML = texto;
</script>

para añadir elementos a nuestro array utilizamos el método push

cursos.push("HTML5");

o también puedes utilizar el método length del array

cursos[cursos.length] = "HTML5";

otros métodos que puedes utilizar con un Array son:

toString(): convierte el array en texto separado por comas

join(” * “): convierte el array en texto pero indicando tú el separador dentro de los paréntesis

pop(): elimina el último elemento del array

push(): añade un nuevo elemento al final del array

shift(): elimina el primer elemento del array

unshift(): añade un elemento al principio del array

concat(): crea un nuevo array juntando dos arrays

 

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

Ejemplo para extraer un trozo de texto con substring de javascript

la forma en la que tenemos de extraer partes de un texto es con el método substring de JavaScript el cual, como puedes ver en la sintaxis, escribimos primero el elemento al cual se le quieres extraer parte de su texto, un . seguido de substring y entre paréntesis la posición del primer carácter que quieres extraer , una coma “,” y la posición del último carácter que quieres extraer

con esto te extraerá el texto que hay entre inicio y final.

RECUERDA QUE EMPEZAMOS CON CERO

elemento.substring(inicio, final)

en el siguiente ejemplo creamos una variable llamada texto 1 que contiene el texto Hola cibernauta y en la variable texto final extraemos de la primera variable el carácter que hay en la posición 5 recuerda que empezamos en 0 hasta el carácter que hay en la posición 16 y en este caso el resultado final será cibernauta

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(5, 16);

si al utilizar el metodo substring de JavaScript omites el segundo parámetro, te dará el texto comprendido entre la primera posición que tú le indiques en este caso 5 hasta el final como puedes ver en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(5);

sí el primer parámetro del método substring es mayor que el segundo se intercambian los valores es decir como es normal el primer parámetro o el primer carácter que tiene que extraer la primera posición ha de ser siempre inferior a la segunda como puedes ver en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(16,5);

y si el primer parámetro del método substring es negativo se asumirá que es 0 cómo puedes comprobar en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(-5,5);

y si lo que quieres extraer es solo el primer carácter le puedes poner 0 como primer parámetro y 1 como segundo parámetro cómo puedes comprobar en el siguiente ejemplo:

var texto1= "HOLA CIBERNAUTA!";
var texto_final= texto1.substring(0,1);

ejemplos de obtener posición absoluta de un div con JQuery

ejemplos de obtener posición absoluta de un div con JQuery

ejemplos de obtener posición absoluta de un div con JQuery

ejemplos de obtener posición absoluta de un div con JQuery

para obtener la posición absoluta de un elemento utilizando la librería jQuery utilizaremos el método offset del elemento del cual queremos obtener su posición en pantalla.

en el siguiente ejemplo puedes ver que hemos utilizado el evento Click del botón para poner en una variable, en este caso X, el resultado de ejecutar el método offset del párrafo. Una vez hemos hecho esto, ya podemos utilizar la propiedad top y la propiedad left de dicho objeto para saber exactamente dónde está posicionado

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Arriba: " + x.top + " Izquierda: " + x.left);
});
});
</script>
</head>
<body>

<p>Videotutoriales.es.</p>

<button>Devuelve las coordenadas de un elemento</button>

</body>
</html>

y en este otro ejemplo te enseño cómo posicionar un objeto en una posición concreta de la pantalla utilizando el método offset de jQuery como hemos hecho anteriormente pero en este caso en lugar de obtener la posición lo que vamos a hacer es asignar una posición

para ello lo que hemos hecho es en el evento Click del botón directamente asignar al elemento en este caso un párrafo por medio del método offset las propiedades top y left a 200px

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top: 200, left: 200});
});
});
</script>
</head>
<body>

<p>videotutoriales.es</p>

<button>Pulsare para posicionar el párrafo</button>

</body>
</html>

ejemplos del uso de la estructura de control switch con PHP

ejemplos del uso de la estructura de control switch con PHP

ejemplos del uso de la estructura de control switch con PHP

ejemplos del uso de la estructura de control switch con PHP

en el caso en el que tengas que utilizar varias estructuras condicionales if y que realicen diferentes acciones es mejor utilizar la estructura switch.

en el siguiente ejemplo creamos una variable “color” y le damos un valor en este caso “azul” , y después por medio de la estructura switch de PHP le vamos preguntando si es rojo, azul o verde , y en el caso de que no sea ninguno de estos, le mostramos otro texto.

utilizamos break en cada uno de los casos para que no continúe evaluando la condición y salga de la estructura de control switch

<?php
$color = "azul";

switch ($color) {
case "rojo":
echo "Tu color favorito es ROJO!";
break;
case "azul":
echo "Tu color favorito es AZUL!";
break;
case "verde":
echo "Tu color favorito es VERDE!";
break;
default:
echo "Tu color favorito no es ni rojo, no azul ni verde!";
}
?>

este código está muy bien si lo que estamos preguntando o la condición es igual a un valor pero si lo que quieres es que la condición compare si es mayor menor o igual lo tienes que hacer de la siguiente manera

<?php
$hora = 15;

switch ($hora) {
  case $hora< 9 :
    echo "Despierta!";
    break;
  case $hora< 12:
    echo "Buen dia!";
    break;
  case $hora<19:
    echo "Buenas tardes!";
    break;
  case $hora<25:
    echo "Buenas noches!";
    break;
  default:
    echo "En que hora vives!";
}
?>

ejemplos del uso de condiciones if else switch con PHP

ejemplos del uso de condiciones if else switch con PHP

ejemplos del uso de condiciones if else switch con PHP

ejemplos del uso de condiciones if else switch con PHP

en muchos casos necesitas que se realice una acción dependiendo de una condición es decir que si se cumple una condición realice algo por ejemplo …. muestre un texto, elimine un elemento, modifique el valor de una variable, y para ello tenemos las siguientes estructuras:

  • if
  • if…else
  • if…elseif….else
  • switch

la primera estructura condicional que te muestro es la más simple, empieza con if y entre paréntesis pondremos la condición que se ha de cumplir para que se ejecuten o realice lo que tenemos entre llaves.

en este caso mostrará el texto que tengas buen día sí el valor de la variable  hora es menor de 20, en el caso en el que no se cumpla la condición que tenemos entre paréntesis no realizará la acción que tenemos entre las llaves y continuará el código

<?php
$hora = 15;

if ($hora < 20) {
    echo "Que tengas buen dia!";
}?>

en el siguiente ejemplo hemos añadido la cláusula else que nos permite realizar una acción en el caso en el que no se cumplan la condición por ejemplo en este caso si la hora no es menor de 20 es decir es igual o mayor de 20 mostrará buenas noches, de esta forma una vez evaluada la condición el programa realizará una acción o la otra

<?php
$hora = 15;

if ($hora < 20) {
    echo "Que tengas buen dia!";
}else{
    echo "Buenas noches";
}
?>

en este otro ejemplo evaluamos la variable hora , si es menor de 9,  y si se cumple mostrará un texto “despierta” de lo contrario evaluar otra condición, si es menor de 20, en caso afirmativo mostrará “buen día” y en el caso que no se cumpla esta condición solo le queda mostrar “buenas noches”

<?php
$hora = 15;

if ($hora < 9) {
    echo "Despiertaaaa!";
} elseif ($hora < "20") {
    echo "Buen dia!";
} else {
    echo "Buenas noches!";
}
?>

y para no tener que utilizar muchas estructuras IF consecutivas y hacer preguntar siempre sobre la misma variable, utilizaré esta otra estructura SWITCH la cual se va preguntando sobre el valor de la variable y muestra una cosa u otra dependiendo del contenido de la variable.

<?php
$hora = 15;

switch ($hora) {
  case $hora< 9 :
    echo "Despierta!";
    break;
  case $hora< 12:
    echo "Buen dia!";
    break;
  case $hora<19:
    echo "Buenas tardes!";
    break;
  case $hora<25:
    echo "Buenas noches!";
    break;
  default:
    echo "En que hora vives!";
}
?>

ejemplos del uso de operadores lógicos o de comparación con PHP

ejemplos del uso de operadores lógicos o de comparación con PHP

ejemplos del uso de operadores lógicos o de comparación con PHP

ejemplos del uso de operadores lógicos o de comparación con PHP

los operadores logicos en PHP sirven para comparar datos normalmente para comprobar si se cumple una condición concreta y se suele poner en una estructura condicional

Operador Ejemplo Resultado
and $x and $y True ambos $x y $y son true
or $x or $y True si $x o $y es true
xor $x xor $y True si $x o $y es true, pero no ambos
&& $x && $y True si ambos$x y $y son true
|| $x || $y True ninguno $x o $y es true
! !$x True si $x no es true

el comparador and es muy restrictivo puesto que ha de cumplir las dos condiciones en cambio el comparador or no es tan restrictivo puesto que nos dará verdadero si se cumple una de las dos condiciones

ejemplos de cambiar el formato de la fecha actual o de hoy con PHP

ejemplos de cambiar el formato de la fecha actual o de hoy con PHP

ejemplos de cambiar el formato de la fecha actual o de hoy con PHP

ejemplos de cambiar el formato de la fecha actual o de hoy con PHP

para poder visualizar la fecha de hoy o actual simplemente tienes que utilizar la función date de PHP y entre paréntesis indicarle el formato en el que quieres que la muestre

cómo puedes observar en el siguiente código el formato de la fecha lo tienes que poner entre comillas y dentro de estas comillas indicar qué quieres que te muestre el año, el mes ,el día …

<?php
echo "Hoy es " . date("Y/m/d") . "<br>";
echo "Hoy es " . date("Y.m.d") . "<br>";
echo "Hoy es" . date("Y-m-d") . "<br>";
echo "Hoy es" . date("l");
?>

para que te muestre la fecha en formato español es el primero el día después el mes y después el año simplemente tienes que invertir el orden

<?php
echo "Hoy es " . date("d/m/Y") . "<br>";
echo "Hoy es " . date("d.m.Y") . "<br>";
echo "Hoy es" . date("d-m-Y") . "<br>";
echo "Hoy es" . date("l");
?>

dentro de los paréntesis de la función date no es necesario que pongas todos los datos de la fecha por ejemplo si pones la L minúscula muestra el día de la semana como puedes ver en el ejemplo anterior y si pones solo la Y mostrar solo el año

<?php
&copy; 2006-<?php echo date("Y");?>
?>

dentro de los paréntesis de la función date no es necesario que pongas todos los datos de la fecha por ejemplo si pones la L minúscula muestra el día de la semana como puedes ver en el ejemplo anterior y si pones solo la Y mostrar solo el año

<?php
echo "La hora es " . date("h:i:sa");
?>

y de la misma forma puedes hacer que te muestre con la función date() de PHP la hora actual

ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

ejemplos de animaciones una detras de otra o consecutivas con JQuery

en este ejemplo aprendes como animar propiedades CSS una detrás de otra no animar todas las propiedades al mismo tiempo cómo sería lo normal si lo escribes todo en una sola línea

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>

<button>Empezar</button>

<div style="background:#98bf21;height:100px;width:100px;"></div>
</body>
</html>

como puedes ver en el apartado del Body tenemos un botón y una caja o Dip con algunas propiedades CSS modificadas como son el color de fondo la altura y la anchura que lo tenemos a 100 píxeles

y en la parte de arriba tenemos un enlace a la librería jQuery

y en la parte de programación en el evento ready del documento programamos el evento Click del botón

para empezar creamos una variable con el elemento qué queremos animar y después en diferentes líneas utilizamos el método animate para animar las propiedades que creemos, en este caso en cada línea hemos animado la altura, la anchura y la opacidad .

si te fijas en la primera línea de animación animamos la altura y la opacidad a 0.4 y con una velocidad lenta o slow

en la segunda línea y hemos animado la anchura a 300 y una opacidad de 0.8 con la misma velocidad lenta o slow

en la tercera línea hemos animado la altura a su altura original 100 píxeles y la opacidad a 0.4

y para finalizar en la última línea de la animación animamos la anchura a su anchura original

con esto has visto cómo utilizar la cola de animación que utiliza jQuery de forma natural. simplemente ejecuta el método animate al mismo elemento en diferentes líneas y con diferentes valores en las propiedades CSS

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

normalmente las animaciones se ejecutan una detrás de otra conforme se va leyendo el código cuándo termina una y empieza la siguiente cómo has podido ver en alguna entrada desde blog

en el siguiente ejemplo aprendes cómo ejecutar varias animaciones al mismo tiempo o simultáneamente con jQuery  y el método animate().

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#uno").animate({
   width: '500px'}, { duration: 2000, queue: false });

$("#dos").animate({
   width: '600px'}, { duration: 2000, queue: false });

});
});
</script>
</head>
<body>

<button>Empezar</button>

<div id="uno" style="background:#74DEFF;height:50px;width:220px; font-size:24px;">Videotutoriales.es</div>
<div id="dos" style="background:#FF0004;height:50px;width:220px; font-size:24px;">Videotutoriales.es</div>
</body>
</html>

como puedes ver al final del código en el apartado del body tenemos un botón qué pone el texto empezar y dos cajas o DIVS identificados como uno y dos,  y hemos modificado propiedades CSS como el color de fondo la altura la anchura y la fuente.

y en el apartado del Heat tenemos la programación de JavaScript la cual empieza llamando a la librería de jQuery y ya llama al evento del documento

dentro de él identificamos el botón y utilizamos su evento Click para animar los dos elementos que tenemos identificandos

En cada uno de ellos utilizamos el método animate y entre llaves ponemos la propiedad o propiedades que queremos animar en este caso la anchura ponemos una coma “,”  y otra vez entre llaves dos propiedades …. la duración en milisegundos una coma “,” y lo más importante la propiedad “queue:  false”  ….. la cual hace que la animación no esté en la cola es decir no espere a que acabe la siguiente para ejecutarse de esta manera puedes ejecutar animaciones simultáneamente o al mismo tiempo

 

ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

ejemplos de animar varias propiedades css con JQuery

en este ejemplo aprendes como animar varias propiedades CSS utilizando la librería jQuery y el método animate()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
  $("#texto").animate({
    left: '550px',
    opacity: '0',
    height: '150px',
    width: '350px'
   });
});
});
</script>
</head>
<body>
<button>Empezar</button>

<div id="texto" style="background:#74DEFF;height:50px;width:220px;position:absolute; font-size:24px;">Videotutoriales.es</div>

</body>
</html>

en la parte de abajo de este código tenemos el apartado body en el cual tenemos un botón y un div identificado como texto el cual le hemos aplicado una serie de propiedades CSS cómo es el color del fondo, una anchura y una altura, y  la posición absoluta, también hemos modificado el tamaño de la fuente a 24.

y en la parte de programación lo primero es crear una Live enlace a la librería jQuery

y después en el método ready del documento preparamos el evento Click del botón en el cual indicamos qué anime una serie de propiedades al DIV o elemento identificado como” texto”

para ello utilizaremos el método animate de jQuery y entre los parentesis y unas llaves escribiremos la Propiedad dos puntos “:”  y entre comillas simple el valor que le queremos dar, el cual será animado con la diferencia del valor que tiene actualmente y con este que estás introduciendo en estos momentos.

en este ejemplo hemos animado 4 propiedades que son

left  para que el elemento se mueva – a la posición 550 es decir un desplazamiento horizontal

hemos animado también la propiedad opacidad y la hemos puesto en 0 con lo que además desplazarse se ocultara

y también hemos animado la Propiedad height o altura y width o anchura para cambiar el tamaño.

con la función animate  de jQuery puedes animar tantas propiedades CSS como quieras, simplemente has de separarlas entre comas “,”

ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

ejemplo de animar contenido HTML con JQuery

en el siguiente ejemplo aprendes como animar contenido HTML utilizando jQuery y modificando la propiedad left de un div.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#texto").animate({left: '250px'});
});
});
</script>
</head>
<body>

<button>Mueveme</button>

<div id="texto" style="position:absolute;">videotutoriales.es</div>
<body>
</html>

como puedes ver en el código tenemos definido un div identificado como texto y un botón

muy importante tiene modificada la propiedad Position de CSS en absoluto para poder moverlo

en la parte de arriba hacemos una referencia a la librería de jQuery y en el método ready del documento preparamos el evento Click del botón para que al ser pulsado nueva el DIV que tenemos identificado como texto utilizando el método animate de jQuery

y entre paréntesis indicamos que propiedad queremos cambiar, en este caso la posición de la izquierda qué será 250

ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

ejemplo de before y after para añadir contenido HTML con JQuery

en el siguiente código aprendes cómo insertar contenido antes o después de un elemento identificado utilizando los métodos before y after respectivamente

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
$("img").before("<b>Antes</b>");
});

$("#boton2").click(function(){
$("img").after("<i>Despues</i>");
});
});
</script>
</head>
<body>

<img src="logo.jpg" alt="videotutoriales.es" width="100" height="140"><br><br>

<button id="boton1">Insertar Antes</button>
<button id="boton2">Insertar despues</button>
</body>
</html>

a diferencia de los dos métodos vistos en la entrada anterior append y prepend de jQuery que ponen el contenido dentro del elemento identificado,  con los métodos before y after el contenido se inserta antes o después del elemento identificado pero fuera del elemento identificado

en este ejemplo tenemos una imagen, en este caso luego, y dos botones identificado como botón 1 y botón 2

una vez hemos hecho referencia a la librería de jQuery y dentro del método ready del documento programamos dos eventos clicks uno para cada botón

en el botón 1 utilizamos el método before para insertar un texto en negrita antes de la imagen

y en el segundo botón o botón 2 insertamos el texto después en cursiva utilizando el método after

ejemplo sencillo de conexión a bbdd mysql con mysqli en PHP

ejemplo sencillo de conexión a bbdd mysql con mysqli en PHP

ejemplo sencillo de conexión a bbdd mysql con mysqli en PHP

ejemplo sencillo de conexión a bbdd mysql con mysqli en PHP

en este sencillo ejemplo te muestro cómo conectar una base de datos de MySQL con la nueva forma que tenemos que es utilizando mysqli

  
<?php
$conexion = mysqli_connect("localhost", "root", "","curso_tienda") or trigger_error(mysql_error(),E_USER_ERROR);
$sql_categorias = "SELECT * FROM categorias ORDER BY nombre_categoria ASC";
$categorias = mysqli_query( $conexion,$sql_categorias) or die(mysql_error());
$fila_categorias = mysqli_fetch_assoc($categorias);

?>

lo primero que tenemos que hacer para conectarnos con la base de datos es crear una variable y utilizar la funcion mysqli_Connect pasandole los datos necesarios que son el servidor, el nombre de usuario, la contraseña y la base de datos.

cómo estoy utilizando WampServer en local los datos que tengo son localhost como servidor, root como nombre de usuario, no pongo contraseña y el nombre de la base de datos que tengo creada

$conexion = mysqli_connect("localhost", "root", "","curso_tienda") or trigger_error(mysql_error(),E_USER_ERROR);

para continuar nos crearemos una variable con la sentencia SQL que queremos ejecutar en la base de datos

$sql_categorias = "SELECT * FROM categorias ORDER BY nombre_categoria ASC";

lo siguiente es crear una variable que recoge el resultado de la conexión y la sentencia SQL utilizando la funcion mysqli query y pasándole como parámetros la variable de la conexión y la variable de la sentencia SQL

$categorias = mysqli_query( $conexion,$sql_categorias) or die(mysql_error());

y por último nos creamos una variable que contendrá todas las filas de nuestra sentencia SQL en formato matriz asociativa

$fila_categorias = mysqli_fetch_assoc($categorias);

con estos pasos ya tienes creada la conexión de MySQL con MYSQLi utilizando PHP ahora te dejo en el siguiente ejemplo cómo puedes recorrer todo el juego de registros de la conexión

 

do {
echo $fila_categorias['nombre_categoria']."<br>";
} while ($fila_categorias = mysqli_fetch_assoc($categorias));

mysqli_free_result($categorias);

como puedes ver utilizó una estructura de control do while en la que le indicamos que nos muestre el nombre de cada una de las categorías de cada fila

con la función echo de PHP indicó que me muestre el nombre de la categoría que tenemos almacenado en nuestro juego de registro

y lo juntamos con la etiqueta BR para que nos haga un salto de línea

ejemplo sencillo de conexion la bbdd mysql con PHP

ejemplo sencillo de conexion mysql con PHP

ejemplo sencillo de conexion mysql con PHP

ejemplo sencillo de conexion la bbdd mysql con PHP.

aquí te muestro un ejemplo sencillo de cómo conectar la base de datos MySQL con PHP y después mostrar todos los datos como por ejemplo un listado de categorías

  
<?php
$conexion = mysql_pconnect("localhost", "root", "") or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db("curso_tienda", $conexion);
$sql_categorias = "SELECT * FROM categorias ORDER BY nombre_categoria ASC";
$categorias = mysql_query($sql_categorias, $conexion) or die(mysql_error());
$fila_categorias = mysql_fetch_assoc($categorias);

do {
echo $fila_categorias['nombre_categoria']."<br>";
} while ($fila_categorias = mysql_fetch_assoc($categorias));

mysql_free_result($categorias);
?>

lo primero que tenemos que hacer para conectarnos con la BBDD de MySQL es crear una variable con los datos de la conexión, es decir el servidor, el nombre de usuario y la contraseña

para ello utilizaremos la funcion MySQL_pconnect en la que le pasaremos el servidor en este caso localhost el nombre del usuario en nuestro caso Ruth y la contraseña que en nuestro caso es “”

$conexion = mysql_pconnect("localhost", "root", "") or trigger_error(mysql_error(),E_USER_ERROR);

ten en cuenta que yo estoy trabajando con WampServer y estos son los datos que tengo localmente

lo siguiente será indicarle el nombre de la base de datos en nuestro caso curso tienda para ello utilizaremos la función de php mysql select dB en la que le pasaremos dos parámetros el nombre de la base de datos y la variable que nos hemos creado para la conexión

mysql_select_db("curso_tienda", $conexion);

para continuar nos creamos una variable con la sentencia SQL que queremos utilizar en nuestra conexión y una vez tenemos perfectamente creadas estas variables crearemos otra variable dile que le pasaremos la sentencia SQL que acabamos de crear utilizando la funcion MySQL Query y pasando como parámetros la sentencia SQL que acabas de crear y los datos de la conexión

$sql_categorias = "SELECT * FROM categorias ORDER BY nombre_categoria ASC";
$categorias = mysql_query($sql_categorias, $conexion) or die(mysql_error());

y por último nos creamos una variable que contendrá todas las filas de la sentencia SQL utilizando la funcion MySQL fetch Assoc y pasándole como parámetro la variable que nos acabamos de crear

$fila_categorias = mysql_fetch_assoc($categorias);

con estos pasos ya tienes creada la conexión de MySQL utilizando PHP ahora te dejo en el siguiente ejemplo cómo puedes recorrer todo el juego de registros de la conexión

 

do {
echo $fila_categorias['nombre_categoria']."<br>";
} while ($fila_categorias = mysql_fetch_assoc($categorias));

mysql_free_result($categorias);

como puedes ver utilizó una estructura de control do while en la que le indicamos que nos muestre el nombre de cada una de las categorías de cada fila

con la función echo de PHP indicó que me muestre el nombre de la categoría que tenemos almacenado en nuestro juego de registro

y lo juntamos con la etiqueta BR para que nos haga un salto de línea

ejemplo de append para añadir contenido HTML con JQuery

ejemplo de append para añadir contenido HTML con JQuery

ejemplo de append para añadir contenido HTML con JQuery

ejemplo de append para añadir contenido HTML con JQuery

con este ejemplo aprendes como utilizar la funcion append de jQuery para añadir contenido al final de un elemento que ya existe

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#boton1").click(function(){
$("p").append(" <b>Videotutoriales.es</b>.");
});

$("#boton2").click(function(){
$("ol").append("<li>Curso Nuevo</li>");
});
});
</script>
</head>
<body>

<p>Aprendo en:</p>
<p>Me gusta:</p>

<ol>
<li>Curso 1</li>
<li>Curso 2</li>
<li>Curso 3</li>
</ol>

<button id="boton1">Nuevo texto</button>
<button id="boton2">Nuevo elemento a lista</button>

</body>
</html>

como puedes ver el código, en el apartado del Body tenemos dos párrafos y una lista con 3 elementos

y en la parte de programación con JavaScript tenemos un enlace a la librería jQuery y a continuación toda la programación necesaria para añadir un texto al final de cada párrafo y añadir un elemento más a la lista

dentro del método ready del documento utilizaremos dos eventos Click .

El identificado como botón 1 para añadir al final de los párrafos el texto Videotutoriales.es en negrita.

y el identificado como botón 2 para añadir un elemento más a la lista que ponga curso nuevo.

ahora bien si en lugar de querer añadir texto al final con el metodo append quieres añadirlo al principio tienes que utilizar el método prepend:

  
$("p").prepend("<b>videotutoriales.es</b>. ");
$("ol").prepend("<li>Nuevo Curso</li>. ");

 

como puedes ver con estos dos métodos de jQuery append y prepend podemos modificar el contenido de cualquier elemento

simplemente tienes que primero identificar el elemento, párrafo, una lista, un DIV … utilizar el método append para añadir texto al final o prepend para añadir texto al principio

y después entre comillas indicarle lo que quieres que muestre …. y aquí es donde puedes incluir código HTML negritas, lista,s desordenadas, etc …

Ejemplo para cambiar una imagen por otra onclick con javascript

Ejemplos de cambiar contenido div javascript

Ejemplos de cambiar contenido div javascript

Ejemplo para cambiar una imagen por otra onclick con javascript

en el siguiente ejemplo demuestra cómo puedes cambiar una imagen dinamicamente utilizando Javascript

<!DOCTYPE html>
<html>
<body>

<img id="mi_imagen" src="primera_imagen.jpg">
<script>
document.getElementById("mi_imagen").src = "segunda_imagen.jpg";
</script>

</body> 
</html>

y si quieres que cambie cuando haces clic sobre un botón, te dejo este otro código en el que como puedes ver he añadido un botón y en su evento onclick es dónde le pongo la programación de Java Script en la cual identificamos a quien le queremos cambiar la imagen, con el método get element by ID, y después indicamos que la propiedad SRC es decir origen sea igual a la imagen nueva que tú quieres que se visualice

<!DOCTYPE html>
<html>
<body>

<img id="mi_imagen" src="primera_imagen.jpg">

<button type="button"
onclick="document.getElementById("mi_imagen").src = 'segunda_imagen.jpg'">
Pulsame!</button>
</body> 
</html>

solo tienes que reemplazar la primera imagen por la imagen que tú quieras que aparezca al principio y la segunda imagen por la nueva imagen que quieres que aparezca cuando hagas clic en el botón qué es entonces cuando cambia de la Imagen

y recuerda que si las imágenes están en una carpeta, también lo tienes que indicar