Table of Contents
Desarrollo Web
Lección 1 - Descripción general
Objetivo
Esta lección presenta las tecnologías necesarias para crear una aplicación web o un sitio web completamente funcional.
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.
| Tecnología | Función |
|---|---|
| HTML (lenguaje de marcado de hipertexto) | Estructura y contenido de página |
| CSS (hoja de estilo en cascada) | Diseño de página |
| JavaScript | Hacer dinámica la página |
| Script del lado del servidor - PHP, Java, Python | Hacer consistencia entre paginas, personalización |
| 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.
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. 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 aquí.
overall.html
<!DOCTYPE html>
<head>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
CSS
Las hojas de estilo en cascada proporcionan la información de diseño, incluido el posicionamiento y el color de los elementos. Observe la nueva línea del archivo html que informa al cliente dónde encontrar el archivo css. Nuestro ejemplo está empezando a parecerse más a una página web. Vea los resultados aquí.
overallcss.hmtl
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
style.css
body
{
background-color: #334;
}
h1
{
text-align: center;
color: #eee;
font-size: 3em;
}
nav
{
top: 100px;
color: #ddd;
padding-right: 100px;
}
nav li
{
list-style: none;
font-family: sans-serif;
font-size: 1.5em;
}
main
{
display: flex;
justify-content: space-between;
}
img
{
max-width: 1000px;
padding: 10px 10px;
border: 2px #eee solid;
}
Javascript
La página realmente comienza a despegar cuando agregamos Javascript, nuevamente al incluir una línea que le dice al cliente dónde encontrar el código JS (Javascript). El código se activa haciendo clic en el elemento de la barra lateral, que incluye detalles de la imagen a utilizar. El código reemplaza la imagen y cambia los colores de los elementos de la barra lateral para mostrar qué imagen se ha seleccionado.
Vea los resultados aquí.
overall.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li onclick="showImage(this, 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg')">Image 1</li>
<li onclick="showImage(this, 'https://www.applelanguages.com/en/img/top/sydney.jpg')">Image 2</li>
<li onclick="showImage(this, 'https://www.northshoremums.com.au/wp-content/uploads/elementor/thumbs/Trumpet-flowers-mr-ooz5cybjd1wb1rxa64q62sdfu2vr72qano0k7ul72e.jpg')">Image 3</li>
<li onclick="showImage(this, 'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg')">Image 4</li>
<li onclick="showImage(this, 'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg')">Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
overall.js
function showImage(element, photo)
{
// restore colour of all nav text
list = document.getElementsByTagName('li');
for(a of Object.keys(list))
{
item = list[a];
console.log(list[a]);
item.style.color="#ddd";
}
element.style.color='#0dd'; // change selected text to blue
document.getElementById('photo').src=photo; // update photo
}
PHP
PHP es un código que se ejecuta en el servidor para producir el HTML enviado al cliente. Es muy poderoso, pero en este ejemplo, simplemente proporcionamos el mismo HTML que ya hemos visto. Para una gran cantidad de imágenes, el código PHP es mucho más eficiente. También puede hacer frente a listas de diferentes longitudes más fácilmente que HTML puro .
Vea los resultados aquí.
overall.php
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<?php
$images = array('https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg',
'https://www.applelanguages.com/en/img/top/sydney.jpg',
'https://www.northshoremums.com.au/wp-content/uploads/elementor/thumbs/Trumpet-flowers-mr-ooz5cybjd1wb1rxa64q62sdfu2vr72qano0k7ul72e.jpg',
'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg',
'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg');
foreach($images as $k => $photo)
{
$i = $k+1;
echo "<li onclick=\"showImage(this, '$photo')\">Image $i</li>";
}
?>
</ul>
</nav>
<img id="photo" src="<?php echo $images[0]; ?>" />
</main>
</body>
MySQL
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.
MySQL
| ID | City | Photo | Link |
|---|---|---|---|
| 1 | Sydney | harbour | https://upload.wikimedia.org/wikipedia/commons/thu… |
| 2 | Sydney | city | https://www.applelanguages.com/en/img/top/sydney.j… |
| 3 | Sydney | Vivid | https://www.northshoremums.com.au/wp-content/uploa… |
| 4 | Sydney | Darling Harbour | https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a00… |
| 5 | Sydney | Bondi Beach | https://upload.wikimedia.org/wikipedia/commons/e/e… |
| 6 | Medellin | Mountains | https://thenomadvisor.com/wp-content/uploads/2019/… |
| 7 | Medellin | Nighttime | https://i0.wp.com/www.acimedellin.org/wp-content/u… |
| 8 | Medellin | Plaza Botero | https://elcomercio.pe/resizer/wIn8OAiq2Lp2zNAzUTN2… |
| 9 | Medellin | Botanical Gardens | https://inhabitat.com/files/orq-1-frontpage-b-537x… |
overall.php
<?php
// Configurar una conexión a una base de datos
define ('DBCONNECT', "/home/mag/pdo.php"); // Base de datos conexión
define ('ROOT', "/var/www/html/"); // Url
define ('DB', "webtut");
include_once DBCONNECT;
$db = DB;
$dsn = "mysql:host=$db_host;dbname=$db;charset=$db_char";
try
{ // conectar
$pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);
} catch (\PDOException $e) {
throw new \PDOException ($e->getMessage(), (int)$e->getCode());
}
// Obtener ciudad de la url
$city = $_GET['city'];
?><!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1><?php echo $city; ?></h1>
</header>
<main>
<nav>
<ul>
<?php
// Obtener fotos
$query = "SELECT * FROM photos WHERE city=?";
$args = array($city);
$rslt = $pdo->prepare($query);
$rslt->execute($args);
while ($row = $rslt->fetch())
{
$url = $row['url'];
echo "<li onclick=\"showImage(this, '{$row['url']}')\">{$row['name']}</li>";
}
?>
</ul>
</nav>
<img id="photo" src="<?php echo $url; ?>" />
</main>
</body>
