U MATERIA: APLICACIONES WEB

N
I
V
E
ING.JESÚS ALEJANDRO ÁLVAREZ GALEANA.
R
S
I PORTAFOLIO: PRIMER PARCIAL.
D
A
D GRUPO: B
T
E
C CUATRIMESTRE: 3RO
N
O
L MATRICULA:201804023
O
G
I NOMBRE: LUIS CARLOS OVANDO BRUNO
C
A

D
CORREO: Luis.ovando@utacapulco.edu.mx
E

A FECHA: 28/mayo/2019
C
A
P
U
L
C
O
Tema 1.1 tecnologías para la creación de aplicaciones web

 Internet

Es una red de computadoras que se encuentran interconectadas a nivel

mundial para compartir información. se trata de una red de equipos de cálculo que
se relacionan entre sí a través de la utilización de un lenguaje universal.

el concepto internet tiene sus raíces en el idioma inglés y se encuentra conformado

por el vocablo inter (que significa entre) y net (proveniente de network que quiere
decir red electrónica).
fuente: HTTPS://CONCEPTO.DE/INTERNET/#IXZZ5OKYIRTHL

 Web
Es un vocablo inglés que significa “red”, “telaraña” o “malla”. el concepto se utiliza
en el ámbito tecnológico para nombrar a una red informática y, en general,
a internet (en este caso, suele escribirse como web, con la w mayúscula).
Fuente: HTTPS://DEFINICION.DE/WEB/

 Aplicaciones web

Son un tipo de software que se codifica en un lenguaje soportado por los

navegadores web y cuya ejecución es llevada a cabo por el navegador en internet
o de una intranet (de ahí que reciban el nombre de app web). son aquellas
herramientas que los usuarios pueden utilizar accediendo a un servidor web por
medio de internet o de una intranet mediante un navegador que ejecutará la misma.

fuente: https://wiboomedia.com/que-son-las-aplicaciones/

 Front end

se enfoca en el usuario, en todo con lo que podemos interactuar y lo que vemos

mientras navegamos. así como en una primera cita, nuestra web busca causar una
buena impresión y agradar al usuario, para lo cual utiliza html, css y javascript.
buena experiencia de usuario, inmersión y usabilidad, son algunos de los objetivos
que busca un buen frontend y hoy en día existen una gran variedad de frameworks,
preprocesadores y librerías que nos ayudarán en esta tarea. ¡conocerlos y usarlos
correctamente es el reto a cumplir! para un frontend la creatividad es el recurso más
valioso, ya que tendrá que tomar fuentes, colores, imágenes y todos lo recursos de
los cuales disponga para crear sitios agradables que se vean bien en todos los
dispositivos y resoluciones.

Fuente: https://devcode.la/blog/frontend-y-backend/
  Back end

Enfocado en hacer que todo lo que está detrás de un sitio web funcione
correctamente. toma los datos, los procesa y los envía al usuario, además de
encargarse de las consultas o peticiones a la base de datos, la conexión con el
servidor, entre otras tareas que debe realizar en su día a día. cuenta con una serie
de lenguajes y herramientas que le ayudan a cumplir con su trabajo como php,
ruby, python, javascript, sql, mongodb, mysql, etc, estos son usados para crear sitios
dinámicos. como en muchos sitios la información se encuentra en constante cambio
o actualización, una buena capacidad de respuesta y una velocidad óptima del sitio
son responsabilidades que un backend debe de afrontar.

Fuente: https://devcode.la/blog/frontend-y-backend/

 Hosting

es un servicio ofrecido por muchas compañías mediante el cual podemos poner

una página web o un conjunto de datos en un servidor remoto para que
puedan ser usados y/o consultados por usuarios de internet. este servicio se
basa en que un usuario que quiera utilizarlo suba los datos a un host o servidor
ofrecido por la compañía. a partir de entonces el usuario podrá consultar o ver sus
datos directamente desde internet desde cualquier lugar del mundo y si así lo desea,
también podrán verlos el resto de usuarios de la red.

Fuente: https://sistemas.com/hosting.php

 Protocolo

El término que se emplea para denominar al conjunto de normas reglas y pautas

que sirven para guiar una conducta o acción. son los acuerdos establecidos por
varios estados para modificar un tratado y los conjuntos de reglas que deben
respetar distintos sistemas informáticos para poder comunicarse entre ellos.

Fuente: https://definicion.de/protocolo/

 Http

Proviene del inglés hypertext transfer protocol o protocolo de transferencia de hiper

textos, es el protocolo de transmisión de información de la world wide web, es
decir, el código que se establece para que el computador solicitante y el que
contiene la información solicitada puedan “hablar” un mismo idioma a la hora de
transmitir información por la red.

Con el http se establecen criterios de sintaxis y semántica informática (forma y

significado) para el establecimiento de la comunicación entre los diferentes
elementos que constituyen la arquitectura web: servidores, clientes, proxies. fue
creado en 1999 por el world wide web consortium en colaboración con la internet
engineering task force.

Fuente: https://concepto.de/http/#ixzz5ol5mw5wi

 Https
Es igual, pero añadiéndole "seguro". estos dos protocolos se usan para lo mismo,
la transferencia de datos. la diferencia básica entre ambos es la forma en la que
viajan los datos. si los datos son transferidos mediante http, estos viajan en claro y
son accesibles para cualquiera que intercepte la comunicación. en cambio, el
protocolo https usa una conexión segura mediante un cifrado ssl y por tanto los
datos viajan de un modo seguro de un lugar a otro.
Fuente: https://introbay.com/es/blog/2016/07/05/https-que-es-y-para-que-sirve

 Modelo cliente –servicio

Consiste básicamente en un cliente que realiza peticiones a otro programa
(el servidor) que le da respuesta.
la tecnología denominada cliente -servidor es utilizada por todas las aplicaciones de
internet/intranet. un cliente funciona en su ordenador local, se comunica con el
servidor remoto, y pide a éste información. el servidor envía la información solicitada
Características:
Espera y recibe las respuestas del servidor.
Por lo general, puede conectarse a varios servidores a la vez.
Normalmente interactúa directamente con los usuarios finales mediante una interfaz
gráfica de usuario
Los sistemas cliente-servidor pueden ser de muchos tipos, dependiendo de las
aplicaciones que el servidor pone a disposición de los clientes. entre otros, existen:
- servidores de impresión, mediante el cual los usuarios comparten impresoras.
- servidores de archivos, con el cual los clientes comparten discos duros.
- servidores de bases de datos, donde existe una única base de datos.
- servidores de lotus notes, que permite el trabajo simultáneo de distintos clientes
con los mismos datos o documentos.
Navegadores Ventajas Desventajas
google chrome Funciones que están No tiene marcadores
diseñadas para uso dinámicos
eficaz y sencilla. ocupa gran cantidad de
es disponible memoria ram.
gratuitamente bajo al llenar un campo de texto
condiciones de servicio. varias veces, como el de los
números al enviar mensajes de
texto desde la web, no
aparecen los últimos (o
primeros) números.
a veces la barra puede
aparecer con colores o no-
normal.

Internet explorer Incorporación de widgets En la navegación privada no

sistema denominado podemos almacenar cierta
"automatic crash información como cookies,
recovery" historia, etc.
mejorado visualmente bastante inestabilidad, más
navegación privada que en versiones anteriores.
navegación por pestañas regularmente lento.

Opera A veces la paginas no cargan

Búsqueda focalizada de correctamente, y el navegador
palabras. dice que las cargado bien.
aumenta el tamaño de la en algunos ordenadores, se
página. presenta mucha inestabilidad.
ajustar el ancho de la
página al ancho de la
pantalla.
desactiva
las imágenes en la
página.
activar las barras de
direcciones.
recuperar una pestaña
cerrada
accidentalmente.
abrir una ventana de
navegador nueva.
Mozilla firefox Código de fuente es En la navegación privada no
liberado o disponible podemos almacenar cierta
libremente. información como cookies,
por ser multiplataforma historia, etc.
soporta distintos bastante inestabilidad, más
sistemas operativos. que en versiones anteriores.
SERVIDORES VENTAJAS DESVENTAJAS
Xampp Xampp Es Una -No Soporta Mysql
Herramienta Muy Desde La Consola.
Práctica Que Nos Xampp Trae
Permite Instalar El Phpmyadmin Para
Entorno Mysql, Apache Administrar Las
Y Php, Suficiente Para Bases De Datos De
Empezar Proyectos Mysql, Sin Embargo
Web O Revisar Alguna Para Tareas Más
Aplicación Localmente. Específicas Es Mejor
Ademas Trae Otros Utilizar La Consola
Servicios Como (Linea De Comandos)
Servidor De Correos Y Y Xampp No La
Servidor Ftp. Soporta.
Appserver Se Trabaja En Un No Incluye Una
Entorno Real. Manera Facil De
Detener Los Servicios
Esta Utilidad Instalada Cuando No Lo
E Forma Automatica Estamos Usando
Apache, Php Y Mysql Estara Siempre
Server Consumiendo
Recursos De Nuestro
Pc,
Ftp Servidor Realiza Una Es Un Protocolo
Conexión Rápida Viejo, Que Si Bien
Con El Servidor. Ha Recibido
Es Ideal Para Subir Actualizaciones,
Muchos Archivos O No Se Ha
Pocos, Según Se Adaptado Al
Necesite. Desarrollo Web
Es Multiplataforma, Moderno.
Funciona En No Permite
Cualquier Sistema Paralelizar Las
Operativo. Descargas O
Permite Subir Y Subidas De
Bajar Archivos Bi- Archivos, Estos
Direccionalmente. Deben Hacerse
Soporta Uno A Uno.
Conexiones No Permite
Encriptados Con Resumir Las
Certificados Ssl Descargas O
Subida De
Archivos, Pueden
Quedar Corruptos
Los Archivos Si
 Hay Errores En La
Red.

Wamp Server  Interfaz Intuitiva Y  Conocer Un Poco

Permite Poder De Apache, Php Y
Trabajar Con Mysql.
Versiones  Otra Desventaja Es
Anteriores. Que Todos Los
 Otra De Las Componentes
Ventajas De Usar Vienen Instalados
Wampserver Es Y Cualquier
Que La Instalación Usuario Puede
Modificará Los Ingresar Y Alterar
Archivos De Los Códigos.
Configuración
(*.Conf) Con La
Ruta Donde
Finalmente Se
Ubicará El
Programa.

INSTALACIÓN Y USO DE XAMPP

Instalar XAMPP en Windows 7/10
Antes de instalar un servidor de páginas web es conveniente comprobar si no hay
ya uno instalado, o al menos si no está en funcionamiento. Para ello, es suficiente
con abrir el navegador y escribir la dirección http://localhost. Si se obtiene un
mensaje de error es que no hay ningún servidor de páginas web en funcionamiento
(aunque podría haber algún servidor instalado, pero no estar en funcionamiento).

Una vez obtenido el archivo de instalación de XAMPP, hay que hacer doble clic
sobre él para ponerlo en marcha. Al poner en marcha el instalador XAMPP nos
muestra un aviso que aparece si está activado el Control de Cuentas de Usuario y
recuerda que algunos directorios tienen permisos restringidos:

A continuación, se inicia el asistente de instalación. Para continuar, haga clic en el

botón "Next".

Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje
PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de
componentes puede elegir la instalación o no de estos componentes. Para seguir
estos apuntes se necesita al menos instalar MySQL y phpMyAdmin.
En la siguiente pantalla puede elegir la carpeta de instalación de XAMPP. La carpeta
de instalación predeterminada es C:\xampp. Si quiere cambiarla, haga clic en el
icono de carpeta y seleccione la carpeta donde quiere instalar XAMPP. Para
continuar la configuración de la instalación, haga clic en el botón "Next".

La siguiente pantalla ofrece información sobre los instaladores de aplicaciones para

XAMPP creados por Bitnami. Haga clic en el botón "Next" para continuar. Si deja
marcada la casilla, se abrirá una página web de Bitnami en el navegador.
Una vez elegidas las opciones de instalación en las pantallas anteriores, esta
pantalla es la pantalla de confirmación de la instalación. Haga clic en el botón "Next"
para comenzar la instalación en el disco duro.

El proceso de copia de archivos puede durar unos minutos.

Durante la instalación, si en el ordenador no se había instalado Apache
anteriormente, en algún momento se mostrará un aviso del cortafuegos de Windows
para autorizar a Apache a comunicarse en las redes privadas o públicas. Una vez
elegidas las opciones deseadas (en estos apuntes se recomienda permitir las redes
privadas y denegar las redes públicas), haga clic en el botón "Permitir acceso".

Una vez terminada la copia de archivos, la pantalla final confirma que XAMPP ha
sido instalado. Si se deja marcada la casilla, se abrirá el panel de control de XAMPP.
Para cerrar el programa de instalación, haga clic en el botón "Finish".
 ENTORNO DE PROGRAMACION
Sublime Text es un editor de texto avanzado que soporta multitud de lenguajes
como ASP, C, C++, C#, CSS, D, Erlang, Groovy, Haskell, HTML, Java, Javascript,
LaText, Lisp, Lua, Markdown, Matlab, Ocaml, Pascal, Perl, Perl, PHP, Python, R,
Ruby, SQL, TCL, Textile y XML entre otros.
Sublime Text es multiplataforma, disponible para Linux, Windows y XO S. Es un
programa de pago, la licencia individual cuesta 70$ aunque se puede descargar una
versión de prueba que tiene tiempo ilimitado.
Es un editor que puede ser muy personalizado aunque por defecto tiene un fondo
negro con las palabras reservadas por el lenguaje tienen un color distinto al resto y
todas llamativas, gracias a esto, hace que aumente la concentración a la hora de
escribir código.
PRACTICA 1
 HOLA MUNDO

Identifica que se encuentre

escrito en ese lenguaje
Especifica el prólogo del resto
del archivo

Descarta el titulo
Encierra el resto de
documento el contenido

PRACTICA 2
 MI PRIMERA PÁGINA WEB

Titulares

Es el párrafo

Son para
comentarios
Salto de línea

PRACTICA 3
 ENLACES

Sirve para saltar entre

diferentes URLs

Damos el nombre a una

sección de nuestro
documento
Practica 4
  LISTAS ORDENADAS

Símbolos son
números ordenado

Ir una definición

El título de la definición

Dentro de esta ira la

definición

Listan dentro de
las etiquetas no
ordenadas

PRACTICA 5
 CARÁCTER

Énfasis
Destacado
Ejemplo de código
Muestra
Teclado
Variables
Definición
Cita
Negrita
Itálica
Subrayado
Teletipo o ancho
PRACTICA 6
 SALTOS Y LÍNEAS

Se emplea para
dibujar una línea
horizontal que
posee atributos

Asigna el
ancho en %

PRACTICA 7
 TABLA BÁSICA

Fila del
contenedor de la
celda

Especifica los bordes

Son ubicadas en la deban aplicarse o el
primera fila de la contenido de la tabla
tabla encima de las
celdas

Representa la
celdas
Practica 8
 Titulo tabla

Titular una tabla

Indica el número de
columna que se
quiere abarcar

Indica el número de
filas que se quiere
abarcar
centrado

Practica 9
 Tabla avanzada

Especifica el
ancho de la tabla

Indica el numero de pixels

Rodea la imagen o tabla

Indica el espacio de numero

pixeles que se para cada celda
 Practica 10
 Imagen

El archivo de la imagen
o URL que presenta
El ancho de la imagen

El alto de la imagen
El borde que rodea la imagen

Alineación de la imagen con respecto a una

línea de texto o imagen en esa línea

Practica 11
 Formularios

Practica
Trata la variable enviada con el 12
formulario

Enviar datos

Restaurar formulario
Practica 12
 PHP-HTML

Combinamos
php con html