Tech School

User Tools

Site Tools

Trace:
es:web_development:overview

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
es:web_development:overview [2022/02/07 11:59]
mag [Javascript] 		es:web_development:overview [2023/08/16 09:33] (current)
Line 4: Line 4:
 Esta lección presenta las tecnologías necesarias para crear una aplicación web o un sitio web completamente funcional. Esta lección presenta las tecnologías necesarias para crear una aplicación web o un sitio web completamente funcional.
  
 +{{:en:web_development:overallphp.png?690|}}
 ==== Introducción ==== ==== Introducción ====
 Las siguientes tecnologías se utilizan comúnmente para crear páginas web y aplicaciones. Si bien una página extremadamente básica se puede crear únicamente con HTML , normalmente querrá usar una combinación de estos para sus sitios. Las siguientes tecnologías se utilizan comúnmente para crear páginas web y aplicaciones. Si bien una página extremadamente básica se puede crear únicamente con HTML , normalmente querrá usar una combinación de estos para sus sitios.
Line 11: Line 12:
 |CSS (hoja de estilo en cascada)|Diseño de página| |CSS (hoja de estilo en cascada)|Diseño de página|
 |JavaScript|Hacer dinámica la página| |JavaScript|Hacer dinámica la página|
-|Script del lado del servidor - PHP, Java, Python|Hacer consistencia entre paginas, Personalizacion| +|Script del lado del servidor - PHP, Java, Python|Hacer consistencia entre paginas, personalización| 
-|Base de datos - MySQL, SQL|Guardar informacion|+|Base de datos - MySQL, SQL|Guardar información|
  
 Miremos una página simple para tener una idea de lo que proporciona cada una de estas tecnologías al crear una página que muestra una foto y permite cambiar la foto haciendo clic en los enlaces en un panel lateral. Miremos una página simple para tener una idea de lo que proporciona cada una de estas tecnologías al crear una página que muestra una foto y permite cambiar la foto haciendo clic en los enlaces en un panel lateral.
  
 ==== HTML ==== ==== HTML ====
-Esta versión utiliza sólo HTML . Por lo general, es donde comenzamos a construir nuestra página porque contiene el contenido y proporciona la estructura que se usará más adelante. Por lo general, colocamos los elementos en el orden en que los vemos en la página (de arriba a abajo, de izquierda a derecha). En el <cuerpo> del código podemos ver una sección <header> y una sección <main>. La <main>sección contiene la navegación y la imagen mostrada.+Esta versión utiliza sólo HTML . Por lo general, es donde comenzamos a construir nuestra página porque contiene el contenido y proporciona la estructura que se usará más adelante. Generalmente, colocamos los elementos en el orden en que los vemos en la página (de arriba a abajo, de izquierda a derecha). En el <body> del código podemos ver una sección <header> y una sección <main>. La sección <main> contiene la navegación y la imagen mostrada.
  
 Vea la página resultante [[https://techschool.murraygunn.id.au/webdev/demo/overall.html|aquí]]. Vea la página resultante [[https://techschool.murraygunn.id.au/webdev/demo/overall.html|aquí]].
  
-**general.html**+**overall.html**
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
Line 49: Line 50:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
 </head> </head>
 <body> <body>
Line 69: Line 70:
 </body></code> </body></code>
  
-**screen.css**+**style.css**
 <code>body <code>body
 { {
Line 99: Line 100:
 { {
     display: flex;     display: flex;
-    justify-content: space-betwee;+    justify-content: space-between;
 } }
  
Line 117: Line 118:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  <script type="text/javascript" src="overall.js"></script>  <script type="text/javascript" src="overall.js"></script>
 </head> </head>
Line 162: Line 163:
 <code><!DOCTYPE html> <code><!DOCTYPE html>
 <head> <head>
-    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />+    <link rel="stylesheet" media="screen" type="text/css" href="style.css" />
  <script type="text/javascript" src="overall.js"></script>  <script type="text/javascript" src="overall.js"></script>
 </head> </head>
Line 193: Line 194:
 MySQL es una base de datos que se puede utilizar para almacenar cualquier información que necesite en un conjunto de tablas. En este ejemplo, almacenamos una lista de fotos en una sola tabla. Luego nos conectamos a la base de datos en la primera parte del código PHP y obtenemos la lista de fotos en la última parte. MySQL es una base de datos que se puede utilizar para almacenar cualquier información que necesite en un conjunto de tablas. En este ejemplo, almacenamos una lista de fotos en una sola tabla. Luego nos conectamos a la base de datos en la primera parte del código PHP y obtenemos la lista de fotos en la última parte.
  
-Vea los resultados en http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=sydney y http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city= medellín.+Vea los resultados en [[http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=sydney]] y [[http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=medellín]].
  
 **MySQL** **MySQL**
Line 209: Line 210:
 **overall.php** **overall.php**
 <code><?php <code><?php
-    // Set up database connection +    // Configurar una conexión a una base de datos 
-    define ('DBCONNECT', "/home/mag/pdo.php"); // database connection +    define ('DBCONNECT', "/home/mag/pdo.php"); // Base de datos conexión 
-    define ('ROOT', "/var/www/html/"); // url+    define ('ROOT', "/var/www/html/"); // Url
     define ('DB', "webtut");     define ('DB', "webtut");
     include_once DBCONNECT;     include_once DBCONNECT;
Line 217: Line 218:
     $dsn = "mysql:host=$db_host;dbname=$db;charset=$db_char";     $dsn = "mysql:host=$db_host;dbname=$db;charset=$db_char";
     try      try 
-    { // connect+    { // conectar
         $pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);         $pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);
     } catch (\PDOException $e) {     } catch (\PDOException $e) {
Line 223: Line 224:
     }     }
          
-    // get city from URL+    // Obtener ciudad de la url
     $city = $_GET['city'];     $city = $_GET['city'];
 ?><!DOCTYPE html> ?><!DOCTYPE html>
Line 238: Line 239:
             <ul>             <ul>
 <?php <?php
-    // get photos+    // Obtener fotos
     $query = "SELECT * FROM photos WHERE city=?";     $query = "SELECT * FROM photos WHERE city=?";
     $args  = array($city);     $args  = array($city);
es/web_development/overview.1644263949.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki