Table Of Content

Titulació: Enginyería Industrial Alumne (nom i cognoms): Alejandro García Muñoz Títol PFC: Diseño del plan de negocio y creación de la web Meet Your Phone Director del PFC: Miguel Ángel Saiz Convocatòria de lliurament del PFC: 11 - Gener - 2013 Contingut d’aquest volum: Anejo II: Escritura completa de la web PFC Ingeniería Industrial Superior: Anejo II ANEJO II Alejandro García Muñoz 2 PFC Ingeniería Industrial Superior: Anejo II Alejandro García Muñoz 3 PFC Ingeniería Industrial Superior: Anejo II Índice de anejo II Anejo II Anejo II.1. Estructura HTML de la pagina inicial index.html ……...……… 5 Anejo II.2. Estructura de la segunda pagina home.html ………………….. 7 Anejo II.3. Estructura básica de la pagina de resultados …………………. 14 Anejo II.4. Código javascript del motor de comparación …………………. 22 Anejo II.5. Código javascript que guarda los valores en cookies ……….. 29 Anejo II.6. Código que añade jquery a la web …………………………….. 30 Anejo II.7. Código que conecta con la base de datos …………………….. 49 Anejo II.8. Código que trae las imágenes de la base de datos para los terminales ………………………………………………………………………. 50 Anejo II.9. Código php que retorna de la base de datos los modelos según la marca escogida ……………………………………………………………….. 51 Anejo II.10. Código que retorna la ficha técnica dele móvil final ………… 52 Anejo II.11. Código php que retorna la imagen detallada del móvil final .. 53 Anejo II.12. Código que retorna los valores con formula de la marca y el modelo seleccionado …………………………………………………………. 54 Anejo II.13. Código que aplica estilos en la index.html …………………… 55 Anejo II.14. Código que aplica estilos a la pagina de los terminales home.html ……………………………………………………………………… 58 Anejo II.15. Código que aplica estilos a la pagina final de resultados …... 63 Alejandro García Muñoz 4 PFC Ingeniería Industrial Superior: Anejo II Anejo II.1. Estructura HTML de la pagina inicial index.html <!DOCTYPE html> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <LINK rel="stylesheet" href="./css/styles.css" type="text/css" media=screen> </head> <body> <div class="Header_Logo"> <div class="top_left_logo"></div> <div class="Portada_Header"></div> <div class="top_right_logo"></div> </div> <div class="Body_portada"> <div class="Portada_Cuerpo"> <div class="Information_Page"> El mundo de la telefonía es un mundo que forma parte de nuestras vidas, por lo que la elección de tu terminal debe ser la más correcta posible. Por ese motivo, MY PHONE te da la oportunidad de encontrar el teléfono que más se adecua a tus necesidades realizando una comparación en la que tu eres el que decide los parámetros a comparar y la importancia de estos según lo que necesitas. </div> <div class="Description_Boton"> <div class="Description"> ¡¡ENCUENTRA TU MÓVIL PERFECTO!! </div> <div class="Box_Button" > <img class="Boton_compare" onclick="location.href='Home.html'" src="./Images/Buttons/button_v2_black.gif"/> </div> </div> <div class="Logos_mobile"> <ul class="Lista_logos"> <li><img src="./Images/logo_movistar.jpg" width="150px" height="127px" alt=""></li> <li><img src="./Images/logo_orange.gif" width="150px" height="127px"></li> <li><img src="./Images/logo_vodafone.gif" width="150px" height="127px"></li> <li><img src="./Images/logo_yoigo.jpg" width="150px" height="127px"></li> </ul> </div> <div class="logo_footer"> Una vez realizada la comparación podrás comprobar las diferentes tarifas y sus respectivos precios en las diferentes compañías telefónicas. </div> </div> </div> </div> <div class="top_right_logo"></div> Alejandro García Muñoz 5 PFC Ingeniería Industrial Superior: Anejo II </body> </html> Alejandro García Muñoz 6 PFC Ingeniería Industrial Superior: Anejo II Anejo II.2. Estructura de la segunda pagina home.html <!DOCTYPE html> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="js/jqueryUI/js/jquery-1.8.0.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/jqueryUI/js/jquery-ui-1.8.23.custom.min.js"></script> <link rel="stylesheet" href="js/jqueryUI/themes/base/jquery.ui.all.css"> <script src="js/jqueryUI/ui/jquery.ui.core.js"></script> <script src="js/jqueryUI/ui/jquery.ui.widget.js"></script> <script src="js/jqueryUI/ui/jquery.ui.position.js"></script> <script src="js/jqueryUI/ui/jquery.ui.menu.js"></script> <script src="js/SaveValues.js"></script> <!--<link rel="stylesheet" href="js/jqueryUI/css/start/jquery-ui- 1.8.23.custom.css" /> --> <LINK rel="stylesheet" href="./css/HomeStyles.css" type="text/css" media=screen> <script type="text/javascript"> $(document).ready(function(){ $(".Ver_Mas").click(function(){ $(".Ver_Mas").hide(); $(".hidden_Values").show("fade",1000); $(".Ocultar").show(); $("html, body").animate({ scrollTop: $(document).height() }, "slow"); }); $(".Ocultar").click(function(){ $(".Ver_Mas").show(); $(".hidden_Values").hide("fade"); $(".Ocultar").hide(); }); $(".Marca_select").change(function () { elegido=$(this).val(); combodondevolcar = $(this).closest("div.Marca").next(".Label_Compare_terminals").next(".Modelo").children ("select").attr("id"); $.post("bbdd/Modelos.php", { elegido: elegido }, function(data){ if(combodondevolcar == "ComboModelo1") { $("#ComboModelo1").html(data); } if(combodondevolcar == "ComboModelo2") { $("#ComboModelo2").html(data); } if(combodondevolcar == "ComboModelo3") { $("#ComboModelo3").html(data); } }); }); $(".Modelo_Select").change(function () { Alejandro García Muñoz 7 PFC Ingeniería Industrial Superior: Anejo II elegido=$(this).val(); imagendondevolcar = $(this).closest("div.Compare_terminal").children(".imageTerminal").children(".imagen"); $.post("bbdd/Imagenes.php", { elegido: elegido }, function(data){ $(imagendondevolcar).attr("src",data); }); }) //cargamos los valores del 1 al 10 en los comparadores despelgables var myOptions = { 0 : '0', 1 : '1', 2 : '2', 3 : '3', 4 : '4', 5 : '5', 6 : '6', 7 : '7', 8 : '8', 9 : '9', 10 : '10' }; var mySelect = $('.Compare_Item_Value'); $.each(myOptions, function(val, text) { mySelect.append( $('<option></option>').val(val).html(text) ); }); }) </script> </head> <body> <div class="Header_Logo"> <!--<div class="top_left_logo"></div> <div class="top_right_logo"></div>--> <div class="Portada_Header"></div> </div> <div class="Body_portada"> <?php require("bbdd/conectar.php"); ?> <div class="Portada_Cuerpo"> <form action="bbdd/GetPhoneValues.php" method="post" enctype="multipart/form-data"> <div class="Terminals"> <div class="TerminalsValues"> <div class="Compare_terminal" id="Compare_terminal1"> <div class="imageTerminal"> <img src="Images/icono-antes-foto.gif" class="imagen" Width="160px" Height="288px" /> </div> <div class="Marca_Modelo" id="asdasdas"> Alejandro García Muñoz 8 PFC Ingeniería Industrial Superior: Anejo II <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); ?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo1" class='Modelo_Select combos' > </select> </div> </div> </div> <div class="Compare_terminal" id="Compare_terminal2"> <div class="imageTerminal"> <img src="Images/icono-antes-foto.gif" class="imagen" Width="175px" Height="288px"/> </div> <div class="Marca_Modelo" id="asdasdas"> <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); $resultado = mysql_query("select distinct Marca from mobiles"); for($i=0;$i<$numeroDeRegistros;$i++){ $Marca=mysql_result($resultado,$i,"Marca") or die(mysql_error()); echo "<OPTION VALUE='$Marca'>$Marca</option>";?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo2" class='Modelo_Select' > </select> </div> </div> </div> <div class="Compare_terminal" id="Compare_terminal3"> <div class="imageTerminal"> Alejandro García Muñoz 9 PFC Ingeniería Industrial Superior: Anejo II <img src="Images/icono-antes-foto.gif" class="imagen" Width="160px" Height="288px"/> </div> <div class="Marca_Modelo" id="asdasdas"> <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); $resultado = mysql_query("select distinct Marca from mobiles"); $numeroDeRegistros=mysql_num_rows ($resultado) or die(mysql_error()); echo "<SELECT NAME='Marca_select' class='Marca_select' class='combos'>"; for($i=0;$i<$numeroDeRegistros;$i++){ $Marca=mysql_result($resultado,$i,"Marca") or die(mysql_error()); echo "<OPTION VALUE='$Marca'>$Marca</option>"; } echo "</SELECT>"; mysql_free_result($resultado); desconectar(); ?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo3" class='Modelo_Select' > </select> </div> </div> </div> </div> </div> <div class="Preferences"> </div> <div class="Bottom_body_part"> <form id="Form_Custom_Values" name="Form_Custom_Values" action="bbdd/insertar_custom_values.php" method="post" enctype="multipart/form-data"> <div class="Compare_Values"> <div class="explicacion_puntos"> <span class="Info_compare_span">Escoge las caracteristicas que quieres comprar y asignales una puntuacion</span> Alejandro García Muñoz 10

Description:
Estructura básica de la pagina de resultados …………………. 14. Anejo II.4. . . Una vez realizada la comparación.
ebook img

Alejandro García Muñoz Títol PFC PDF

66 Pages·2013·4.36 MB·Spanish
by  
Save to my drive
Quick download
Download
Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.

Preview Alejandro García Muñoz Títol PFC

Titulació: Enginyería Industrial Alumne (nom i cognoms): Alejandro García Muñoz Títol PFC: Diseño del plan de negocio y creación de la web Meet Your Phone Director del PFC: Miguel Ángel Saiz Convocatòria de lliurament del PFC: 11 - Gener - 2013 Contingut d’aquest volum: Anejo II: Escritura completa de la web PFC Ingeniería Industrial Superior: Anejo II ANEJO II Alejandro García Muñoz 2 PFC Ingeniería Industrial Superior: Anejo II Alejandro García Muñoz 3 PFC Ingeniería Industrial Superior: Anejo II Índice de anejo II Anejo II Anejo II.1. Estructura HTML de la pagina inicial index.html ……...……… 5 Anejo II.2. Estructura de la segunda pagina home.html ………………….. 7 Anejo II.3. Estructura básica de la pagina de resultados …………………. 14 Anejo II.4. Código javascript del motor de comparación …………………. 22 Anejo II.5. Código javascript que guarda los valores en cookies ……….. 29 Anejo II.6. Código que añade jquery a la web …………………………….. 30 Anejo II.7. Código que conecta con la base de datos …………………….. 49 Anejo II.8. Código que trae las imágenes de la base de datos para los terminales ………………………………………………………………………. 50 Anejo II.9. Código php que retorna de la base de datos los modelos según la marca escogida ……………………………………………………………….. 51 Anejo II.10. Código que retorna la ficha técnica dele móvil final ………… 52 Anejo II.11. Código php que retorna la imagen detallada del móvil final .. 53 Anejo II.12. Código que retorna los valores con formula de la marca y el modelo seleccionado …………………………………………………………. 54 Anejo II.13. Código que aplica estilos en la index.html …………………… 55 Anejo II.14. Código que aplica estilos a la pagina de los terminales home.html ……………………………………………………………………… 58 Anejo II.15. Código que aplica estilos a la pagina final de resultados …... 63 Alejandro García Muñoz 4 PFC Ingeniería Industrial Superior: Anejo II Anejo II.1. Estructura HTML de la pagina inicial index.html <!DOCTYPE html> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <LINK rel="stylesheet" href="./css/styles.css" type="text/css" media=screen> </head> <body> <div class="Header_Logo"> <div class="top_left_logo"></div> <div class="Portada_Header"></div> <div class="top_right_logo"></div> </div> <div class="Body_portada"> <div class="Portada_Cuerpo"> <div class="Information_Page"> El mundo de la telefonía es un mundo que forma parte de nuestras vidas, por lo que la elección de tu terminal debe ser la más correcta posible. Por ese motivo, MY PHONE te da la oportunidad de encontrar el teléfono que más se adecua a tus necesidades realizando una comparación en la que tu eres el que decide los parámetros a comparar y la importancia de estos según lo que necesitas. </div> <div class="Description_Boton"> <div class="Description"> ¡¡ENCUENTRA TU MÓVIL PERFECTO!! </div> <div class="Box_Button" > <img class="Boton_compare" onclick="location.href='Home.html'" src="./Images/Buttons/button_v2_black.gif"/> </div> </div> <div class="Logos_mobile"> <ul class="Lista_logos"> <li><img src="./Images/logo_movistar.jpg" width="150px" height="127px" alt=""></li> <li><img src="./Images/logo_orange.gif" width="150px" height="127px"></li> <li><img src="./Images/logo_vodafone.gif" width="150px" height="127px"></li> <li><img src="./Images/logo_yoigo.jpg" width="150px" height="127px"></li> </ul> </div> <div class="logo_footer"> Una vez realizada la comparación podrás comprobar las diferentes tarifas y sus respectivos precios en las diferentes compañías telefónicas. </div> </div> </div> </div> <div class="top_right_logo"></div> Alejandro García Muñoz 5 PFC Ingeniería Industrial Superior: Anejo II </body> </html> Alejandro García Muñoz 6 PFC Ingeniería Industrial Superior: Anejo II Anejo II.2. Estructura de la segunda pagina home.html <!DOCTYPE html> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="js/jqueryUI/js/jquery-1.8.0.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/jqueryUI/js/jquery-ui-1.8.23.custom.min.js"></script> <link rel="stylesheet" href="js/jqueryUI/themes/base/jquery.ui.all.css"> <script src="js/jqueryUI/ui/jquery.ui.core.js"></script> <script src="js/jqueryUI/ui/jquery.ui.widget.js"></script> <script src="js/jqueryUI/ui/jquery.ui.position.js"></script> <script src="js/jqueryUI/ui/jquery.ui.menu.js"></script> <script src="js/SaveValues.js"></script> <!--<link rel="stylesheet" href="js/jqueryUI/css/start/jquery-ui- 1.8.23.custom.css" /> --> <LINK rel="stylesheet" href="./css/HomeStyles.css" type="text/css" media=screen> <script type="text/javascript"> $(document).ready(function(){ $(".Ver_Mas").click(function(){ $(".Ver_Mas").hide(); $(".hidden_Values").show("fade",1000); $(".Ocultar").show(); $("html, body").animate({ scrollTop: $(document).height() }, "slow"); }); $(".Ocultar").click(function(){ $(".Ver_Mas").show(); $(".hidden_Values").hide("fade"); $(".Ocultar").hide(); }); $(".Marca_select").change(function () { elegido=$(this).val(); combodondevolcar = $(this).closest("div.Marca").next(".Label_Compare_terminals").next(".Modelo").children ("select").attr("id"); $.post("bbdd/Modelos.php", { elegido: elegido }, function(data){ if(combodondevolcar == "ComboModelo1") { $("#ComboModelo1").html(data); } if(combodondevolcar == "ComboModelo2") { $("#ComboModelo2").html(data); } if(combodondevolcar == "ComboModelo3") { $("#ComboModelo3").html(data); } }); }); $(".Modelo_Select").change(function () { Alejandro García Muñoz 7 PFC Ingeniería Industrial Superior: Anejo II elegido=$(this).val(); imagendondevolcar = $(this).closest("div.Compare_terminal").children(".imageTerminal").children(".imagen"); $.post("bbdd/Imagenes.php", { elegido: elegido }, function(data){ $(imagendondevolcar).attr("src",data); }); }) //cargamos los valores del 1 al 10 en los comparadores despelgables var myOptions = { 0 : '0', 1 : '1', 2 : '2', 3 : '3', 4 : '4', 5 : '5', 6 : '6', 7 : '7', 8 : '8', 9 : '9', 10 : '10' }; var mySelect = $('.Compare_Item_Value'); $.each(myOptions, function(val, text) { mySelect.append( $('<option></option>').val(val).html(text) ); }); }) </script> </head> <body> <div class="Header_Logo"> <!--<div class="top_left_logo"></div> <div class="top_right_logo"></div>--> <div class="Portada_Header"></div> </div> <div class="Body_portada"> <?php require("bbdd/conectar.php"); ?> <div class="Portada_Cuerpo"> <form action="bbdd/GetPhoneValues.php" method="post" enctype="multipart/form-data"> <div class="Terminals"> <div class="TerminalsValues"> <div class="Compare_terminal" id="Compare_terminal1"> <div class="imageTerminal"> <img src="Images/icono-antes-foto.gif" class="imagen" Width="160px" Height="288px" /> </div> <div class="Marca_Modelo" id="asdasdas"> Alejandro García Muñoz 8 PFC Ingeniería Industrial Superior: Anejo II <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); ?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo1" class='Modelo_Select combos' > </select> </div> </div> </div> <div class="Compare_terminal" id="Compare_terminal2"> <div class="imageTerminal"> <img src="Images/icono-antes-foto.gif" class="imagen" Width="175px" Height="288px"/> </div> <div class="Marca_Modelo" id="asdasdas"> <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); $resultado = mysql_query("select distinct Marca from mobiles"); for($i=0;$i<$numeroDeRegistros;$i++){ $Marca=mysql_result($resultado,$i,"Marca") or die(mysql_error()); echo "<OPTION VALUE='$Marca'>$Marca</option>";?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo2" class='Modelo_Select' > </select> </div> </div> </div> <div class="Compare_terminal" id="Compare_terminal3"> <div class="imageTerminal"> Alejandro García Muñoz 9 PFC Ingeniería Industrial Superior: Anejo II <img src="Images/icono-antes-foto.gif" class="imagen" Width="160px" Height="288px"/> </div> <div class="Marca_Modelo" id="asdasdas"> <div class="Marca" id="id del como marca"> <label class="Label_Compare_terminals">Marca</label> <?php conectar(); $resultado = mysql_query("select distinct Marca from mobiles"); $numeroDeRegistros=mysql_num_rows ($resultado) or die(mysql_error()); echo "<SELECT NAME='Marca_select' class='Marca_select' class='combos'>"; for($i=0;$i<$numeroDeRegistros;$i++){ $Marca=mysql_result($resultado,$i,"Marca") or die(mysql_error()); echo "<OPTION VALUE='$Marca'>$Marca</option>"; } echo "</SELECT>"; mysql_free_result($resultado); desconectar(); ?> </div><label id="textimg" class="Label_Compare_terminals">Modelo</label> <div class="Modelo" id="esta es la id de la classe Modelo"> <select id="ComboModelo3" class='Modelo_Select' > </select> </div> </div> </div> </div> </div> <div class="Preferences"> </div> <div class="Bottom_body_part"> <form id="Form_Custom_Values" name="Form_Custom_Values" action="bbdd/insertar_custom_values.php" method="post" enctype="multipart/form-data"> <div class="Compare_Values"> <div class="explicacion_puntos"> <span class="Info_compare_span">Escoge las caracteristicas que quieres comprar y asignales una puntuacion</span> Alejandro García Muñoz 10

Description:
Estructura básica de la pagina de resultados …………………. 14. Anejo II.4. . . Una vez realizada la comparación.
See more

The list of books you might like

Upgrade Premium
Most books are stored in the elastic cloud where traffic is expensive. For this reason, we have a limit on daily download.
DMCA & Copyright: Dear all, most of the website is community built, users are uploading hundred of books everyday, which makes really hard for us to identify copyrighted material, please contact us if you want any material removed.
Copyright @ PDFdrive.to, 2022 | We love our users