Clase 01:

Programación Web 01

www.senati.edu.pe
Objetivos
 Que es PHP

www.senati.edu.pe
Estructura de HTML

www.senati.edu.pe
El archivo index

www.senati.edu.pe
Etiquetas HTML: <img>
1. Etiqueta para cargar una imagen

www.senati.edu.pe
Características de uma imagen
Aplicaciones para trabajar imágenes
1. Peso máximo : 70 KB Tiny PNG
https://tinypng.com/
Verexif
https://www.verexif.com/

www.senati.edu.pe
De donde descargar Imágenes?

1. https://unsplash.com/es
2. https://www.freepik.es/
3. https://pixabay.com/es/

www.senati.edu.pe
Etiquetas de Image: <figure> y <figcaption>
1. Figure: Etiqueta que permite almacenar una imagen en su interior. Es una
mejor práctica comparada con usar solamente un contenedor div. Como
complemento al contenedor figure, se utiliza la etiqueta figcaption
2. Figcaption. Permite darle una pequeña descripción a la imagen, como el
autor, fuente o algo por el estilo, que se mostrará usualmente abajo de la
imagen.

www.senati.edu.pe
Etiquetas de Video: <video>
1. Para descargar videos
https://pixabay.com/es/

www.senati.edu.pe
Formularios: <form>
1. Type:
Required Para nombre es: “name”
- text
Placeholder Para correo es: “email”
-pasword autocomplete
-email Para país es: “country”
-number Para código postal es: “postal-code”
-decimal
-date
- time

www.senati.edu.pe
Formularios: <form>
1. Formulario para pedir nombre, cumpleaños , y horas

www.senati.edu.pe
Formulario:<form>
Para semana, mes, y un calendario

www.senati.edu.pe
Etiquete <select>

www.senati.edu.pe
Etiquetas para Botones: submit vs buttons

www.senati.edu.pe
CSS

www.senati.edu.pe
El archivo: .css

 Estilos como atributo de una etiqueta

 Estilos definido en la cabeza(head)
 Estilos definidos en un archivo externo

www.senati.edu.pe
CSS: Estilos como atributo de una etiqueta

www.senati.edu.pe
CSS: Definido en la Cabecera

www.senati.edu.pe
CSS: Estilos
definidos en un
archivo externo

www.senati.edu.pe
Pseudo Clases y Pseudo Elementos

Pseudoclase: definen el estilo de un estado

Pseudoelemento: define euna parte especifica de la etiqueta
Link para revisar las Pseudoclases:
https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes

Link para revisar los Pseudoelementos

https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-elements

www.senati.edu.pe
Anatomía de un CSS

www.senati.edu.pe
Modelo en Caja de CSS

www.senati.edu.pe
Modelo en Caja de CSS

www.senati.edu.pe
Herencia
1. Es el código css, que le
pasa el padre al hijo

www.senati.edu.pe
www.senati.edu.pe
www.senati.edu.pe
www.senati.edu.pe
 Ejercicios: Condicionales y Estructuras Múltiples
1. Suma de tres numero enteros y positivos
2. Determinar si un numero entero es negativo, positivo o
neutro.
3. Dado un caracteres determinar si es vocal
4. Determinar si un numero es múltiplo de tres y de cinco.
5. Dado tres longitudes, si forman un triangulo devolver el
tipo de triangulo, así como su perímetro y área: Si es Temparatu Tipo de clima
equilátero que de un mensaje: Lados Iguales; si es ra
isósceles: dos lados iguales; y si es escaleno: sus tres lados Temp <10 frio
diferentes Entre 10 y 20 nublado
6. Desarrolle un algoritmo que resuelva la ecuación de
Entre 21 y 27 templado
segundo grado
Mayor a 27 calor
7. AL ingresar el valor de una temperatura, obtener el tipo de
clima según la siguiente tabla
www.senati.edu.pe
Ejercicios
9. Determine el Importe a pagar Para el
8. En una Universidad se ha establecido examen de admisión de una
los siguiente puntaje de ingreso. Se Universidad, cuyo valor depende del
pide calcular la facultad a la que nivel Socio económico y el colegio de
pertenece un alumno de acuerdo a su procedencia
puntaje obtenido
Facultad Puntaje Máximo Nivel Social
Facultad
Sistemas 100 A B C
Electrónica 90
Industrial 80 Sistemas 300 200 100
Administración 70 Electrónica 400 300 200
Robertito

www.senati.edu.pe
Ejercicios
1. Una tienda de música ha puesto a la venta DVD de diversos géneros con los precios que se describe en la
siguiente tabla:
Marca Precio unitario
1 Salsa S/. 56.00
2 Rock S/. 63.00
3 Pop S/. 87.00
4 folclore S/. 120.50
Como oferta la tienda ofrece un porcentaje de descuento sobre al importe de la compra en base a la
cantidad de discos adquiridos de acuerdo con la siguiente tabla:
Cantidad Porcentaje de descuento
1 a 3 No hay descuento
4 6.0%
5 a 10 8.0%
Más de 10 10.2%
Adicionalmente, si el cliente adquiere discos de Pop o Rock, recibe como obsequio un Poster. Este
obsequio sólo es aplicable si la cantidad de discos adquiridos es más de 6. Diseñe un algoritmo que
determine el importe de la compra, el importe del descuento, el importe a pagar y el obsequio (“Poster”
o “Ninguno”, según corresponda) por la compra de cierta cantidad de discos de un mismo género.
www.senati.edu.pe
2 Diseñar un programa que permita calcular los salarios de los trabajadores de una
empresa a partir de los siguientes datos:
• Número de horas trabajadas.
• El turno de trabajo realizado (Mañana (m), Tarde (t), Noche (n)).
• La tarifa ordinaria por hora de cada uno de los trabajadores (S/ 37.0).
Para el cálculo del salario bruto se tendrá en cuenta que el turno de tarde se paga a S/
1.20 más de la tarifa ordinaria, mientras que el turno de noche se paga a S/ 1.50 más,
también de la tarifa ordinaria. Para el cálculo del salario neto se realizan determinados
descuentos solo a los del turno noche según el siguiente cuadro:
Salario Bruto Porcentaje de descuento
De 2000 a 5000 15%
De 8000 a 10000 17%
Se desea imprimir el salario neto de cada trabajador.
www.senati.edu.pe
 Bloque de Ejercicios 1
Desarrollar los siguientes algoritmos y prográmelos en Python:
1. Realizar un sistemita con clases que calcule el área y perímetro de un triangulo
rectángulo. Nota este primer ejercicio desarróllalo con programación estructurada y
luego con POO, para tener diferencias claras entre ellas.
2. Realizar un sistemita con clases que calcule el área y perímetro de una circunferencia.
También hazlo con PEstruc
3. Dado un numero entero, dar como resultado: el doble de ese numero si este es
positivo; el triple si es negativo; y cero si neutro.
4. Dado tres longitudes, diga si forman un triangulo.
5. Determinar si un numero es múltiplo de tres y de cinco
6. Obtener la suma de los primeros N números naturales positivos
7. Dado un rango de número enteros, obtener la cantidad de números pares e impares
enteros que contiene.
8. Dado un numero entero positivo, obtener la cantidad de los primeros N números
múltiplos de 5
9. Dado un numero entero determinar cuantos dígitos tiene
10. Dado un numero devolver el digito mayor
11. Dado dos números diga si son amigos, dos números son amigos si la suma de sus
divisores son iguales. Por ejemplo los divisores de 220 son:
1+2+4+5+10+11+20+22+44+55+110=284. Los divisores de 284 son:
1+2+4+71+142=220. entonces 220 y 284 son amigos
12. Dado un numero devuelve el inverso del numero.

www.senati.edu.pe
Ejercicios
Parte 3: desarrolle e implemente los
siguiente programas 2. Determine el Importe a pagar Para el
examen de admisión de una Universidad,
1. En una Universidad se ha establecido cuyo valor depende del nivel Socio
los siguiente puntaje de ingreso
económico y el colegio de procedencia
Facultad Puntaje Máximo Nivel Social
Sistemas 100 Colegio
A B C
Electrónica 90
Industrial 80
Sistemas 300 200 100
Administración 70
Electrónica 400 300 200

www.senati.edu.pe
Para desarrollar en casa
Desarrolle el algoritmo e implementar a solución en Python. Realizarlo con un diseño muy creativo
1. Hallar la potencia y raíz cuadrada de un numero
2. Determinar la suma de los n primero números según la formula S=
3. Dado dos números enteros, devolver el mayor y un mensaje que diga: “este es el numero Mayor”

www.senati.edu.pe
Para desarrollar en casa
Desarrolle el algoritmo e implementar a solución en Python. Realizarlo con un diseño muy creativo
1. Hallar la suma de dos números
2. Hallar la potencia y raíz cuadrada de un numero
3. Determinar la suma de los n primero números según la formula S=
4. Dado dos números enteros, devolver el mayor y un mensaje que diga: “este es el numero Mayor”
5. Al ingresar el valor de una temperatura, obtener el tipo de clima según la siguiente tabla

Temperatura Tipo de clima

Temp <10 Frio
10<=Temp<=20 Nublado
21<=Temp<=30 Calor
Temp>30 Tropical
www.senati.edu.pe
Tarea 01
Desarrollar los siguientes ejercicios con POO y prográmelos en
Python:
1. Crear una clase con propiedades de métodos de motocar
2. Crear un clase con propiedades de clase de bufeo colorado
3. Crear una clase usando el constructor y destructor de la
clase
4. Calcular el área y el perímetros de un trapecio. Hacerlo con
programación estructurada y con POO
5. Determinar si un numero entero es par o impar
6. Dodo tres números enteros y positivos, devolver el numero
mayor

www.senati.edu.pe
www.senati.edu.pe