jimblizzard · Frank20060 · Sep 12, 2025 · Sep 12, 2025 · Sep 12, 2025 · Sep 12, 2025
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -2,6 +2,7 @@
 # [Choice] PHP version (use -bullseye variants on local arm64/Apple Silicon): 8, 8.0, 7, 7.4, 7.3, 8-bullseye, 8.0-bullseye, 7-bullseye, 7.4-bullseye, 7.3-bullseye, 8-buster, 8.0-buster, 7-buster, 7.4-buster, 7.3-buster
 ARG VARIANT=7-bullseye
 FROM mcr.microsoft.com/vscode/devcontainers/php:0-${VARIANT}
+RUN docker-php-ext-install mysqli pdo_mysql
 
 # [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
 ARG NODE_VERSION="none"

diff --git a/index.php b/index.php
@@ -18,7 +18,8 @@ function sayHello($name) {
 	<body>
 		<?php 
 
-		sayHello('remote world');
+		sayHello('hola');
+
 
 		phpinfo(); 
 

diff --git a/practicas/pp1-primera-app/estilo.css b/practicas/pp1-primera-app/estilo.css
@@ -0,0 +1,71 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: #fff;
+    color: #333;
+    line-height: 1.6;
+}
+
+header {
+    display: flex;
+    height: 20%;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #1e1e1e;
+    color: white;
+    padding: 20px 40px;
+}
+
+header img {
+    height: 100px;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    font-weight: normal;
+}
+
+main {
+    display: flex;
+    height: 60%;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 40px;
+    gap: 60px;
+}
+
+.fotopersonal {
+    text-align: center;
+}
+
+
+.fotopersonal h2 {
+    margin-top: 15px;
+
+}
+
+main h3 {
+    margin-bottom: 15px;
+    font-size: 1.3rem;
+}
+
+main p {
+    max-width: 600px;
+    font-size: 0.95rem;
+    color: #444;
+}
+
+footer {
+    height: 10%;
+    background-color: #1e1e1e;
+    color: white;
+    text-align: center;
+    padding: 15px;
+    font-size: 0.9rem;
+    margin-top: 40px;
+}
diff --git a/practicas/pp1-primera-app/hola.php b/practicas/pp1-primera-app/hola.php
@@ -0,0 +1,55 @@
+<?php
+/*----------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ *---------------------------------------------------------------------------------------*/
+function sayName($name) {
+	echo "Hola soy $name";
+	echo "<br>";
+}
+?>
+
+<html>
+	<head>
+		<title>Visual Studio Code Remote :: PHP</title>
+		<link rel="stylesheet" href="estilo.css">
+	</head>
+	<body>
+
+		<header>
+			<img src="imagenes/logo-fpllefia.jfif" alt="Logo del col·legi FP Llefià">
+			<h1>Módulo 7 - Práctica 1. Mi primera aplicación en PHP</h1>
+		</header>
+		<main>
+			<div style="display: flex; gap: 40px;">
+				<div class="fotopersonal">
+					<div  style="width: 180px; border-radius: 50%; overflow: hidden; ">
+						<img src="imagenes/yo.jpg" alt="Una foto mia" style="width: 200px;">
+					</div>	
+
+					<h2>Frank Villar Redondo</h2>
+				</div>
+				<div >
+					<h3>Explicacion codigo señalado</h3>
+					<p style="white-space: pre-line;"> <!-- el style es para que cuando le de al space me haga un salto de linea y no me lo ponga todo junto-->
+						<?= "Lo primero es lo que se usa para abrir un bloque de codigo en php que se va ha ejecutar.
+						Lo segudo que esta marcado es una funcion en php que que muestra por pantalla (con el comando echo) \"Hello\" y lo que le pasemos con la variable name. Esta dentro de un bloque de codigo de php.
+						El tercer recuadro muestra como se ejecuta la funcion que hemos creado anterirmente, lo que hay entre parentesis es el contenido que tiene la variable name.
+						El cuarto llama a una funcion que ya estara creada y que muetestra la info del servidor. l'Alber t dema no va a l'escola "; ?>
+
+					</p>
+				</div>
+			</div>
+		</main>
+		<footer>
+			<p>Frank Villar Redodno</p>
+			<?php 
+
+				echo date('d/m/Y');  //Lo se porque es parecido a javascript y es lo que hicimos una vez con carlos o con juan no me acuerdo
+
+			?>
+		</footer>
+		<br>
+
+	</body>
+</html>
diff --git a/practicas/pp1-primera-app/imagenes/logo-fpllefia.jfif b/practicas/pp1-primera-app/imagenes/logo-fpllefia.jfif
diff --git a/practicas/pp1-primera-app/imagenes/yo.jpg b/practicas/pp1-primera-app/imagenes/yo.jpg
diff --git a/practicas/pp2/ex1.php b/practicas/pp2/ex1.php
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejercicio 1</title>
+    <style>
+        body{
+            justify-items: center;
+            justify-content: center;
+            padding: 20px;
+            padding-left: 50px;
+            padding-right: 50px;
+            background-color: beige;
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+
+        }
+        h1{
+            color: brown;
+            font-size: 40px;
+        }
+        #numBox{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;  
+            width: 100%;  
+            height: fit-content;
+            border: 2px, dotted, brown;
+            padding: 5px;
+            font-size: 1.5em;
+
+
+        }
+
+    </style>
+</head>
+<body>
+    <h1>Numeros pares entre 50 y 500</h1>
+    <div id="numBox">
+        <?php
+
+            for($num = 50; $num <=500; $num+= 2){
+
+                echo "<div>$num</div>";
+
+            }
+
+        ?>
+    </div>
+</body>
+</html>
diff --git a/practicas/pp2/ex2.php b/practicas/pp2/ex2.php
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejercicio2</title>
+    <style>
+        body{
+            justify-items: center;
+            justify-content: center;
+            padding: 20px;
+            padding-left: 50px;
+            padding-right: 50px;
+            background-color: beige;
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+
+        }
+        h1{
+            color: brown;
+            font-size: 40px;
+        }
+        h2{
+            color: brown;
+            font-size: 30px;
+        }
+        #espacioTablas{
+
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;  
+            width: fit-content;  
+            height: fit-content;
+            border: 2px, dotted, brown;
+            padding: 10px;
+            gap: 20px;
+            justify-content: center;
+
+        }
+        .tabla{
+            padding: 2px;
+           font-size: 20px;
+
+        }
+    </style>
+</head>
+<body>
+    <h1> Ejercicio 2</h1>
+    <h2>Tablas de multiplicar</h2>
+    <div id="espacioTablas">
+
+        <?php
+
+            for($i=1; $i<=11; $i++){
+                echo "<div class= 'tabla'>";
+                for($j=1; $j<10; $j++){
+                    $resul = $i*$j;
+                    echo "$i x $j = $resul";
+                    echo "<br>";
+
+                }
+                echo "</div>";
+
+            }
+
+        ?>
+
+
+
+    </div>
+</body>
+</html>
diff --git a/practicas/pp2/ex3.php b/practicas/pp2/ex3.php
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ejercicio 3</title>
+    <style>
+
+        body{
+            justify-items: center;
+            justify-content: center;
+            padding: 20px;
+            padding-left: 50px;
+            padding-right: 50px;
+            background-color: beige;
+            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+
+        }
+        h1{
+            color: brown;
+            font-size: 40px;
+        }
+        .par, .impar{
+            width: 100px;
+            height: 100px;
+            justify-items: center;
+            align-items: center;
+        }
+        .par p, .impar p{
+            margin: 10px;
+            font-size: 60px;
+        }
+        .par{
+            border: 10px solid red;
+        }
+        .impar{
+            border: 10px solid blue;
+        }
+
+    </style>
+</head>
+<body>
+
+    <h1>Número aleatorio ¿PAR O IMPAR?</h1>
+    <h3>Se genera un número del 1 al 100 y determinamos si es par (borde rojo) o impar (borde azul)</h3>
+    <?php
+
+        $numAleatorio = rand( 1, 100);
+        if ($numAleatorio % 2 == 0){
+            echo"
+            <div class='par'>
+                <p>$numAleatorio</p>
+            </div>";
+        }else{
+            echo"
+            <div class='impar'>
+                <p>$numAleatorio</p>  
+            </div>";
+        }
+
+
+    ?>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,8 @@ function sayHello($name) { @@
     	<body>
     		<?php
-    		sayHello('remote world');
+    		sayHello('hola');
     		phpinfo();
@@ Expand Down @@