Programación II

LEC COMPUTACIÓN

Guatemala, C.A.
Copyright © 2022 LEC COMPUTACION

P UBLISHED BY LECSA

WWW. LECCOMPUTACION . COM

 Índice general

I Generalidades

1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1 Presentación 7
1.2 Consideraciones 8
1.3 Importancia de la Programación 8

2 La Programación Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.1 ¿Por qué la Programación Web? 9
2.2 Arquitectura Cliente - Servidor 10
2.3 Navegadores Web 10

3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.1 Generalidades sobre HTML 11
3.2 Primeros pasos con HTML 11
3.3 Etiquetas comunes 14
3.3.1 Encabezados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.2 Párrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.3 Cambios de tema o Líneas Horizontales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.4 Saltos de línea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.5 Imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3.6 Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3.7 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.3.8 Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.3.9 Otras etiquetas importantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.4 Otros términos relacionados 17
3.4.1 Sitio Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4.2 Referencias relativas y absolutas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.4.3 Uso de Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.1 Generalidades 21
4.2 Sintaxis 22
4.3 Tipos de selectores 23
4.4 CSS Avanzado 23

5 ¿Qué software necesitarás? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

5.1 XAMPP 27
5.2 Visual Studio Code 28

6 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.1 Generalidades 31
6.2 Entorno de desarrollo 31
6.2.1 Servidor, hosting, localhost y htdocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.2.2 Etiquetas de apertura y cierre PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
6.3 Variables 35
6.4 Expresiones y Operadores 38
6.5 Decisiones 39
I
Generalidades

1 Introducción . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.1 Presentación
1.2 Consideraciones
1.3 Importancia de la Programación

2 La Programación Web . . . . . . . . . . . . . . . . 9
2.1 ¿Por qué la Programación Web?
2.2 Arquitectura Cliente - Servidor
2.3 Navegadores Web

3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.1 Generalidades sobre HTML
3.2 Primeros pasos con HTML
3.3 Etiquetas comunes
3.4 Otros términos relacionados

4 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.1 Generalidades
4.2 Sintaxis
4.3 Tipos de selectores
4.4 CSS Avanzado

5 ¿Qué software necesitarás? . . . . . . . . . . 27

5.1 XAMPP
5.2 Visual Studio Code

6 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.1 Generalidades
6.2 Entorno de desarrollo
6.3 Variables
6.4 Expresiones y Operadores
6.5 Decisiones
 1. Introducción

La programación es un proceso mediante el cual se crean soluciones que, a través de distintos

dispositivos tecnológicos, faciliten la vida cotidiana y automaticen las diversas actividades que el
ser humano realiza; es parte de la evolución tecnológica de la que estamos inmersos. Cada vez
son más y mejores las soluciones que se presentan en el mundo de la medicina, construcción,
administración financiera, educación, automovilismo, deportes, banca, comercio, entretenimiento,
entre otras actividades.

En la actualidad las herramientas y lenguajes de programación han dado paso a nuevos paradigmas,
formas de programar y criterios, de acuerdo con las necesidades de la sociedad.

Para la creación de soluciones, previamente se lleva a cabo un análisis lógico y computacional

que permite verificar el flujo de la información, plantear eficientes estrategias de codificación,
para dar paso a la implementación de soluciones y aplicaciones que permitan a los usuarios vivir
la experiencia adecuada o encontrar los resultados requeridos; para ello se utilizan diferentes
herramientas y la combinación de uno o más lenguajes de programación que permiten a los
dispositivos llevar a cabo las labores indicadas.

1.1 Presentación
LEC Computación, como empresa de servicios diversos de outsourcing del área de tecnología,
a través de varias propuestas académicas en donde la tecnología es el eje principal para otras
ciencias, ha contribuido en la formación de jóvenes de muchas generaciones en puntos geográficos
y contextos distintos, quienes se han convertido en profesionales de éxito que utilizan la tecnología
como herramienta indispensable de sus actividades. Para dar seguimiento a uno de los cursos
que forma parte de los pilares tecnológicos del desarrollo académico basándonos en experiencias
previas y mejores prácticas, proponemos este libro para el curso de Programación II, dirigido a
estudiantes de carreras de nivel medio como Bachillerato o similares, especializadas en ramas de
informática, electrónica u otros.
 8 Capítulo 1. Introducción

El enfoque del libro propuesto da seguimiento a los requerimientos del área para el desarrollo de
pensamiento lógico, con una metodología teórico-práctica que aprovecha las bondades de distintas
herramientas y tecnologías orientadas a la programación Web.

El libro está dividido en tres módulos:

Generalidades: Construcción del entorno básico de programación web, integrando las

herramientas necesarias y conociendo los aspectos fundamentales para la codificación de
soluciones.

Programación Orientada a Objetos: Desarrollo de aplicaciones basadas en la imple-

mentación de herramientas que permiten al usuario la construcción de elementos mediante
modelos de arquitectura de software.

Conexión a Base de Datos: Creación de soluciones web por medio de diversas herramientas
de programación. Realización de proyectos que integran bases de datos.

1.2 Consideraciones
El presente libro está enfocado a ser una guía tanto para el docente como para el alumnos a través
de la cual se fomente el pensamiento crítico y se le proporcionen las herramientas lógicas para que
exista un análisis profundo para una experiencia real y única en el campo de la programación de
computadoras.

1.3 Importancia de la Programación

El pensamiento sistémico, la lógica de programación, el pensamiento computacional y otros
elementos, forman parte de nuestra vida cotidiana y muchas veces pasan desapercibidos hasta que
algo o alguien, como es el caso de este libro, nos hace énfasis en esos términos, demostrando que
contribuimos de alguna manera en ciertos procesos de la Programación, ya sea alimentando de
información los sistemas, formando parte de decisiones, consumiendo resultados, entre otros.

La mayoría de las soluciones implementadas fueron elaboradas buscando comodidad, simplicidad,

seguridad y otros factores que la experiencia de usuario ha permitido determinar de acuerdo con
la satisfacción de las necesidades sociales. Esto ha permitido que la ciencia y los expertos sigan
indagando y fortaleciendo procesos para la construcción de soluciones diversas. Es nuestra labor a
través de este libro y la de tu docente, guiarte para que eches un vistazo o experimentes una nueva
visión y, quizás en algún momento, seas parte del grupo de expertos o simplemente seas un mejor
usuario y puedas opinar críticamente sobre lo que utilices.

Hace varios años salió un vídeo titulado: "Todo mundo debería saber programar" en donde varios
expertos dan su opinión acerca del tema. En ese vídeo se ven algunas de las soluciones que en su
momento han formado parte de nuestras vidas.
Ejercicio 1.1 Busca en la Internet el vídeo mencionado anteriormente, tu docente comple-
mentará con algunas indicaciones necesarias para que entregues tu resumen a través de una
presentación en Microsoft Sway, Microsoft PowerPoint, Prezi u otro presentador que se requiera.
Observa detenidamente el vídeo, analiza cada respuesta al tema central tanto de los expertos
como de los niños y adolescentes. En el resumen agrega tu comentario personal. ■
 2. La Programación Web

Está orientada a la construcción de soluciones funcionales para la Internet o en algunos casos

específicos la Intranet; cambia rotundamente el concepto de la Programación de aplicaciones
funcionales en un solo dispositivo y ahora se enfoca directamente en equipos o dispositivos
conectados en red. Los lenguajes de Programación también fueron adaptados o mejorados para
construir aplicaciones web con nuevos requisitos y disposiciones. Permite la construcción de
soluciones que necesitan de disponibilidad 24/7 los 365 días del año. Se incorporan conceptos
como almacenamiento en la nube, tecnología cliente-servidor, accesibilidad, entre otros.

Las soluciones web están dirigidas a todo tipo de usuario con diversas actividades y necesidades de
uso desde cualquier dispositivo conectado a la red.

Ejercicio 2.1 Elabora un glosario de términos. Incluye los elementos que tu docente te indique
como carátula, bibliografía, entre otros. Entrega tu material de forma impresa y digital por
medio de la plataforma o herramienta implementada en el curso. ■

2.1 ¿Por qué la Programación Web?

En los últimos años la Internet se ha globalizado y en la actualidad es más fácil acceder a los
servicios que provee desde cualquier dispositivo móvil. Son cada vez más negocios y organizaciones
que brindan soluciones de diversa índole, los procesos se pueden realizar comúnmente entre
empresas y clientes individuales o como suele suceder en la actualidad, directamente entre clientes
en donde la empresa solamente actúa como intermediaria. Un usuario puede pagar sus servicios
básicos del hogar desde la banca en línea, solicitar comida a domicilio, ver películas o series,
participar en una conferencia en línea, completar un curso, enterarse de las noticias del mundo,
entre otras actividades. Es allí donde surge la necesidad de implementar soluciones informáticas,
sitios, páginas web y otros elementos interactivos que funcionen a través de Internet o desde la
propia Intranet de una corporación. Todo esto realizado a través de Programación web.
 10 Capítulo 2. La Programación Web

Ejercicio 2.2 Utiliza Microsoft Word o el procesador de palabras que te indique tu docente
y con las especificaciones necesarias (identificación, introducción, contenido, conclusiones,
bibliografía, entre otros) investiga al menos 8 sitios web o páginas de Internet que presten
servicios de diferente índole, describe cada uno de ellos, sus principales funciones, características,
público al que está dirigido y con qué tipo de herramientas de Programación están construidos.
Añade dirección de acceso (dirección que muestra el navegador) e incluye imágenes de sus
principales vistas. ■

2.2 Arquitectura Cliente - Servidor

Es un modelo de desarrollo de soluciones web que permite la interacción de un proveedor o provee-
dores de recursos denominado Servidor y el consumidor y/o proveedor de datos o información
llamado Cliente. Este proceso está divido de forma lógica, el cliente, que generalmente en la Pro-
gramación web es una página en donde el o los usuarios ingresan solicitudes o peticiones, traslada
los datos de la solicitud a las herramientas de proceso del servidor por medio de un intérprete, el
servidor recibe los datos para transformarlos en información y luego devolver nuevamente por el
intérprete los resultados generados de acuerdo con las solicitudes enviadas.

El primer módulo del libro se enfoca en conocer y utilizar parte de los elementos básicos que inter-
vienen en la arquitectura cliente-servidor, construirás páginas web estructurándolas primeramente
con el lenguaje HTML, mejorando su aspecto con CSS, luego implementarás el lenguaje PHP para
interpretar instrucciones, enviar y recibir procesos del servidor.

En los siguientes contenidos verás paso a paso cómo instalar las herramientas necesarias para la
construcción de proyectos web basados en la arquitectura cliente-servidor, iniciando con el diseño
y construcción de páginas para luego implementar proyectos que interactúen con el servidor.

2.3 Navegadores Web

Aunque es un término muy común en la actualidad, cabe mencionar en esta sección la definición de
Navegador web como herramienta de uso común en términos de desarrollo web.

Los navegadores web son aplicaciones construidas para facilitar el acceso a diversos servicios
de Internet, especialmente al hipertexto o información entrelazada o relacionada que forma parte
principal de los sitios web. Ejemplo de navegadores son: Google Chrome, Mozilla Firefox, Edge,
Safari, Brave, Ópera, entre otros.

Poseen características y configuraciones específicas que permiten a los usuarios personalizar el

entorno de la aplicación y mejorar la experiencia de uso. Para realizar tus actividades de ejecución
de proyectos y prácticas utiliza el que mejor te convenga, sin embargo se recomienda Edge o
Chrome.

Es importante mencionar que comúnmente se confunden los términos navegador y buscador.

Buscador es un herramienta de Internet que se utiliza desde un navegador precisamente para
realizar búsquedas de recursos o información en la web. No confundas las definiciones.
 3. HTML

3.1 Generalidades sobre HTML

Lenguaje de marcado de texto, del acrónimo HTML HyperText Markup Language. Utilizado
como estándar del Consorcio W3C 1 para la estructuración de páginas web.

Basado en la utilización de etiquetas interpretadas por medio de navegadores web, escrito desde
un editor de texto como Note++, TextEdit o el mismo Bloc de Notas, combinado con tecnologías,
lenguajes o intérpretes como JavaScript, CSS, PHP y otros, permite la creación de soluciones web
para las necesidades de usuarios, empresas, comercio y los diversos servicios de Internet.

3.2 Primeros pasos con HTML

La mejor manera de conocer y aprender este tipo de actividades es practicando y construyendo
proyectos que van desde los niveles básicos hasta grandes soluciones complejas. A continuación
realizarás una serie de ejercicios utilizando el lenguaje de marcas HTML, agregando las etiquetas
estándar o más comunes para la estructuración de páginas web.

En este ejercicio implementarás la estructura básica de un documento HTML para luego agregar
más etiquetas que te permitan mostrar contenido específico.

Ejercicio 3.1 Crea una carpeta llamada “ej001” en la ubicación que tu docente te indique. Abre
el bloc de notas del sistema, transcribe el código que se te presenta a continuación, guarda el
archivo en la carpeta “ej001” con el nombre demo01.html. En la opción Tipo, de tu editor, elige:
Todos los archivos. Observa la imagen de referencia.

1 Consorcio WWW, ente regulador de la mayoría de tecnologías web a largo plazo.

12 Capítulo 3. HTML

<!DOCTYPE html>

<html>

<head>

<title>Progra II</title>

</head>

<body>

<h1>Ejemplo de estructura básica de páginas HTML</h1>

<p>A partir de esta estructura podrás construir diversas páginas web. Al principio parecerán
simples. Tomarán forma al añadir opciones adicionales o parámetros a las etiquetas básicas o
cuando se implementen hojas de estilo.</p>

<p> Práctica realizada en el bloc de notas.</p>

</body>

</html>

Figura 3.1: Guardar el archivo con la opción Todos los archivos y la extensión html

Cada elemento o etiqueta escrita en el ejemplo anterior realiza una función específica dentro de
los documentos HTML cuando es reconocida por el navegador web construye y estructura los
componentes de la página. Observa que cada etiqueta inicia con el símbolo menor que (<) y finaliza
3.2 Primeros pasos con HTML 13

con el símbolo mayor que (>). La mayoría de elementos HTML utiliza una etiqueta de apertura
y otra de cierre para estructurar un componente, hay excepciones donde es necesaria una sola
etiqueta:

<etiqueta de apertura> Contenido </etiqueta de cierre>.

Durante el desarrollo del tema se ampliará información sobre las etiquetas, sus atributos y especifi-
caciones. Por el momento es importante que reconozcas la estructura básica y las etiquetas de uso
común.

Existen diversos sitios y aplicaciones dedicadas a la creación de páginas web, sin embargo, en todas
siempre se utilizará la estructura básica que incluye:

<!DOCTYPE html>: Define el estándar de HTML o versión que se utilizará en la estructura

del documento. Etiqueta indispensable, siempre irá en la primera línea del documento
Permite que los navegadores desplieguen la página correctamente. De no incluir el estándar,
los navegadores interpretarán y mostrarán las páginas de acuerdo con sus propias reglas, no
importando si se muestra o no el contenido de manera correcta.

<html></html>: Etiqueta raíz, indica el inicio y cierre de la estructura principal de la página.

<head></head>: Sección del documento que posee meta información útil para que tu página
web sea encontrada por los buscadores de acuerdo con la categoría o línea de negocio para la
que se construye.

<title></title>: Muestra información en la pestaña principal de los navegadores, generalmente

el nombre de la empresa, producto o tema específico.

<body></body>: Sección que alberga todos los elementos que darán forma a la página. Es
la sección que estructura la mayor parte de componentes visibles al usuario.

El lenguaje de marcas no es sensible a mayúsculas o minúsculas como es el caso de algunos

lenguajes de Programación, sin embargo como buena práctica, se te recomienda utilizar minúsculas
a la hora de escribir tus etiquetas, respetando los parámetros o atributos en donde sí es necesario
que escribas mayúsculas.

Otras etiquetas incluidas en el ejemplo que forman parte de un documento HTML son:

<h1>Título </h1>: Ejemplo de títulos incluidos dentro del contenedor o cuerpo de la página.

<p>Texto </p>: Utilizada para escribir párrafos de texto dentro del cuerpo de la página o
contenedor.
 14 Capítulo 3. HTML

3.3 Etiquetas comunes

Para construir o estructurar páginas web, con frecuencia se utilizan ciertas etiquetas que le dan la
forma básica a la página. En este apartado encontrarás las más utilizadas.

3.3.1 Encabezados
Los encabezados o títulos de los temas o secciones de texto se definen con las etiquetas de la <h1>
a la <h6> dependiendo de la importancia del tema o de la estructuración que pretendas darle a la
página, utiliza elementos de apertura y cierre.

3.3.2 Párrafos
Para estructurar párrafos o bloques de texto, utiliza la etiqueta <p> texto </p>. Los párrafos son
utilizados frecuentemente para escribir líneas o bloques de texto con información descriptiva de
temas específicos.

3.3.3 Cambios de tema o Líneas Horizontales

Son utilizados generalmente para separar información dentro del contenido de las páginas web, la
etiqueta <hr> es la encargada de marcar este elemento, es una de las etiquetas con excepción, no se
cierra, puede recibir ciertos parámetros o modificadores que permiten personalizarla.

3.3.4 Saltos de línea

Para generar saltos de línea dentro de las páginas web, utiliza la etiqueta <br> es similar a presionar
la tecla Enter o Intro dentro de un editor de texto. Al igual que en los editores, se recomienda no
abusar de los saltos de línea, si deseas generar un espacio mayor dentro de un bloque de contenido
lo mejor será recurrir a otra etiqueta de separación o verificar la estructura necesaria. Un navegador
interpreta como salto de línea cuando existe la etiqueta <br>, si a la hora de editar dejas un espacio
generado por la tecla Enter o Intro, el navegador no reconocerá esos espacios y los omitirá.

3.3.5 Imágenes
Incluir imágenes dentro de tus páginas web te permitirá agregar mayor visibilidad o representación
gráfica a los temas, productos o elementos de tu documento. Para insertar imágenes utiliza la
etiqueta <img> no necesita cierre, sin embargo sí es necesario detallar sus atributos. Su sintaxis es:

<img src= “ url ” alt= “texto alternativo” width=“tamaño” height=“tamaño”>

src=“url” hace referencia a la ubicación física de la imagen, generalmente una carpeta de

recursos.

alt=“texto alternativo” muestra un texto alternativo en caso el navegador no encuentre la

imagen.

width =“tamaño” modifica el ancho de la imagen, el tamaño se indica en pixeles o porcentaje.

height =“tamaño” modifica el alto de la imagen, el tamaño se indica en pixeles o porcentaje.

 3.3 Etiquetas comunes 15

Ejercicio 3.2 Utiliza los recursos a tu alcance e investiga todo lo relacionado a tipos o for-
matos de imagen disponibles y más utilizados en la construcción de páginas web. Realiza tus
resúmenes correspondientes y de acuerdo con los parámetros que tu docente te indique, realiza
una presentación en Sway de Microsoft, PowerPoint u otra herramienta disponible. Agrega
a tu investigación un anexo con al menos cinco sitios colaborativos para descargar imágenes
gratuitas. Investiga el tipo de licencia de uso de las imágenes y las opciones que los sitios de
imágenes incluyen. No olvides incluir la bibliografía en tu presentación. ■

3.3.6 Enlaces
Los enlaces son comunes en la mayoría de páginas web, permiten a los usuarios ir de una a otra
sección de la página o a otras páginas del mismo sitio. Utiliza la etiqueta:

<a href=“url ” target=“tipo”> Texto de enlace </a>

src=“url” hace referencia a la ubicación del recurso a enlazar, hacia la misma página, mismo
sitio u otros sitios.

target=“tipo” establece la forma de desplegar el recurso, por defecto se muestra en la misma

ventana.

3.3.7 Listas
Las listas te permiten organizar información en secuencias de elementos dentro de las páginas
web. HTML gestiona listas de datos utilizando tres tipos específicos: ordenados, no ordenados y de
definiciones.

Para organizar una lista primero define el tipo de lista y luego agrega cada item o elemento. A
continuación las etiquetas utilizadas:

<ol> estructura de lista </ol>: Marca inicio y fin de la lista tipo ordenada. Forman parte de
esta etiqueta los parámetros type, start y reverse.

• type: Establece el tipo de marcador para cada elemento; ejemplo números, letras,
números romanos,viñeta entre otros.

• start: Establece el valor de inicio de la numeración de los elementos.

• reverse: Permite mostrar la numeración en orden descendente.

<ul> estructura de lista </ul>: Marca inicio y fin de la lista de tipo no ordenada. Cada
elemento muestra una viñeta u otro símbolo secuencial que se indique. Utiliza el parámetro
type para establecer el estilo de la viñeta.

<li> Define cada elemento de las listas ordenadas y no ordenadas.

<dl> estructura de lista </dl>: Marca el inicio y fin de una lista de términos y definiciones.
Para cada elemento o término se utiliza la etiqueta <dt>; las definiciones se establecen con
<dd>.
 16 Capítulo 3. HTML

3.3.8 Tablas
Dentro del desarrollo y construcción de páginas web las tablas son elementos utilizados para
organizar información por medio de filas y columnas. En algún momento y con las exigencias
de adaptabilidad de contenido para los diferentes dispositivos donde se muestran páginas web, se
pensó en dejar su uso, sin embargo a la hora de incluir CSS y mejorar el aspecto de diseño, aún
siguen utilizándose como opción básica para agrupar elementos.

Las tablas son elementos especiales que utilizan más de una etiqueta para estructurar contenido. La
secuencia es indicar la apertura y cierre de toda la tabla, crear la fila de encabezados y añadir datos
que den origen a las columnas. Para este proceso se emplean las siguientes etiquetas:

<table> estructura </table>: Marca inicio y fin de la tabla.

<tr> datos </tr>: Define filas de datos, es importante aclarar previamente la forma que se le
dará a la tabla para luego estructurarla adecuadamente.

<th> datos </th>: Permite añadir títulos de columna, es opcional de acuerdo con el tipo de
contenido a mostrar.

<td> dato </td>: Agrega datos directamente en cada fila.

3.3.9 Otras etiquetas importantes

Dentro de la estructuración de páginas y sitios, es conveniente mencionar otras etiquetas esenciales
para organizar contenidos. Al igual que la etiqueta de párrafos <p> que maneja bloque de contenido,
las etiquetas a continuación te servirán para estructurar bloques de los segmentos o elementos que
generalmente incluye una página:

<div> bloque </div> este elemento es frecuentemente utilizado para organizar contenido,
por sí solo no genera ningún elemento visible, no utiliza parámetros. El verdadero potencial
de la etiqueta se obtiene al aplicar estilos con CSS por medio de clases e identificadores.

Secciones o elementos de diseño permiten organizar información de acuerdo con los elemen-
tos estructurales básicos de una página, su potencial se genera implementando CSS, dentro
de los más comunes están:

• <header> Contenido </header>: Ubicado generalmente en la parte superior de las pági-

nas web. Muestra información del sitio como nombre de la empresa a quien pertenece,
información general, logotipo, búsqueda dentro del sitio, entre otros elementos.

• <nav> Contenido </nav>: Usualmente se incluye debajo de la sección <header>

cuando existe o en la parte superior de la página, sin embargo en la maquetación
y diseño de sitios depende mucho del estilo y la forma de mostrar la información.
Contiene el menú de enlaces a otros elementos o secciones del sitio.

• <main> Contenido </main>: Agrupa el tema principal de las páginas, en esta sección
se concentra la mayor cantidad de información significativa. Puede formarse de uno o
varios segmentos.

• <section> Contenido </section>: En primera instancia las secciones forman parte del
contenido principal de las páginas web, sin embargo, al aplicarles CSS se pueden incluir
en cualquier parte que se necesite organizar información.
 3.4 Otros términos relacionados 17

• <footer> Contenido </footer>: Se ubica casi siempre en la parte inferior de las pági-
nas web. Contiene información sobre datos del creador, derechos de uso, enlaces a
información adicional, créditos de uso, entre otros.

3.4 Otros términos relacionados

Para construir o estructurar páginas web, es necesario aplicar ciertos conceptos y reglas generales
que te permiten administrar todo lo relacionado de una manera fácil y rápida. A continuación se
incluye un listado de elementos generales necesarios para el tema en cuestión.

3.4.1 Sitio Web

Es un conjunto de páginas relacionadas que administran un tema en especial, almacenadas en un
espacio común. Esta definición básica permite a los usuarios comprender de forma general sobre el
tema; sin embargo a la hora de diseñar páginas y construir sitios, es necesario añadir que un sitio
posee carpetas y recursos que suministran lo necesario a todas las páginas. El espacio en común es
virtual y hace referencia al alojamiento en Internet con un nombre único de dominio.

El dominio se refiere a un nombre común que representa una dirección de internet que permite
al usuario recordarla en cualquier momento, este sistema de nombres de dominio ayuda a que el
lenguaje numérico y sistema de protocolos utilizados por la red de Internet sea más accesible a los
usuarios.

3.4.2 Referencias relativas y absolutas

La referencia indica la dirección o camino de la localización de los recursos en el sitio web. En
HTML existen varias etiquetas que muestran recursos o necesitan acceso a direcciones o referencias
de este tipo por medio del parámetro URL (Uniform Resource Locator).

La referencia absoluta indica la dirección completa del recurso, generalmente se utiliza para
localizar recursos de otros sitios o realizar enlaces a otras ubicaciones en Internet.

La referencia relativa permite localizar recursos dentro del sitio web y su estructura de carpetas
establecida.

3.4.3 Uso de Color

HTML reconoce varios sistemas para uso de color en la creación de páginas web. Los más comunes
son RGB, HEX y otros estándares como HSL, incluso reconoce nombres de color en idioma inglés.
Para este curso utilizarás el sistema HEX, fundamentado en el sistema numérico hexadecimal que
permite simplificar expresiones numéricas con base 16.

Puedes agregar un color especificando el símbolo de número y el valor en sistema hexadecimal para
cada elemento de color (#rrggbb). Los valores en hexadecimal se representan con los números del
0 al 9 y letras de la a A la F. En este sistema de color rr representa el valor de la intensidad de rojo,
gg, verde y bb, azul. Por ejemplo, para obtener el color azul ultramar, escribe el código #0A497B.

Ejercicio 3.3 Enriquece tu conocimiento sobre el uso del color en la construcción de páginas
web. Previo a implementar el color con etiquetas HTML investiga sobre el tema: “Teoría del
color”. Elabora un mapa conceptual con el material encontrado. Utiliza la herramienta que tu
docente te indique como un procesador de palabras, un presentador, entre otros. ■
18 Capítulo 3. HTML

Nota: Para realizar el ejercicio descrito a continuación, es requisito que elabores con anterioridad
las investigaciones sobre los formatos de imágenes y la teoría del color, de esa manera entenderás
de mejor forma las etiquetas empleadas.

Ejercicio 3.4 Después de conocer algunas etiquetas básicas para la construcción de páginas y
sitios, crea una carpeta llamada “ej002” en la ubicación que tu docente te indique, dentro de esa
carpeta crea una nueva llamada “imagenes”, no utilices tildes ni mayúsculas, será más sencillo
ubicar los recursos.

En el navegador de tu preferencia busca y descarga una imagen con el formato jpg con el
concepto de programación, busca en sitios gratuitos que te ofrecen imágenes sin costo, guarda
la imagen descargada en la carpeta “imagenes” con el nombre progra02.

Abre el bloc de notas, escribe la estructura básica de un documento HTML, guárdalo con el
nombre demo02.html, recuerda elegir la opción: Todos los archivos.

Si no recuerdas la estructura básica, copia el ejercicio anterior y luego dentro de la sección

<body>... </body> escribe lo siguiente:

<body>

<h1>Diagramas de flujo de datos</h1>

<p>Un diagrama de flujo es utilizado para representar gráficamente un algoritmo <br> utiliza
una simbología estándar que representa cada paso del algoritmo. Existen símbolos especiales
según el proceso representado y están conectados por líneas de flujo que representan la secuencia
de ejecución. </p>

<h2>Simbología</h2>

<h3>Rectángulo - Procesos</h3>

<p>Los rectángulos se utilizan en la elaboración de diagramas de flujo de datos para representar

procesos o acciones donde se resuelven actividades para luego mostrar resultados por medio de
otro símbolo.</p>

<h3>Líneas de conexión</h3>

<p> Son utilizadas para conectar la secuencia de ejecución entre los símbolos de los diagramas
de flujo. </p>

<hr>

<h1> Tipos de operadores utilizados en programación </h1>

<ol type=“I”>

<li>Lógicos </li>

<li>Aritméticos</li>

<li>Relacionales </li>
3.4 Otros términos relacionados 19

</ol>

<h2> Operadores Lógicos </h2>

<ul type=“square”>

<li>And </li>

<li>Or</li>

<li>Not </li>

</ul>

<table border=“1” bordercolor=“#ffdd66”>

<tr bgcolor= “#e5e8e8”>

<th>Ariméticos</th>

<th>Lógicos</th>

<th>Relacionales</th>

</tr>

<tr>

<td>Suma (+)</td>

<td>And (&)</td>

<td>Menor que (<)</td>

</tr>

</table>

<hr>

<img src=“imagenes\progra02.jpg” alt=“Progra II” width=“150px”>

<hr>

<a href=“https://www.google.com” target=”_blank”>Enlace a Google</a>

</body>

Hasta el momento has utilizado etiquetas básicas de HTML que han permitido estructurar páginas
web simples. Al llegar a esta sección y realizar las prácticas correspondientes, comprenderás la
forma de plantear de manera sencilla la estructura de páginas web.
20 Capítulo 3. HTML

Ejercicio 3.5 Pon a prueba tus destrezas y habilidades, construye una página web simple
en donde puedas implementar etiquetas básicas. Utiliza uno de los tres temas sugeridos a
continuación:
Deportes Extremos
Costumbres y Tradiciones de Guatemala
Cinco Lugares Turísticos de Guatemala

Recuerda descargar imágenes relacionadas y guardarlas en una carpeta de recursos. Agrega

descripciones y enlaces externos. Tu docente calificará que utilices todas o la mayoría de las
etiquetas vistas hasta el momento. Crea tu carpeta principal con el nombre “ej003” y la página
guárdala como demo03.html. ■
 4. CSS

4.1 Generalidades
CSS es el acrónimo de Cascading Style Sheets; combinado con las etiquetas HTML es el lenguaje
utilizado para la aplicación de estilo a las páginas web. Su estándar y regulación está a cargo del
consorcio W3C 1

Para entenderlo de una mejor manera, CSS viene a resolver el problema de presentación y a mejorar
el aspecto de las páginas web pues en teoría las etiquetas HTML no fueron creadas para ello.

Existen diversas maneras de crear estilos para las páginas web. En este apartado aprenderás dos
métodos diferentes de modificar selectores:
Agregando bloques de estilo.
Utilizando hojas de estilo propias del sitio o externas.

El concepto a la larga es el mismo, modificar las etiquetas o selectores de HTML sin embargo, el
enfoque es lo que cambia:

Un bloque de estilo aplica cambios únicamente en la página donde se incluye. Una hoja de estilo
estandariza las modificaciones a todas las páginas de un sitio en donde se aplica.
Hay una tercera forma que sería modificar directamente cada selector, pero imagina que tu sitio
web alberga alrededor de siete u ocho páginas y que utilizarás el mismo estilo de presentación en
cada párrafo de información. Puedes modificar párrafo por párrafo, además que no es una buena
práctica, será costoso y llevará tiempo implementarlo. ¿Qué pasaría si el estilo aplicado no combina
con tu tema y es necesario cambiarlo? tendrías que modificar uno a uno los elementos en todas las
páginas. Eso restaría organización en tu estructura, generaría desorden y costo de tiempo.

Para tu conocimiento personal y a modo de ampliar conceptos, busca la definición de: Código
Espagueti. Puedes agregar este término a tu glosario.

1 Consorcio WWW, regulador de la mayoría de tecnologías web a largo plazo.

 22 Capítulo 4. CSS

4.2 Sintaxis
El principal concepto a tomar en cuenta es que todas las hojas de estilo se construyen a partir reglas.
Una regla determina la modificación en aspecto que tendrá un selector o etiqueta para mostrar
contenido en el navegador, está compuesta por un selector y su respectiva declaración:

Selector {Declaración}

Las declaraciones están compuesta por uno o más atributos o propiedades y sus respectivos valores.
A continuación una práctica de cómo aplicar CSS a las etiquetas <p> y <h1>:

Ejercicio 4.1 Crea una carpeta en la ubicación que tu docente te indique con el nombre ej004,
luego abre el bloc de notas y guarda un archivo como democss.html. Transcribe el siguiente
código, observa las modificaciones que CSS le hace a las etiquetas HTML y cómo cambia el
aspecto de tu página.

<!DOCTYPE html>

<html>

<head>

<title>Progra II</title>

<style>

p{

color: #117722;

text-align: justify;

font-family: ”Lucida Console”, ”Courier New”, monospace;

h1 {

color: #339922;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

</style>

</head>

<body>

<h1>Ejemplo de estructura básica de páginas HTML con CSS</h1>

 4.3 Tipos de selectores 23

<p>A partir de esta estructura podrás construir diversas páginas web. En este ejemplo se
implementaron estilos CSS modificando los selectores en la misma hoja</p>

<p> Práctica realizada en el bloc de notas</p>

</body>

</html>

El bloque de estilo se agregó desde la etiqueta <style> ... </style>, modificando los selectores
de párrafo y encabezado 1. Puedes agregar más encabezados de nivel 1 o párrafos a esta práctica
y observar que también serán afectados. Cambia las propiedades de color y tipo de letra.
■

4.3 Tipos de selectores

Antes de continuar y retomando el tema de la sintaxis y la creación de reglas en CSS, recuerda que
los selectores son afectados directamente por las declaraciones planteadas en donde se especifican
los valores necesarios para cada propiedad. Existen diversas maneras de crear las reglas con los
selectores, a continuación se te explican las más comunes:

Selector de elementos o etiquetas: Permiten establecer reglas para aplicar a propiedades

comunes de la etiquetas, pueden incluirse uno o más elementos separados por coma, ejemplo:
p, h1 { color:#117722; text-align: justify;}

Selector con identificadores: Crea reglas con nombres o identificadores que luego podrás
aplicarlas a los elementos o etiquetas, son útiles para elementos no comunes o que no se
repitan muchas veces en las páginas web. Primero declaras la regla y posteriormente puedes
aplicarla a una etiqueta, ejemplo:

#fondo{background-color: yellow;}

<p id=”fondo”> Contenido </p>

Selector a partir de clases: Puedes agregar reglas de estilo por medio de la creación de
clases o referencia específicas que modifican atributos. Este proceso tiene diferentes maneras
de plantear las declaraciones, una de ellas es solamente escribir el punto (.) seguido del
nombre de la clase y las propiedades o atributos a modificar, otra manera es colocar el nombre
del selector, punto (.) seguido del nombre de la clase y el resto de la declaración. Ejemplo:

.clase001 {color:#220077;}

<p class=”clase001”>Contenido...</p>

4.4 CSS Avanzado

Existe otra cantidad diversa de elementos CSS que te permitirán construir sitios definitivamente
maravillosos, con todos los efectos que los usuarios necesitan e imaginan que existen, sin embargo
en los siguientes módulos del libro serán incluidos algunos elementos a considerar, especialmente
cuando entres de lleno a la programación web. Para dar seguimiento a los principales objetivos del
libro, se consideró incluir las opciones de estructurar sitios a partir de CSS como se detalla en la
práctica a continuación:
24 Capítulo 4. CSS

Ejercicio 4.2 Al igual que en los ejercicios prácticos anteriores, crea una carpeta en donde te
indique tu docente con el nombre ej005, luego abre el Bloc de Notas y transcribe el siguiente
código HTML - CSS. Guarda tu archivo como estructuracss.html y luego abre el archivo desde
tu navegador, de preferencia Mozilla Firefox.

<!DOCTYPE html>

<head>

<title>Estructura de sitios con CSS</title>

<style>

*{

box-sizing: border-box;

body{

margin: 0;

.encabezado{

background-color: #f1f1f1;

padding: 20px;

text-align: center;

.menu{

background-color:#d5d5ff ;

.columna{

float: left;

padding: 10px;

.columna.seguida {

width: 25 %;
4.4 CSS Avanzado 25

.columna.medio {

width: 50 %;

</style>

</head>

<body>

<div class=”encabezado”>

<h1>Titulo principal del sitio</h1>

<p>Cambia el tamaño para ver el efecto.</p>

</div>

<div class=”menu”>

<a href=”#”>Opcion 1</a>&nbsp;

<a href=”#”>Opcion 2</a>&nbsp;

<a href=”#”>Opcion 3</a>&nbsp;

</div>

<div>

<div class=”columna seguida”>

<h2>Columna izquierda</h2>

<p>Columna de contenido del lado izquierdo</p>

</div>

<div class=”columna medio”>

<h2>Contenido principal de la página</h2>

<p>Lo que observas en este apartado es donde generalmente los sitios web ocupan para su
principal contenido</p>

<p>Lo que observas en este apartado es donde generalmente los sitios web ocupan para su
principal contenido</p>

</div>
26 Capítulo 4. CSS

<div class=”columna seguida”>

<h2>Columna con contenido del lado derecho</h2>

<p>En este espacio puedes agregar otras opciones dentro del sitio</p>

</div>

</div>

</body>

</html>

La etiqueta <div> de HTML permite crear secciones en tu página web, ordenar contenido y es la
que recibe directamente los estilos de CSS.
 5. ¿Qué software necesitarás?

Luego de recordar o conocer los lenguajes de creación de páginas web básicas como HTML y
CSS, ahora te corresponde la inducción correspondiente para la construcción de páginas web
dinámicas, en donde ejecutes procesos con la arquitectura cliente-servidor. Será necesario utilizar
otras herramientas que se ajusten a las nuevas necesidades.

5.1 XAMPP
Lo primero que deberás instalar es un grupo de herramientas llamado XAMPP. Es un entorno de
herramientas de desarrollo que incluye como elementos principales un servidor web y una base de
datos que funcionarán de forma local. Su implementación es muy sencilla y funciona en la mayoría
de sistemas operativos existentes. XAMPP es el acrónimo de las principales herramientas que posee
el entorno de desarrollo:

X: Se refiere a que puede instalarse en cualquiera de los principales Sistemas Operativos que
existen.

A: Por el tipo de servidor que posee. Apache Server.

M: Hace referencia a la base de datos incluida. MySQL o en algunas versiones MariaDB.

P: Forma parte esencial de este entorno el conocido y fuerte lenguaje de código abierto PHP.

P: Perl, es otro lenguaje de programación, en este entorno se enfoca en los recursos de la red.

En el desarrollo del curso lo utilizarás principalmente por tres razones:

Al trabajar localmente, no necesita conexión directa a Internet, eso permitirá que desarrolles
tus prácticas e implementes proyectos sin costo adicional de ancho de banda.
A pesar de que sus herramientas son robustas y de mucha utilidad, no necesitarás muchos
recursos en relación a las capacidades de tu equipo.
 28 Capítulo 5. ¿Qué software necesitarás?

Utiliza licencias Open Source, es decir que puedes utilizarlo y crear tus proyectos sin costo
adicional.

Para la descarga e instalación, procede directamente desde su sitio oficial:

https://www.apachefriends.org/es/download.html

Descarga la versión reciente y más estable que te ofrece el sitio. Luego de obtener el archivo de
instalación, ejecútalo como administrador del equipo de cómputo, esto permitirá la configuración
adecuada.

Posiblemente te pida detener la protección del antivirus, antes de realizar la acción puedes leer los
términos e instrucciones generales en el sitio oficial y luego procede a realizar lo necesario para la
instalación correspondiente.

Dentro del grupo de herramientas disponibles para instalar existen algunas que no serán de utilidad
por el momento, por lo cual puedes no incluirlas en la instalación, esto permitirá que te enfoques
directamente en PHP. Las herramientas no necesarias en tu instalación básica son: FileZilla FTP
Server, Mercury Mail Server, Tomcat, Perl, Webalizer y Fake Sendmail.

Aún no ejecutes tus herramientas, en las próximas actividades realizarás la práctica.

5.2 Visual Studio Code

En las secciones anteriores se te mostró cómo utilizar el Bloc de Notas como editor principal para
la estructuración básica de páginas web con HTML y CSS. Utilizarás nuevas herramientas de
desarrollo, especialmente un editor de código fuente un poco más robusto que incluye herramientas
que facilitarán la construcción de elementos web y te permitirá enfocarte directamente el la
programación de páginas dinámicas.

Visual Studio Code es un editor de código fuente desarrollado por Microsoft compatible con varios
sistemas operativos, incluye control de código con Git 1 y convive con licencias Open Source.
Soporta varios lenguajes de programación, puedes personalizarlo y optimizarlo de acuerdo con el
lenguaje implementado y tus necesidades como desarrollador.

Realiza la descarga del instalador directamente desde el sitio oficial:

https://code.visualstudio.com/Download

Verifica que el archivo de instalación sea el adecuado para tu sistema operativo e inicia el proceso
para obtenerlo.

Ejecuta el archivo como administrador del equipo, tómate tu tiempo, lee los acuerdos y licencias,
luego continúa la instalación. En este caso si debes ejecutar la herramienta de desarrollo, si no
se ejecuta automáticamente, ábrela desde tus aplicaciones en el botón de inicio. Posiblemente te
sugiera instalar el idioma español y reiniciar, realiza ese proceso.

Al abrir de nuevo la aplicación, te dará sugerencias de personalización del entorno. Elije sabiamente
y personaliza tu herramienta según tu visibilidad y gusto sobre el aspecto del entorno.
1 Sofware de control de versionamiento de código.
5.2 Visual Studio Code 29

Para finalizar el proceso de configuración, del lado izquierdo de tu pantalla aparecerá un menú de
opciones, elige la opción extensiones, busca e instala: PHP Intelephense (PHP Code intelligence
for Visual Studio Code), esta extensión permitirá sacar provecho a PHP editando desde VS Code.
 6. PHP

6.1 Generalidades
Lenguaje de código abierto, de alto nivel, utilizado en el desarrollo de sitios web. PHP es el
acrónimo recursivo de Hypertext Preprocessor. Intérprete del lado del servidor en la tecnología
Cliente-Servidor. Combinado con HTML y CSS te permitirá la construcción de soluciones web
por medio de sitios. Su simplicidad de sintaxis y su robustez de ejecución permite generar páginas
dinámicas, manipulación de archivos y bases de datos, recolectar y procesar información, encriptar
código, entre otras actividades. Al ejecutarse a través de los navegadores web, es compatible con
los sistemas operativos Windows, Linux, Mac OS X, entre otros. Interactúa con la mayoría de
servidores como ISS, Apache, entre otros.
Ejercicio 6.1 Utiliza los recursos necesarios e investiga todo lo relacionado al tema de licenci-
amiento para Código Abierto (Open Source), incluye tipo de licenciamiento, historia, ejemplos,
comunidad, entre otros. Tu docente te dará los parámetros de entrega (carátula, introducción,
etc.) y la aplicación para generar el archivo (Word, PowerPoint). Sube tu archivo a la plataforma
donde entregas frecuentemente tus tareas. ■

En el apartado anterior se te indicaron las herramientas de desarrollo a utilizar para este curso.
Dentro de la descarga de XAMPP se incluye el lenguaje PHP. En las siguientes secciones se te
indicará cómo levantar o activar los servicios y ejecutar correctamente los procesos.

6.2 Entorno de desarrollo

Tu entorno principal de desarrollo estará controlado y gestionado directamente desde el panel de
XAMPP. Cada vez que necesites practicar o realizar diversos ejercicios, será necesario verificar que
el servidor esté activo y de esa manera ejecutar los procesos correspondientes. Para ello, activa el
panel de XAMPP desde tus aplicaciones comunes (Botón de inicio, Dock, etc.), enciende o activa
el servidor de Apache y si necesitas la base de datos, activa el servicio MySQL. Cuando termines
tus prácticas o no necesites ejecutar procesos de desarrollo con el servidor, no olvides finalizar el
 32 Capítulo 6. PHP

servicio. Luego de activar XAMPP, abre VS Code para la construcción de tus aplicaciones, desde
este editor escribe todo el código correspondiente.

Algo muy importante a considerar y tomar en cuenta es la creación de directorios cuando desarrolles
tus sitios web. Debes ordenar todo en carpetas, considerando las direcciones relativas para todos los
recursos.

6.2.1 Servidor, hosting, localhost y htdocs

Para entender de una manera clara y sencilla estos términos, deberás comprender primeramente el
concepto de servidor (server), el cual se refiere a un equipo u ordenador con hardware y software
específicos que provee servicios a otros dispositivos a los que se les denomina clientes.

Los servidores se implementan en las diversas redes de dispositivos y proveen servicios de hardware
y software o solamente uno de los componentes según se requiera. Para nuestras prácticas, el servidor
será quien provea de resultados al cliente por medio de software. El encargado de interpretar
peticiones y entregas será el lenguaje de programación PHP.

El hosting hace referencia a un espacio específico en Internet que almacena los recursos de los
sitios y muestra la información por medio de páginas web.

El término localhost, hace referencia a un servidor local que por medio de software provee los
servicios necesarios para procesar páginas web dinámicas sin necesidad de utilizar directamente un
hosting de Internet.

Por último, pero no menos importante, conviene aclarar que htdocs es el nombre de la carpeta en
donde guardarás tus sitios para probarlos en tu localhost. Esta carpeta está ubicada en la ruta donde
instalaste XAMPP, usualmente se encuentra en: C:\xampp.

Para un mejor control de espacio y llevar de manera ordenada la construcción de tus sitios, se
sugiere que ordenes tus archivos y los guardes en otras ubicaciones y solamente los muevas o
copies a la carpeta htdocs cuando necesites ejecutarlos, de lo contrario no satures esa carpeta con
proyectos o pruebas.

6.2.2 Etiquetas de apertura y cierre PHP

El código PHP que incluyas dentro de tus páginas HTML deberás iniciarlo con las etiquetas <?php
y ?> cualquier otra instrucción fuera de las etiquetas será tomado como texto común por PHP y
solamente lo ejecutará HTML. Para finalizar una línea de código es indispensable marcar el final
con punto y coma (;) de lo contrario se mostrará error de sintaxis.

No olvides guardar tus páginas dinámicas con la extensión de archivos .php.

Ejercicio 6.2 Realiza tu primera práctica implementando las herramientas de desarrollo instal-
adas en tu equipo de cómputo u ordenador y construye una página web dinámica:

Activa tu servidor Apache desde XAMPP. Recuerda activar primero la aplicación XAMPP
e iniciar el servicio.
Crea una carpeta llamada php001 dentro de la carpeta htdocs.
Abre Visual Studio Code.
Copia el código a continuación dentro del editor.
6.2 Entorno de desarrollo 33

Guarda el archivo con el nombre pagina001 (Archivo, guardar cómo...) y en el tipo de

archivo elige php.
Ejecuta tu archivo, para ello abre un navegador de tu preferencia como por ejemplo
Mozilla Firefox y luego, si realizaste al pie de la letra los pasos anteriores, escribe:
http://localhost/php001/pagina001.php

El código de tu primer página PHP es:

<!DOCTYPE html>

<html>

<head>

<title>Mi primer PHP</title>

</head>

<body>

<h1>Ejecutando páginas PHP en el servidor local</h1>

<p style=”color:purple”;>

<?php

echo ”¡Hola mundo!”;

?>

</p>

</body>

</html>

Sube tu archivo a la plataforma donde entregas frecuentemente tus tareas. ■

Luego que ejecutaste tu primera página PHP en tu servidor local, es momento de realizar otra
práctica incluyendo el concepto index para los sitios web.

Index es el nombre de la página principal o archivo que un sitio debería poseer, los servidores
web redirigen todo tipo de navegación a ese archivo y muchas veces no será necesario escribir su
nombre, el servidor se encargará de gestionar el proceso.

En el siguiente ejercicio también observarás el uso de comentarios. Los comentarios son líneas de
texto que tienen como objetivo documentar o guiar al desarrollador en el planteamiento de procesos
de actividades. En la mayoría de ocasiones sirven como elementos que aclaran a otros desarrol-
ladores que consultan tu código la forma que planteas las soluciones. Para añadir comentarios a
tu código, utiliza el caracter numeral (#) luego de finalizar la línea de código con punto y coma
(;).
34 Capítulo 6. PHP

Ejercicio 6.3 Antes de continuar, recuerda mover o eliminar la carpeta del ejercicio anterior,
realiza una copia en de tus archivos y guárdalos en tu unidad asignada. Esto evitará que la
carpeta htdocs se sature de información.

Verifica que tu servidor Apache esté activo. De lo contrario inicia sus servicios, en el
ejercicio anterior se explica el proceso.
Crea una carpeta llamada php002 dentro de la carpeta htdocs.
Abre Visual Studio Code.
Copia el código a continuación dentro del editor.
Guarda el archivo con el nombre index (Archivo, guardar cómo...) y en el tipo de archivo
elige php.
Ejecuta tu archivo, para ello abre un navegador de tu preferencia como por ejemplo
Mozilla Firefox y luego escribe: http://localhost/php002 y presiona la tecla Enter o Intro.
El servidor buscará el archivo index y lo mostrará.

Copia el siguiente código en tu VS Code:

<!DOCTYPE html>

<html>

<head>

<title>PHP Demo</title>

<style>

body {background-color: #add8e6; text-align: center; }

p {background-color: #8bee70; text-align: center; }

</style>

</head>

<body>

<h2>Algo más que hola mundo</h2>

<hr>

<div>

<?php

$Vnum1 =100; #Asigna valores numéricos a las variables

$Vnum2 = 33.33;

echo ”El resultado de sumar ”.$Vnum1 .” y ”.$Vnum2 .” es: ”;

echo ”<h2>”;
 6.3 Variables 35

echo ($Vnum1 + $Vnum2); #Suma de los valores asignados a las variables y muestra del
resultado.

echo ”</h2>”;

?>

<hr>

<p> Desde tu VS Code, cambia los valores de las variables y guarda tus cambios. Presiona F5
en el navegador y observa lo que ocurre.</p>

</div>

</body>

</html>

En las prácticas anteriores se incluye la función echo, a través de ella puedes mostrar texto utilizando
las comillas dobles (”texto”), así como los valores de las variables ($Vdato). Puedes combinar texto
y valores utilizando el punto como elemento de enlace (echo ”El resultado de sumar ”.$Vnum1
.” y ”.$Vnum2 .” es: ”;). También puedes ahorrar caracteres y solamente incluir los nombres de
variables dentro del texto a mostrar (echo .El resultado de sumar V num1yVnum2 es: ";).

6.3 Variables
Partiendo del principio básico que una variable es un espacio de memoria que almacena un valor
o valores que son utilizados en los procesos de la aplicación o proyecto, conocerás la forma de
plantearlas y/o utilizarlas en el lenguaje PHP construyendo páginas web dinámicas.

Para definir una variable, antepone el símbolo de peso o símbolo de dólar ($) seguido del nombre
de la variable, ejemplo $Vdato . PHP es un lenguaje sensible a los nombres de variables, es decir
que reconoce mayúsculas y minúsculas.

Dando seguimiento a las buenas prácticas, buscando prevenir errores, evitar el código espagueti o
como coloquialmente algunos profesores de Programación llaman código húngaro, debes seguir
ciertas reglas para escribir código legible, documentar tus procesos y plantear de forma clara las
instrucciones de la aplicación que construyas. Esto aplica para los nombres de variables. Se te
sugiere que después de colocar el símbolo de peso o dolar, escribir la letra V como codificación
para identificar variables.

En PHP, contrario a otros lenguajes estructurados, no es necesario declarar variables y definir su

tipo al inicio de cada aplicación o sección donde se utilizarán de acuerdo con su ámbito de alcance
sino solamente iniciarlas.

Iniciar una variable es generar el nombre y asignarle el dato, PHP reconoce el tipo de acuerdo con
el valor asignado. El tema del ámbito o alcance de la variable se refiere a que será reconocida en
diferentes secciones del sitio, no solamente en una página. Las variables globales formarán parte de
temas de los siguientes módulos del libro.
36 Capítulo 6. PHP

PHP reconoce varios tipos de variables:

Básicos: integer, float, boolean y string.
Compuestos: object, array, iterable y callable.
Especiales: null y resource.
En las siguientes prácticas implementarás los diversos tipos de variables.
Ejercicio 6.4 Realiza la siguiente práctica implementando las herramientas de desarrollo
instaladas en tu equipo de cómputo u ordenador y construye una página web dinámica:

Activa tu servidor Apache desde XAMPP. Recuerda activar primero la aplicación

XAMPP e iniciar el servicio. Si ya está activa, omite la activación.
Crea una carpeta llamada php003 dentro de la carpeta htdocs.
Abre Visual Studio Code.
Copia el código a continuación dentro del editor.
Guarda el archivo con el nombre index (Archivo, guardar cómo...) y en el tipo de archivo
elige php.
Ejecuta tu archivo, para ello abre un navegador de tu preferencia como por ejemplo
Mozilla Firefox y luego, si realizaste al pie de la letra los pasos anteriores, escribe:
http://localhost/php003

<!DOCTYPE html>

<html>

<head>

<title>PHP Variables</title>

<style>

div {background-color:#235434;width: 80 %; margin: auto;border: 1px solid #ffff00; text-align:

center; color:#f0f8ff; padding: 25px;font-family: Verdana; font-size: 100 %;}

p {text-align: center;}

</style>

</head>

<body>

<div>

<h1>Variables y sus tipos básicos</h1>

</div>

<br>

<div>

<?php
6.3 Variables 37

$Vcadena1 = ”Diego”;

$Vcadena2= ”Jessica”;

$Vtodo = ” Nombre 1: $Vcadena1 Nombre 2: $Vcadena2” . ”<br>”;

echo $Vtodo;

$Vedad1 = 24;

echo $Vcadena1 . ” tiene $Vedad1 de edad ” . ”</div>”. ”<br>” .” <div> ” ;

$Vnumero01= 9;

$Vcubo = $Vnumero01 * $Vnumero01 * $Vnumero01;

echo ”El cubo de $Vnumero01 es $Vcubo ” . "</div>". "<br>"."<div>";

$Vcantidad= 769.36;

$Vporcentaje= $Vcantidad * 12/100;

echo ”El 12 % de $Vcantidad es $Vporcentaje ”. ”</div>”;

?>

<hr>

<p><strong> Desde tu VS Code, cambia los valores de las variables y guarda tus cambios.
Presiona F5 en el navegador y observa lo que ocurre.</strong></p>

<hr>

</div>

</body>

</html>

Observa que ahora ya puedes combinar los lenguajes HTML, CSS y PHP en un solo documento web.
Ya puedes construir páginas que soliciten procesos al servidor y muestra resultados interpretados.
Tenemos pendientes un par de temas previo a la manipulación de información directa del usuario.

Ejercicio 6.5 Con todo el conocimiento adquirido hasta el momento sobre HTML, CSS y PHP.
Realiza la siguiente práctica implementando las herramientas de desarrollo instaladas en tu
equipo de cómputo u ordenador y construye una página web dinámica:

Previo a realizar la actividad de desarrollo, utiliza los recursos necesarios para investigar
cinco diferentes figuras geométricas. Busca su definición, su categoría y la fórmula para
obtener el área.
 38 Capítulo 6. PHP

Descarga al menos dos imágenes de las figuras investigadas. Crea una carpeta llamada
php004 dentro de htdocs y guarda en ella las imágenes.
Abre Visual Studio Code y construye una página web dinámica en donde muestres la
información investigada, las imágenes, las fórmulas del área y luego ejemplifica usando
variables la solución de la fórmula del área de cada figura.
Guarda tu página como index.php
Activa tu servidor Apache desde XAMPP. Recuerda activar primero la aplicación XAMPP
e iniciar el servicio. Si ya está activa, omite la activación.
Ejecuta tu página, en tu navegador elegido escribe: http://localhost/php004.
Cambia los valores de las variables que utilizaste en las fórmulas. Comparte tu proyecto
con tu docente. Crea una copia de tu solución en el lugar donde guardas tu información y
sube a tu plataforma el ejercicio.
■

6.4 Expresiones y Operadores

Las expresiones son planteamientos compuestos por variables y operadores, tienen como finalidad
resolver un proceso. Son parte fundamental de algunas instrucciones como las decisiones o ciclos.
Ejemplos: $Vnumero1 + $Vnumero2 , $Vbase ** $Vexponente, $Vvalor1 <= $Vvalor2.

Los operadores son los símbolos de las funciones o procesos que resuelven planteamientos, común-
mente conocemos los aritméticos, lógicos, relacionales o de comparación, entre otros.

PHP reconoce varios tipos de operadores, dentro de los más comunes están:

Símbolo Operación
+ Suma o adición
- Resta o sustracción
Aritméticos * Multiplicación
/ División
% Módulo o resto de entero de la división
** Potencia

Símbolo Operación
== Igual
!= Diferente
Relacionales < Menor que
> Mayor que
<= Menor o igual que
>= Mayor o igual que

Símbolo Operación
and, && Y
Lógicos or O inclusivo
xor O exclusivo
! negación

La asignación (=) también es considerada como un operador básico, diferente a la comparación

(==). Los incrementos o decrementos, tema que se ampliará en la sección de ciclos, también son
considerados como operadores básicos (++, –), necesarios para resolver procesos en las expresiones.
 6.5 Decisiones 39

6.5 Decisiones
La tarea principal de las instrucciones o funciones de decisión es dirigir la secuencia de ejecución
de los procesos hacia el camino más adecuado de acuerdo con las condiciones planteadas. En su
actividad más simple, una decisión permite la ejecución de un proceso si se cumple con la condición.
Forma parte del grupo de funciones denominadas estructuras de control.

En PHP podrás plantear diversas variantes de decisiones por medio de la función If, la sintaxis
básica es:

if (expresión o condición)

{proceso}

En el planteamiento anterior el proceso se realiza solamente si se cumple con la condición, la

secuencia del programa sigue su ejecución. En la siguiente sintaxis se podrá evaluar la condición o
expresión, si es verdadera se ejecuta el proceso, de lo contrario, se ejecuta un proceso alterno:

if (expresión o condición)

{proceso}

else {proceso}

Al evaluarse la expresión en el planteamiento anterior siempre se ejecuta uno de los dos posibles
procesos, la decisión de cuál proceso se toma en el resultado de la expresión. Puede considerarse
una tercera forma de plantear la sintaxis y es la siguiente:

if (expresión o condición)

{proceso}

elseif (expresión o condición)

{proceso}

else {proceso}