Embed Size (px)
Citation preview
Contenido
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
JQUERY
jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la licencia MIT y de la GNU General Public License, Versión 2.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas.2Microsoft la añadirá en su IDE Visual Studio3 y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrará con su plataforma Web Run-Time. Características
Selección de elementos DOM.
Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
Eventos.
Manipulación de la hoja de estilos CSS.
Efectos y animaciones.
AJAX.
Soporta extensiones.
Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, función trim() (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+, Opera 9+ y Google Chrome.
AJAX ENVIAR FORMULARIOS SIN RECARGAR
Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además hay un div con el id “result” que es donde mostraremos el resultado de lo que enviemos.
1 2 3 4 5 6 7 8 9
10 11 12 13
<form method="post" action="envio.php" id="fo3" name="fo3" > <fieldset> <legend>Perfil</legend> <ol> <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li> <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li> <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li> </ol> <input type="submit" name="mysubmit" value="Enviar" /> </fieldset> </div> </form> <div id="result"></div>
Implementando AJAX
Ahora viene la parte novedosa del script, jquery intercepta el evento submit y envía el formulario sin recargar la página.
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<script language="javascript" src="jquery-1.3.min.js"></script> <script language="javascript"> $(document).ready(function() { // Esta primera parte crea un loader no es necesaria $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); // Interceptamos el evento submit $('#form, #fat, #fo3').submit(function() { // Enviamos el formulario usando AJAX $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), // Mostramos un mensaje con la respuesta de PHP success: function(data) { $('#result').html(data); } }) return false; }); }) </script>
ACTUALIZAR UN ELEMENTO SIN RECARGAR
Ahora que está muy de moda la web, muchos aplicaciones requieren por rapidez y estética se recarguen elementos, que aparezcan mensajes, etc y todo sin recargar la página para eso se puede usar complicados y confusos códigos AJAX o DOM pero es preferible usar un método más simple con Jquery.
Actualizar Un Elemento Sin Recargar Usando AJAX
Para eso vamos a crear DIV con el id “recargado” donde vamos a llamar el resultado de un archivo PHP, que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa que haga PHP y por supuesto sin recargar la página
1 2 3 4
<div id="recargado">Mi texto sin recargar</div> <p align="center"> <a href="#" onclick="javascript:recargar();">recargar</a> </p>
Implementando JQUERY
Luego de incluir la libreria jquery
1 <script language="javascript" src="js/jquery-1.2.6.min.js"></script>
Escribimos nuestro código que se ejecutará cuando demos click al link “recargar”
1 2 3 4 5
<script language="javascript"> function recargar(){ /// Aqui podemos enviarle alguna variable a nuestro script PHP var variable_post="Mi texto recargado"; /// Invocamos a nuestro script PHP
6 7 8 9 10 11
$.post("miscript.php", { variable: variable_post }, function(data){ /// Ponemos la respuesta de nuestro script en el DIV recargado $("#recargado").html(data); }); } </script>
COMBOS DEPENDIENTES, AJAX + BASE DE DATOS ¿Cómo Me Conecto A La Base De Datos?
Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha conexión, puedes descargarla y ver cómo funciona aquí
¿Cómo Busco Los Datos?
Para eso hay que usar una consulta sql como esta: “SELECT * FROM ciudad WHERE pais_id LIKE „$_POST[elegido]„” La consulta obviamente varía de acuerdo a nuestra base de datos, para este ejemplo estamos usando una base de datos con las tablas continente, pais y ciudad
Combo1.Php Y Combo2.Php
El script para ambos similar, lo único que varía es la consulta sql
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18
<?php // Incluimos la configuración de la conexión de base de datos include("includes/config.inc.php"); include("includes/mysql.class.php"); // Creamos la conexión $db = new MySQL(); // Abrimos la conexión $db->open(); // Ejecutamos la consulta sql $consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'"); // Creamos un array para mostrar los datos del combo if ($row = $db->fetch_array($consulta)) { do { echo '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>'; }while($row = $db->fetch_array($consulta)); } ?>
STAR RATING SIN BASE DE DATOS 1
Para la parte del css nos hemos basado en el código de Komodo Media, el cual pueden encontrar aqui
Lo interesante de este script es que se usa jquery y se guarda la votación en un archivo de texto y así ya no se requiere una base de datos. El Diseño
Las instrucciones detalladas las pueden encontrar en Komodo Media, así que nos limitaremos a copiar el código del formulario.
1 2 3 4 5 6 7 8 9
10 11 12 13
<form name="frm_rating" method="post" action="index.php"> <ul class='star-rating'> <li class='current-rating' style='width:<?php echo 25 * round($promedio);?>px;'>Currently 3.5</li> <li class="star"><a href='#' title='1' class='one-star'>1</a></li> <li class="star"><a href='#' title='2' class='two-stars'>2</a></li> <li class="star"><a href='#' title='3' class='three-stars'>3</a></li> <li class="star"><a href='#' title='4' class='four-stars'>4</a></li> <li class="star"><a href='#' title='5' class='five-stars'>5</a></li> <li class="star"><a href='#' title='6' class='six-stars'>6</a></li> </ul> <input type="hidden" name="my_vote" value="0" id="my_vote" /> <input type="submit" name="submit" value="Votar" /> </form>
La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial. AJAX
Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique, para eso voy a hacer un simple javascript invocando mi libreria jquery:
1 2 3 4 5 6 7 8 9
10 11 12 13 14
<script language="javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript"> $(document).ready(function(){ // Detecto la estrella que es presionada $("li.star a").click(function(event){ // Recojo el valor de la estrella valor_actual=$(this).attr("title"); // Cambio el estilo para mostrar la estrella seleccionada $("li.current-rating").css("width", valor_actual*25); // Cambio el valor del campo hidden $("#my_vote").attr("value", valor_actual); }); }); </script>
Ya tenemos las estrellas, también se marcan las estrellas, ahora nos falta guardar la votación <h2>Guardar la votación</h2> Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el código php requerido es:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
// Verificamos si se ha votado if (isset($_POST['my_vote'])) { Abrimos el archivo datos.txt $filename = 'datos.txt'; // Capturamos el valor del voto $somecontent = $_POST['my_vote']."\n"; // Verificamos que nuestro archivo sea escribible if (!$handle = fopen($filename, 'a')) { echo "Cannot open file ($filename)"; exit; } // Escribimos $somecontent en nuestro archivo if (fwrite($handle, $somecontent) === FALSE) { // Marcamos error de escritura echo "Cannot write to file ($filename)"; exit; } // El archivo se escribio correctamente y lo cerramos fclose($handle); } //abro el archivo para lectura $archivo = fopen ("datos.txt", "r"); $num_lineas = 0; while (!feof ($archivo)) { // Leo linea por linea las votaciones pasadas if ($linea = fgets($archivo)){ // Guardo la cantidad de votaciones y sus valores $num_lineas++; $valores[$num_lineas]=$linea; } } fclose ($archivo); //print_r($valores); // Calculo el total $total=0; for ($i=1; $i<j;=$num_lineas; $i++) { $total=$total+$valores[$i]; } // Hallo el promedio y lo redondeo $promedio=$total/$num_lineas; echo "total: ".round($promedio); ?>;
STAR RATING JQUERY PLUGIN
Anteriormente vimos un star rating sin base de datos para sistemas pequeños, pero para sistemas más
grandes se recomienda usar este plugin jquery. Basado en el simple star rating plugin jquery modificándolo para agregarle algunas características que
le hacían falta como son: que el rating reciba la respuesta usando ajax y que además se pueda enviar como parámetro un id, esto es útil para guardar el voto en una base de datos e identificar por que item estoy votando. El código es muy simple de implementar, en el html pones:
1 <div id="star1" class="rating"> </div>
Y para el código javascript:
1 2 3 4 5
<script type="text/javascript"> $(document).ready(function() { $('#star1').rating('votar.php', {maxvalue: 5, curvalue:1, id:20}); }); </script>
¿Qué Significan Esos Parámetros?
votar.php es el nombre del script que va a capturar el voto usando POST
maxvalue: es la cantidad de estrellas
curvalue: es el valor actual (opcional)
id: es el identificador (opcional) ¿Cómo Funciona?
El valor seleccionado y el id (si es que lo hemos definido) son enviados al script votar.php (o al que elijamos), en ese script podemos guardar el voto en una base de datos, los parametros son recibidos como $_POST['rating'] y $_POST['id']
DROPDOWN MENU DESPLEGABLE AJAX
En esta parte crearemos un menú desplegable de múltiples niveles, es decir el menu, submenu, los submenus de ese submenu y así sucesivamente y todo eso usando jquery. Creando El Menu
Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li dentro un div contenedor llamado “menu”
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<div id="menu"> <ul id="nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <ul class="submenu"> <li><a href="#">Marketing</a> <ul class="subsubmenu"> <li><a href="#">Precios</a></li> <li><a href="#">Consultas</a></li> </ul> </li> <li><a href="#">Mercadotecnia</a></li> <li><a href="#">Encuestas</a></li> </ul> </li> <li><a href="#">Nosotros</a> <ul class="submenu"> <li><a href="#">Vision</a></li> <li><a href="#">Mision</a></li> </ul> </li> <li><a href="#">Otros</a></li> <li><a href="#">Contactanos</a></li> </ul> </div>
Jquery Para El Menu Ajax
Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus
1 2 3 4 5 6 7 8 9
<script type="text/javascript"> function mainmenu(){ // Oculto los submenus $(" #nav ul ").css({display: "none"}); // Defino que submenus deben estar visibles cuando se pasa el mouse por encima $(" #nav li").hover(function(){ $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400); },function(){ $(this).find('ul:first').slideUp(400);
10 11 12 13 14 15
}); } $(document).ready(function(){ mainmenu(); }); </script>
La Hoja De Estilos Del Dropdown
He diseñado una hoja de estilos que puedas modificar fácilmente tanto para el menu, submenu y en segundo submenu pero recuerda que puedes crear cualquier cantidad de submenús
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
* { padding:0px; margin:0px; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } #menu { background-image:url(nav_bg.png); background-repeat:repeat-x; height:30px; width:500px; margin:auto; padding-left:70px; } #nav { list-style:none; } #nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right; } #nav li a { display:block; padding:7px 10px; text-decoration:none; color:#CCCCCC; font-weight:bold; } #nav li a:hover { color:#FFFFFF; } /* Submenu */ #nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; } #nav ul.submenu li { float:none; background-image:none; border-bottom:1px solid #999999; width:200px; } /* Subsubmenu */ #nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px; } #nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px; }
ENVIA CORREOS SIN RECARGAR
El formulario no tiene nada de especial, sólo debemos asegurarnos que tenga como id “myform”, además necesitamos 2 divs en uno mostraremos el resultado y el otro nos servirá como loader.
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17
<form method="post" action="envio.php" id="myform" name="myform" > <fieldset id="form"> <legend>Send Email</legend> <ol> <li><label>Name:</label><input type="text" size="30" name="fname" /></li> <li><label>E-mail:</label><input type="text" size="30" name="femail" /></li> <li><label>Phone:</label><input type="text" size="30" name="fphone" /></li> <li><label>Comments:</label><textarea name="fcomment" rows="5" cols="25"></textarea></li> </ol> <p align="center"> <input type="submit" name="mysubmit" value="Enviar" /> </p> </fieldset> </div> </form> <div id="loading"></div> <div id="result"></div>
Ajax Para El Envio Del Formulario
En este caso vamos a usar jquery para que envié los datos del formulario a envio.php, el cual a su vez enviará un correo electrónico
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<script language="javascript" src="jquery-1.3.min.js"></script> <script language="javascript"> $(document).ready(function() { // Mostramos el loader $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); // Enviamos el formulario $('#myform').submit(function() { // Definimos el metodo ajax, los datos $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data) { // Imprimimos la respuesta en el div result $('#result').html(data); } }) return false; }); }) </script>
Envio.php
Ahora vamos a hacer el envió de un correo electrónico con los datos del formulario
1 2
<? // definimos el mensaje
3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18
$mensaje=""; $mensaje.="Contact from:". "\n\n"; $mensaje.="Name: ".$_POST['fname']."\n"; $mensaje.="E-mail: ".$_POST['femail']."\n"; $mensaje.="Phone: ".$_POST['fphone']."\n"; $mensaje.="Comments: ".$_POST['fcomment']."\n"; // definimos a quien se lo enviamos $email_destiny="[email protected]"; $subject="Message from us"; // verificamos si se envió if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['femail'].">")) { echo '<p align="center"><b>Thanks for your comments</b></p>'; } else { echo '<p align="center">Error '.$_POST['fname'].'</p>'; } ?>
PANEL DE IMAGENES CAROUSEL JQUERY
Seguro hemos visto en varias páginas galerías de imagen con un scroll horizontal o vertical, no es complicado diseñarlas usando ajax, y con la ayuda de jquery y un plugin llamado jcarousel.
La forma de implementarlo es sencilla, ya que el plugin se encarga de la mayoría de cosas Implementación De La Galería
Probemos con el ejemplo más simple para implementar carousel
1 2 3 4 5 6 7 8 9
10 11 12
<ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> </ul>
Cada elemento del li es la imagen que vamos a mostrar en el carousel, también debemos fijarnos bien en el id del ul y la clase Jquery Ajax
Debemos llamar a jquery, el plugin y activarlo
1 2 3 4 5 6 7
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel(); }); </script>
Estilos Del Carousel
El creador del plugin nos da algunos estilos para aplicarle a carousel que podemos cambiarlos a nuestro gusto
1 2 <link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" /> <link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
Este es un script que fácilmente puede modificarse para crear un carrito de compras, un sistema de widgets como el de wordpress entre otras opciones. Realizaremos uno genérico para que sea de mas fácil modificación. Las Listas
El código de las listas no tiene nada especial, sólo debemos asegurarnos que los id sean correctos
1 2 3 4 5 6 7 8 9
10 11 12 13
<div id="demo-frame"> <ul id="lista1" class="gallery"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> <ul id="lista2"> <li>Item5</li> <li>Item6</li> <li>Item7</li> </ul> </div>
Estilo De Las Listas
Usaremos un estilo simple en las listas, haciéndolas flotar para que este una al lado de la otra además de agregarle una altura mínima para cuando no tenga elementos la lista.
1 2 3 4 5 6 7 8 9
10
body { color: #333333; } #lista1, #lista2 { width:200px; border:1px solid #990000; height:auto; float:left; margin-right:5px; }
Jquery Para Las Listas
Ahora si vamos a la parte importante del código, básicamente lo que hay que hacer es que ambas listas tengan activo dragable y acepten el drop de la otra lista; además debo hacer que al recibir el drop se agregue el item correspondiente y se borre de la lista de donde proviene. Es posible añadir más opciones como cambiar el estilo entre listas o que el item cambie de forma, etc. Todo es cosa de jugar un poco con el código.
1 2 3 4 5
<script language="javascript" src="js/jquery-1.3.1.min.js"></script> <script language="javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script> <script language="javascript"> $(document).ready(function(){ // para ahorrar un poco de espacio voy a definir a las listas como variables
6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
var $lista1 = $('#lista1'), $lista2 = $('#lista2'); // Activo draggable a la primera lista $('li',$lista1).draggable({ revert: 'invalid', helper: 'clone', cursor: 'move' }); // asigno droppable en la lista1 hacia la lista2 $lista1.droppable({ accept: '#lista2 li', drop: function(ev, ui) { // Al hacer drop se borra el elemento deleteLista2(ui.draggable); } }); // Asigno draggable a la lista2 $('li',$lista2).draggable({ revert: 'invalid', helper: 'clone', cursor: 'move' }); // Genero droppable para la segunda lista $lista2.droppable({ accept: '#lista1 > li', drop: function(ev, ui) { deleteLista1(ui.draggable); } }); // Genero el borrado de items con el evento drop function deleteLista1($item) { $item.fadeOut(function() { // Agrego el item dropeado y lo hago aparecer $($item).appendTo($lista2).fadeIn(); }); $item.fadeIn(); } function deleteLista2($item) { $item.fadeOut(function() { /// Agrego el item dropeado y lo hago aparecer $item.appendTo($lista1).fadeIn(); }); } }); </script>
Y eso es todo el código para la forma más simple de intercambiar items entre listas, se le pueden añadir muchas más opciones como nos muestra la documentación del Jquery UI Sobre Jquery UI
Para el ejemplo he usado Jquery 1.3.1 y JqueryUI 1.6rc6, si deseas usar una versión de Jquery 1.6.x, debes usar Jquery UI 1.5 de lo contrario no funcionará, la programación funciona en ambas versiones sin ningún cambio eso por un cambio que hizo jquery en el manejo de eventos drag and drop. RECARGAR TEXTO AUTOMATICAMENTE
Con la ayuda de jquery es muy fácil recargar un texto ya sea que lo invoquemos de una base de datos o de un array, para este ejemplo voy a usar un array generado por un archivo PHP; y voy a usar un set_interval de javascript para que se recargue automaticamente cada cierto tiempo. El Html Para Recargar
Mi codigo html se limita a crear un div donde recargar el texto
1 2 3
<body> <div id="recargado">Mi texto sin recargar</div> </body>
El Javascript Para Recargar
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21
<script language="javascript" src="js/jquery-1.2.6.min.js"></script> <script language="javascript"> function recargar(){ // Limita el contador a solo 5 elementos if ($actual<=5) { $actual=$actual+1; } else { $actual=1; } // Setea la variable que vamos a enviar a php var variable_post=$actual; // Enviamos los valores a miscript.php $.post("miscript.php", { variable: variable_post }, function(data){ /// Actualizamos el div recargado $("#recargado").html(data); }); } $actual=0; // Establecemos el temporizador a 2 segundos timer = setInterval("recargar()", 2000); </script>
Miscript.Php
Este script puedes cambiarlo por una conexion de base de datos, para el ejemplo yo uso un simple array con los mensaje
1 2 3 4 5 6 7 8
<?php // Creo el array $mensajes=array("0", "Mi primer mensaje", "2do mensaje", "un tercer mensaje", "cuarto Mensaje", "5to mensaje"); // Busco el elemento seleccionado $nro=$_POST['variable']; // Muestro el mensaje echo $mensajes[$nro]; ?>
AGREGAR GRAFICOS ESTADISTICOS PIE
Existe un plugin para jquery que nos permite hacer gráficos de barras usando CANVAS, puedes descargar el plugin de aqui recuerda que canvas aun no es soportado por IE, por lo que para hacerlo compatible deberás usar una script.js que te permita usar Explorer Canvas para hacerlo
compatible. El funcionamiento del script es muy sencillo, solo debes tener todos tus datos en una tabla y el plugin se encarga del resto con una sola linea, además es posible elegir multiples estilos de gráficos pie, bar, área, line, stacked bar. Codigo Html De Los Graficos Estadisticos
Como ya dije solo debes ingresar tus datos mediante una tabla simple
1 2 3 4 5 6
<table id="dataTable" summary="Member Data from 2000 to 2006"> <caption>Member Data from 2000 to 2006</caption> <thead> <tr> <td></td> <th id="2000">2000</th>
7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
<th id="2001">2001</th> <th id="2002">2002</th> <th id="2003">2003</th> <th id="2004">2004</th> </tr> </thead> <tfoot> </tfoot> <tbody> <tr> <th headers="members">Mary</th> <td headers="2000">150</td> <td headers="2001">160</td> <td headers="2002">40</td> <td headers="2003">120</td> <td headers="2004">30</td> </tr> <tr> <th headers="members">Tom</th> <td headers="2000">3</td> <td headers="2001">40</td> <td headers="2002">30</td> <td headers="2003">45</td> <td headers="2004">35</td> </tr> <tr> <th headers="members">Brad</th> <td headers="2000">10</td> <td headers="2001">00</td> <td headers="2002">10</td> <td headers="2003">85</td> <td headers="2004">25</td> </tr> <tr> <th headers="members">Kate</th> <td headers="2000">40</td> <td headers="2001">80</td> <td headers="2002">90</td> <td headers="2003">25</td> <td headers="2004">15</td> </tr> </tbody> </table>
Luego debes definir el espacio donde estará ubicado el canvas
1 <canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas>
Fijate bien en la clase ya que esta te permitirá elegir el tipo de grafico a representar, en los estilos también asegurate de usar un tamaño de letra pequeño para el body ya que de lo contrario podría deformarse el grafico. AJAX – Jquery
Finalmente dibujamos el grafico estadistico con una sola linea de codigo
1 $.fgCharting();
VALIDAR FORMULARIOS
Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener un script que sea fácil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que sea personalizable, encuentralo justamente eso. HTML De Formulario Para Validar
Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una clase required, email, etc
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21
<form name="comentariosFrm" id="comentariosFrm" method="post" action=""> <ol> <li> <label>Nombre: (requerido al menos dos caracteres)</label> <input id="cname" name="name" class="required" minlength="2" /> </li> <li> <label>E-mail: (requerido)</label> <input id="cemail" name="email" class="required email" minlength="2" /> </li> <li> <label>Tu página web: (opcional)</label> <input id="curl" name="url" class="url" value="" /> </li> <li> <label>Comentarios: (requerido)</label> <textarea id="ccomentario" name="comentario" class="required"></textarea> </li> <p align="center"><input type="submit" name="submit" value="Enviar" /></p> </ol> </form>
Agregar El Validador
Primero debemos incluir la libreria jquery, el validador y con una sola línea de texto le decimos que formulario validar
1 2 3 4 5 6 7
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> <script src="js/jquery.validate.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#comentariosFrm").validate(); }); </script>
FLASHVARS ENVIARLE DATOS HTML A PELICULA FLASH
Hay veces que nos gustaría enviarle variables GET a nuestro flash, o enviarle datos desde html, esto se logra usando flashvars las cuales se agregan en el embed de la pelicula flash, algo así como:
1 2 3 4 5 6
<object width="300" height="200"> <param name="movie" value="mipelicula.swf" /> <param name="FlashVars" value="var1=valor1&var2=valor2" /> <embed src="mipelicula.swf" width="300" height="200 FlashVars="var1=valor1&var2=valor2"/> </object>
Usando Un Plugin Jquery
Existe una forma mucho más simple de insertar flash en nuestra página web, usando un plugin para jquery basta crear un div y luego decirle, mete ahi nuestra película de este tamaño ¿Hay algo más
simple? Su código html sería únicamente el div donde va a ir nuestra película
1 <div id="test-flash"></div>
El codigo javascript consiste en incluir nuestra libreria jquery, el plugin y un pequeño código para insertar la película, adicionalmente le estoy enviando también flashvars
1 2 3 4 5 6 7 8 9
10 11 12
<script language="javascript" type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flash.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#test-flash').flash({ src: 'test.swf', width: 300, height: 200, flashvars: { var1: 'Mi variable var1', var2: 'Aqui la segunda' } // opcional }); }); </script>
Puedes bajar el plugin de la página de su creador Action Script Flash
Para capturar las variables que estamos enviando usamos el siguiente código en Action Script 2
1 2
mivariable1=_root.var1; // imprime "valor1" mivariable2=_root.var2; // imprime "valor2"
INCLUIR TOOLTIP EN MAPA DE IMAGENES
Usando un plugin para jquery voy a explicar cómo colocar tooltips en un mapa de imagen. HTML Del Mapa De Imagenes
Es prácticamente igual que cualquier mapa de imágenes, title es la descripción
1 2 3 4 5 6 7 8 9
10 11 12
<p align="center"> <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" /> <map name="mimapa" id="mimapa"> <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" /> <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" /> <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" /> <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title=" Tobogan Gigante" /> <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" /> <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title=" Cadetes" /> <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title=" Infantes" /> </map> </p>
Agregar El Plugin
Para agregar jquery y el plugin bastan un par de líneas de código
1 2
<script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script> <script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script>
Al plugin lo podemos configurar con una sola línea de código, pero yo voy a agregarle algunos detalles adicionales
1 2 3 4 5 6 7 8 9
<script language="javascript" type="text/javascript"> $(function() { $("map *").tooltip({ positionLeft: true, delay: 0, fade: 250, extraClass: "pretty", fixPNG: true, opacity: 0.95,
10 11 12
}); }); </script>
Estilos Para El Tooltip
Estos varían según lo que queramos hacer, lo más importante es la position absolute y el z-index
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17
#tooltip { position: absolute; z-index: 3000; border: 1px solid #111; background-color: #eee; padding: 5px; opacity: 0.85; } #tooltip h3, #tooltip div { margin: 0; } #tooltip.pretty { border: none; width: 210px; padding:20px; height: 135px; opacity: 0.8; background: url('shadow.png'); }
SUBIR MULTIPLES ARCHIVOS
Siempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el enctype requerido para subir archivos así que se usa un iframe para emular el proceso. El Formulario Para Subir Archivos
12 3 4 5 6 7 8 9
10 11 12
<form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data"> <ol> <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li> <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li> <li><label>Select Files</label> <input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /> </li> <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li> </ol> </fieldset> </form>
AJAX Jquery
Incluimos las librerias javascript, el script automáticamente buscará el campo con la clase multi
1 2
<script language="javascript" src="js/jquery-1.31.js"></script> <script language="javascript" src="js/jquery.MultiFile.pack.js"></script>
PHP Para Recibir Los Archivos
Este script permite subir múltiples archivos como un array, así que empecemos por ahí
1 2 3 4 5 6 7 8 9
10
<?php $cuales=""; /// Vemos cuantos archivos hemos subido $nro=count($_FILES["ffoto"]["name"]); /// Empezamos el array for ($i=1; $i<$nro; $i++) { $file_name=$_FILES["ffoto"]["name"][$i]; $file_size=$_FILES["ffoto"]["size"][$i]; $file_type=$_FILES["ffoto"]["type"][$i]; if($file_name!=""){
11 12 13 14 15 16 17 18 19 20 21 22 23
// verifica carpeta $nombre_archivo=$_POST['femail']; if (!file_exists('userfiles'.$nombre_archivo)) { mkdir('userfiles/'.$nombre_archivo,0777); } $path="userfiles/".$nombre_archivo; // sube archivo copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ; echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>'; $cuales.=$file_name." "; } else { echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>'; }
Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador WEB MODULAR PHP
Cosas tan simples como tener un flash con música en la página web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implica utilizar una tecnología antigua, y lo inconveniente que es usar frames para el diseño. En vista de esto, existe esta opción AJAX, para ser más preciso jquery. Web Modular
La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior. Cargar Los Contenidos Sin Recargar
Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu
1 2 3 4
<a href="pages/homepage.php" class="ajaxmenu">Homepage</a> | <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a> | <a href="pages/services.php" class="ajaxmenu" >Services</a> | <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a>
y agregando este código al top_page.php dentro del header y entre etiquetas script
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16
$(document).ready(function(){ $.ajaxSetup ({ cache: false }); //// Imagen mientras carga el contenido var ajax_load = "<img src='img/load.gif' alt='loading...' />"; // Interceptar el link de los menus $(".ajaxmenu").click(function(){ /// Extraemos el nombre de la pagina que esta en el link var loadUrl = $(this).attr('href'); /// Llamamos el contenido $("#contenido").html(ajax_load).load(loadUrl); return false; }); });
Hacer Funcionar Ajax En Links Internos
Ese código funciona con el menú pero para que funcione incluso en links de páginas cargadas usando AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.
1 2 3
$('.ajaxmenu').livequery('click',function(){ var loadUrl = $(this).attr('href'); $("#contenido").html(ajax_load).load(loadUrl);
4 5
return false; });
¿Cómo Hago Funcionar El Código Si Uso Anclas?
Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll
1 2 3 4 5 6 7 8 9
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<script language="javascript"> $(document).ready(function(){ $.ajaxSetup ({ cache: false }); var ajax_load = "<img src='img/load.gif' alt='loading...' />"; $(".ajaxmenu").live("click", function(){ myUrl= $(this).attr('href'); if (myUrl.match('#')) { var myAnchor = myUrl.split('#')[1]; /*Ahora arreglamos el URL - para evitar problemas en ie6*/ var loadUrl = myUrl.split('#')[0]; }else{ var loadUrl = $(this).attr('href'); } $("#contenido").html(ajax_load).load(loadUrl,function(){ if (myUrl.match('#')) { /*Calculamos la distancia entre el anchor y la pagina y animamos*/ var targetOffset = $("a[name='"+myAnchor+"']").offset().top; $('html').animate({scrollTop: targetOffset}, 400); } } ); return false; }); }); </script>
SLIDER CONTENIDO DESTACADO
He visto varios sliders en jquery con/sin easing, con muchos efectos y otras cosas pero siempre me han gustado mas esos sliders flash que hay en ciertos blogs de noticias u otros donde se muestra un banner con contenido último o destacado incluyendo un texto y algún link, muy util para resaltar algún post. Este script jquery justamente permite mostrar contenido destacado en un slider incluyendo una descripción con su respectivo link
featured-content-jquery Podemos ver como implementarlo desde su web
VENTANA MODAL
Podríamos programar una ventana modal desde cero pero es mucho más fácil si usamos algún plugin de jquery, para eso vamos a usar Simple Modal
Primero incluimos jquery y el plugin simple modal en nuestra cabecera
1 2
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script>
Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de jquery, con lo que podría quedar asi:
1 $("#sample").modal();
O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la opacidad
1 2 3 4
$("#sample").modal({ overlay:80, overlayCss: {backgroundColor:"#fff"} });
Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web
AGREGAR BORRAR CAMPOS
Seguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un botón “añadir” y se agrega un campo más para insertar un nuevo correo y así cuantos deseemos; también hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en un curriculum. La idea es los casos mencionados es exactamente la misma (campos más, campos menos) veremos cómo funciona la más sencilla, para ello debemos tener claros algunos conceptos previos. Arrays De Controles HTML
Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir cualquier cantidad de datos por lo cual vamos a usar un array de controles como este:
1 <input type="text" size="20" name="email[]">
Lo único distinto con cualquier otro control es que al final del nombre uso unos corchetes. Manejando Arrays De Controles Con PHP
Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos manejarlo directamente pero con los arrays se manejan un poco distinto, algo así:
1 2 3 4 5 6
<?php $emails=$_POST['email']; for ($i=0; $i<=count($emails); $i++) { echo $emails[$i].'<br>'; } ?>
¿Cómo Agregar Campos?
Para esto voy a usar un link que invoque a una función javascript que agrega el campo adicional
1 <a href="#" onclick="agregar();">Agregar</a>
La función usando jquery es muy sencilla basta usar “attend” para que al final agregue un campo adicional
1 2 3 4 5 6
<script type="text/javascript"> function agregar() { campo = '<li><label>Email:</label><input type="text" size="20" name="email[]" /></li>'; $("#emails").append(campo); } </script>
El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos de campos. para borrar un campo específico, pues es muy simple en realidad, veamos: Agregando Campos
Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos permita borrarlos, además para poder identificarlos vamos a ponerle un contador.
1 2 3 4 5
emails=0; function agregar() { emails=emails+1; $("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25" /> <a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>'); }
De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que invoca a la función borrar(1), borrar(2), etc. Borrando Los Campos
La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que “salte” la página cuando le damos click al link borrar.
1 2 3 4
function borrar(cual) { $("li.email"+cual).remove(); return false; }
Como ven con sólo un par de líneas ya está funcionando. MODIFICANDO ATRIBUTOS
Veamos ahora como modificar atributos de algún elemento de nuestra página web, primero a modo de introducción veremos cómo funcionan los selectores en jquery y luego veamos como capturar y/o modificar atributos. Selectores En Jquery
Los selectores de jquery funcionan igual que los selectores de javascrip para elegir objetos (div, p, input…), clases(.miclase) o id(#miid), por ejemplo para seleccionar un DIV
1 <div id="midiv"></div>
Para elegirlo usaríamos en javascript
1 var midiv1 = $("#midiv");
Tomando Los Valores De Un Atributo
Ahora que sabemos cómo elegir un objeto veamos como recoger el valor de cualquiera de sus atributos
1 2 3
var titulo = $("a.milink").attr("title"); var alt = $("img").attr("alt"); var valor = $("#mitexto").attr("value");
Modificando Atributos De Un Elemento
Hay 2 formas de hacerlo, la primera es mejor cuando se trata de modificar un solo atributo mientras que la segunda sirve para recoger múltiples atributos
Deshabilita un boton
1 $("#miboton").attr("disabled","disabled");
Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo (ALT)
1 2 3 4 5
$("img").attr({ src: "/images/miimagen.gif", title: "jQuery", alt: "jQuery Logo" });
Como ven es muy fácil modificar los atributos de cualquier elemento, esto combinado con eventos podríamos hacer que aparezcan o desaparezcan opciones, se habiliten botones, se oculten DIV completos, se muestren mensajes de alerta y un largo etc. JQUERY MUSIC PLAYER
Este es un muy interesante plugin para jquery que nos permite reproducir música usando HTML y Flash muy fácil de implementar y lo más importante es que es muy liviano además de personalizable usando CSS. Veamos algunas de sus características
Permite reproducir y controlar archivos de música (incluso listas de reproducción)
100% personalizable usando HTML y CSS
Rápido stream
Soporta MP3 y OGG Pueden descargarlo AQUI
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
Como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando jquery, perfecto para cuando tenemos un formulario de búsqueda y deseamos mostrar opciones de búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón. Ocultar Un Elemento
Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:
1 2 3 4 5
<div id="paraocultar"> <p>Aqui el texto o elementos del formulario que se ocultarán</p> </div> <p>Para ocultar podemos usar link o un boton</p> <a id="oculta">Click para ocultarlo</a>
Nuestro código jquery para detectar que se ha hecho click sería:
1 2 3 4 5 6 7 8 9
10 11 12
$(document).ready(function(){ estado=0; $("#oculta").click(function () { if(estado==0) { $('#paraocultar').slideUp('fast'); estado=1; } else { $('#paraocultar').slideDown('fast'); estado=0; } }); });
![I j h ] j [ g h c b k p b i e b g « l h j b y» Утверждена ......2019/08/22 · I j h ] j _ [ g h c b k p b i e b g « l h j b y» Утверждена Академическим](https://img.pdfslide.net/doc/110x75/5ed823960fa3e705ec0de845/i-j-h-j-g-h-c-b-k-p-b-i-e-b-g-l-h-j-b-y-20190822.jpg)
![b l b y J h k k b c k d h c N ^ j Z p b b g Z i j b h ^ ^ h ] h ^ Z · 2019-11-13 · l ; p l - . p l](https://img.pdfslide.net/doc/110x75/5e667c605ade7a4ed07618fe/b-l-b-y-j-h-k-k-b-c-k-d-h-c-n-j-z-p-b-b-g-z-i-j-b-h-h-h-z-2019-11-13.jpg)
![J : A J : ; H B G N H J F : P B H G G H B K L ? F D E ...€¦ · 3.4 i b k Z g b g l j h e v g h ] h i j b f _ j j _ Z e b a Z p b b i j h _ d l Z ..... 50 3.5 p _ g d d h g h f](https://img.pdfslide.net/doc/110x75/5f3651b1ee2ca96cbf2dd6ba/j-a-j-h-b-g-n-h-j-f-p-b-h-g-g-h-b-k-l-f-d-e-34-i-b-k-z-g-b-g-l-j.jpg)
![Spisak korisnika javnih sredstava - PODACI.NET; j h ^ _ p _ f [ Z j I j h ] j Z f f h g b l h j b g ] Z a _ f b r l Z g Z g b \ h m e h d Z e g _ f j _ ` _ ^ _ p _ f [ Z j ; j h D](https://img.pdfslide.net/doc/110x75/5e522dc30994d53e8969d532/spisak-korisnika-javnih-sredstava-j-h-p-f-z-j-i-j-h-j-z-f-f-h-g-b.jpg)
![K B K L ? F : ? G ? > @ F ? G L : J : ; H Q : Y L J M D P ... · 4 I H J Y > H D J F B J H < : G B Y J B K < H ? G B H > H < 4.1 H j ] Z g i k _ j l b n b d Z p](https://img.pdfslide.net/doc/110x75/5ec45490d5f7146a45511188/k-b-k-l-f-g-f-g-l-j-h-q-y-l-j-m-d-p-4-i-h-j-y-.jpg)
![B G K L J M D P B Y « G : I J : < E ? G B I J ? > E H @ ? …...образованию), ] j Z g b p u d h l h j h ] h i h e g h k l k h \ i Z ^ Z x l ] j Z g b p Z f b l _](https://img.pdfslide.net/doc/110x75/5fc5640a4686a132d46efbee/b-g-k-l-j-m-d-p-b-y-g-i-j-e-g-b-i-j-e-h-.jpg)
![M Q J ? @ > ? G B ? J H N ? K K B H G : E V G H = H ; J ......3 1. H [щ b h e h ` _ g bя I j h ] j Z f f i h ^ ] h l h k i _ p b Z e b k l h k j _ ^ g _ ] h a \ _ g i h k i _ p b](https://img.pdfslide.net/doc/110x75/5fa379a4b35e8f2af73ef2bb/m-q-j-g-b-j-h-n-k-k-b-h-g-e-v-g-h-h-j-3-1-h-b.jpg)
![I j h ] j [ g h c ^ b k p b i e b g « h j bя»...I j h ] j _ [ g h c ^ b k p b i e b g « h j bя» Утверждена кадемическим советом ООП Протокол](https://img.pdfslide.net/doc/110x75/5e3b7d43355c004b243ee804/i-j-h-j-g-h-c-b-k-p-b-i-e-b-g-h-j-b-i-j-h-j-g-h-c-b-k-p.jpg)
![: g g h l Z p b j Z [ h q c j h ] j Z f f j Z g p m a k d ^ 6](https://img.pdfslide.net/doc/110x75/61a004c0453eb21f7d5b417d/-g-g-h-l-z-p-b-j-z-h-q-c-j-h-j-z-f-f-j-z-g-p-m-a-k-d-6.jpg)
![îµ8tSZ h å8w] J...yy îµ8tSZ h å8 w] J y\O`h ¤p| Ì](https://img.pdfslide.net/doc/110x75/5e6c5af1de4fa877ea75931b/-8tsz-h-8w-j-yy-8tsz-h-8-w-j-yoh-p-oe.jpg)
