Este documento proporciona información sobre conceptos básicos de Internet y la web. Explica que Internet es un sistema descentralizado de redes de ordenadores conectadas a nivel mundial que ofrece servicios de comunicación de datos, mientras que la web es un sistema de distribución y recuperación de documentos basados en hipertexto. También define URLs, protocolos de red como HTTP y TCP/IP, y lenguajes como HTML, CSS y JavaScript que se usan para crear y mostrar contenido web.

2. P á g i n a | 1
QUÉ ES INTERNET
Es un sistema descentralizado de redes de ordenadores
conectadas entre sí, distribuidas a nivel mundial, que ofrece
servicios de comunicación de datos.
QUÉ ES WEB
Sistema de distribución y recuperación de documentos basados
en hipertexto.

3. P á g i n a | 2
QUÉ ES URL (UNIFORM RESOURCE LOCATOR)
Un localizador de recursos uniforme o URL es una secuencia de
caracteres, de acuerdo a un formato modélico y estándar, que se
usa para nombrar recursos en Internet para su localización o
identificación, como por ejemplo documentos textuales,
imágenes, vídeos, presentaciones digitales, etc.
El URL es la cadena de caracteres con la cual se asigna una
dirección única a cada uno de los recursos de información
disponibles en la Internet. Cada página de cada uno de los
documentos de la Web posee su propio URL.

4. P á g i n a | 3
El URL de un recurso de información es su dirección en Internet,
la cual permite que el navegador la encuentre y la muestre de
forma adecuada.
DNS (DOMAIN NAME SYSTEM)
La misión principal del sistema de nombres de dominio es
resolver la traducción los de nombres de dominio empleados en
la navegación web, a caracteres binarios que puedan ser
interpretados como direcciones IP por los servidores. Aunque
también sirven para localizar a los servidores de correo
electrónico de cada dominio.

5. P á g i n a | 4
QUÉ SON PROTOCOLOS DE RED
Es un conjunto de normas que regulan la comunicación
(establecimiento, mantenimiento y cancelación) entre los
distintos componentes de una red informática.
Hay dos modelos de protocolos de red que son compatibles
entre sí, el modelo tcp/ip (transport control-internet protocol) y
el modelo osi (open system interconnect).

6. P á g i n a | 5
IP (INTERNET PROTOCOL)
Es un protocolo que actúa como servicio de datagramas, sin
mecanismos de corrección de errores. Este sistema de
direccionamiento está estructurado en dos jerarquías:
direccionamiento de red y de host. Su funcionamiento está
basado en direcciones lógicas, o IPs. Mantiene implementadas
dos versiones: Ipv4 y Ipv6. En realidad, actualmente Ipv6 está
sirviendo tráfico de red encapsulando los datagramas a través de
Ipv4. Existen dos tipos de dirección IP, la pública y la privada. Y
dos tipos de asignación de IP: estática o fija y dinámica.
Dependiendo este último factor exclusivamente del servidor
DHCP.

7. P á g i n a | 6
EL PROTOCOLO HTTP
Es el protocolo de transferencia de hipertexto que articula los
intercambios de información entre los navegadores y los
servidores web.
HTTP que no guarda ninguna información sobre conexiones
anteriores. Es un protocolo sin estado.
El desarrollo de aplicaciones web necesita frecuentemente
mantener estado. Para esto se usa la cookie, que es un archivo
de información que el servidor descargará en el equipo del
cliente. Esto le permite a las aplicaciones web refrescar el estado
de conexión de tal forma, que es como si estuviera establecida
una «sesión». Hay una clase de cookie cuya residencia en el
equipo que las recibe es persistente. Se trata de la cookie LSO, o
supercookie.

8. P á g i n a | 7
NAVEGADORES WEB
COMPONENTES COMUNES
 Interfaz de usuario → Marco, barra de dirección y otros
elementos.
 Motor interno → Gestiona las comunicaciones.
 Motor de renderizado → Interpreta código HTML y CSS
mostrándolo en pantalla.
 Comunicaciones→ Incorporan HTTP y otros protocolos.
 Almacenamientode datos → Almacenamientointerno y
gestión de sesiones.
 Intérprete JavaScript → Se encarga de ejecutar de forma
interna cualquier script.

9. P á g i n a | 8

10. P á g i n a | 9
PARADIGMA CLIENTE-SERVIDOR
Cuando el tiempo de carga de una web equivale a 0,1 segundos,
según el estándar Nielsen, esto representa una experiencia de
navegación ideal para el usuario. Cuando tiempo de respuesta de
la carga de la página web es de un segundo o superior, resulta
inaceptable para el usuario.

11. P á g i n a | 10
SERVIDORES DEDICADOS Y COMPARTIDOS
La diferencia fundamental entre los dedicados y compartidos
está en el coste. Los compartidos son más baratos. También
tienen más deficiencias en comparación con los dedicados.
Hay varios tipos de plataformas, las principales son las que
corresponde al paradigma AMP, MARS y WISA.
PARADIGMA AMP
Apache Server
MySQL
PHP
Python
Perl
PARADIGMA MARS
MySQL
Apache Server
Ruby
Solaris
PARADIGMA WISA:
Windows Server
IIS (Internet
Information Services)
SQL Server

12. P á g i n a | 11
ASP.NET

13. P á g i n a | 12
PERFILES FRONTEND

14. P á g i n a | 13
CÓDIGO HTML
El lenguaje de marcas de hipertexto es el lenguaje estándar para
estructurar los contenidos de la web. Fue desarrollado por Tim
Berners-Lee, quien también inventó la web.

15. P á g i n a | 14
ESTRUCTURA BÁSICA DEL CÓDIGO HTML
H5BP (HTML5 BOILERPLATES)
Es una compilación de archivos CSS, HTML y JavaScript, creados
por desarrolladores, que simplifican y aceleran el proceso de
construcción de sitios web dinámicos y aplicaciones web.

16. P á g i n a | 15
BOILERPLATES
Son un conjunto de plantillas construidas en torno a un fin que
puede ser estético o funcional. Proveen de un punto de arranque
para la creación de sitios web o aplicaciones.
FRAMEWORKS
Son recursos diseñados para ayudar a construir aplicaciones y
sitios web.
Pueden incluir: CCS grid, librerías de JavaScript, secuencias de
comandos y plantillas HTML.
FRAMEWORKS Y BOILERPLATES
Frameworks como Bootstrap ofrecen soluciones en torno al
desarrollo front-end de los sitios web dinámicos y las
aplicaciones web, y proporcionan a los desarrolladores el
conjunto más completo de herramientas de trabajo.
Los frameworks se emplean en la construcción de prototipos.
El uso de frameworks puede acelerar de forma espectacular el
desarrollo de prototipos.
En muchos casos, el código del framework NO se usa en la
producción final.

17. P á g i n a | 16
HOJAS DE ESTILO CSS
Lenguaje para describir el aspecto y el formato de un documento
escrito en un lenguaje de marcado, como HTML.

18. P á g i n a | 17
PREPROCESADORES CSS
Es un lenguaje de scripts que amplía la funcionalidad de CSS.
Debe ser procesado posteriormente para su transformación en
CSS normalizado.
VENTAJAS
 Añaden nuevas
funcionalidades a CSS.
 Su sintaxis hace la
escritura CSS más
eficiente.
 Permiten solventar de
manera automática
muchas incoherencias
del navegador en el
procesamiento del CSS.
INCONVENIENTES
 El trabajo en entornos
colaborativos y el
manejo de códigos
compartidos requieren
que todos los usuarios
conozcan la sintaxis de
los preprocesadores.
 El procesamiento
puede
sobredimensionarCSS
y volverlo ineficiente.
 Añaden una capa de
complejidad a los flujos
de trabajo

19. P á g i n a | 18
JAVASCRIPT
Lenguaje de programación interpretado, dialecto del estándar
ECMAScript y orientado a objetos. Fue desarrollado en 1995 por
Netscape.
Características:
 Permite crear elementos interactivos.
 Su sintaxis es sencilla y asequible.
 Su código se introduce de forma embebida en HTML.
 No requiere de comunicación alguna con el servidor.
 Su código es ejecutado directamente por el motor del
navegador.
BIBLIOTECAS

20. P á g i n a | 19
LIBRERÍAS JAVASCRIPT
Las librerías JavaScript amplían la funcionalidad del JavaScript
original.
Sus posibilidades se extienden desde funciones muy precisas,
como la fecha y la hora [Date.js], hasta tareas mucho más
amplias (JQuery).
CÓDIGOS DE EJEMPLO

21. P á g i n a | 20
FORMATOS DE IMAGEN
A FAVOR
 El proceso de escritura
JavaScript es más
eficiente.
 A menudo, las
capacidades del código
pueden extenderse a
través de las bibliotecas.
 El uso generalizado del
código garantiza la
prueba y la mejora
continua.
EN CONTRA
 El tamaño del código
aumenta y, en
ocasiones, los
servidores reciben
solicitudes adicionales.
 Eventualmente, el
código puede verse
limitado por una
determinada sintaxis
propia de alguna
librería.
 Sin un conocimiento
previo de JavaScript, la
elección de una librería
puede ser inadecuada.

22. P á g i n a | 21
QUÉ ES UNA API (Aplication Program Interface)
Interfaz de programa de aplicación → Conjunto de instrucciones
o normas para el uso de un servicio o componente de un sistema
concreto.
Consideraciones:
 Muchas APIs limitan el tipo de datos y servicios disponibles.
 Las APIs están en continuo desarrollo y su codificación
evoluciona.
 Es fundamental utilizar APIs de cierta solvencia.
APIS DE HTML5
MEDIA API
Control de carga y reproducción de vídeo y audio.
Está relacionada con la Text Track API que controla los subtítulos.
API DE CACHÉ DE APLICACIÓN
Posee mecanismos para el almacenaje de datos fuera de línea.

23. P á g i n a | 22
Permite crear aplicaciones más persistentes, capaces de trabajar
sin conexión.
Gestiona y envía los datos cuando se restablecen las
comunicaciones.
API DE GEOLOCALIZACIÓN
API de carácter independiente asociada con HTML5.
Permite a los desarrolladores conocer la ubicación geográfica del
usuario.
CANVAS API
API de carácter independiente asociada con HTML5.
Permite crear un lienzo sobre el que los usuarios pueden dibujar
libremente.
Facilita el desarrollo de animaciones complejas, efectos visuales
y juegos.
OTRAS APIS
DOM, Web Workers, dataset, drag and drop, classlist, historial,
IndexedDB, EventSource.
FUENTES WEB. CONSIDERACIONES.
CSS3 permite la descarga e instalación de fuentes tipográficas en
el navegador.
Existen servicios web que ofrecen soluciones gratuitas como
Google WebFonts.
Generalmente se utiliza la etiqueta CSS: @Font-face.

24. P á g i n a | 23
CÓDIGO DEL LADO DEL SERVIDOR
Procesamiento de la petición de un usuario mediante la
interpretación de un script en el servidor web para generar
páginas HTML dinámicas.
USOS FRECUENTES
 Cumplimentación de un formulario.
 Gestión de una compra en línea.
 Registro de un nuevo usuario.
 Reserva de un hotel.
 Compra de un billete de avión.
A FAVOR
 Nuevas fuentes
optimizadas para su uso
en la web.
 Nuevas licencias que
permiten su uso
mediante @Font-face.
EN CONTRA
 Las compañías
propietarias se oponen
a que sus fuentes sean
descargadas y
utilizadas por terceros.
 La mayoría de los
formatos pesan
demasiado como para
considerarlo un
recurso.

25. P á g i n a | 24
SCRIPTING DEL LADO DEL SERVIDOR
Cualquier script que se ejecute en el lado del servidor se conoce
como Server Side Scripting.
El procesamiento de la secuencia (script) se realiza en el servidor
web.
CFML= Cold Fusion mark Language (Adobe).

26. P á g i n a | 25
Consecuencias: incremento de la carga y ralentización.
El usuario final tiene que «refrescar» la página en el navegador.
Solución: Optimizar la experiencia del usuario integrando scripts
del lado del servidor y el cliente (JavaScript).
PHP
Lenguaje de programación de uso general de código del lado del
servidor, originalmente diseñado para el desarrollo web de
contenido dinámico.
Puede ser embebido en el código HTML. En su origen, PHP
fueron una serie de scripts CGI (Common Gateway Interface)
escritos en lenguaje de programación C a los que se
denominaron Personal Home Page el año 1994. Pero desde la
versión del año 1997 se denomina «Hypertext Preprocessor».
Existe una solución con PHP en la práctica totalidad de ofertas de
hospedaje web.
Es un lenguaje de programación relativamente fácil de aprender
y manejar.
Se ha convertido en el lenguaje más utilizado para la
construcción de sitios dinámicos, en combinación con Apache y
MySQL.
JSP (Java Server Pages)
Forma parte del entorno de desarrollo de Java. Su código es una
combinación de XML y scriplets. Vinculado a grandes desarrollos.
Resulta fácil encontrar hospedaje web con JSP.
ASP.NET

27. P á g i n a | 26
Forma parte del entorno de desarrollo .NET.
Empleado para grandes proyectos empresariales.
No es popular en la creación de sitios web dinámicos. Solo
admite servidores Windows con .NET.
PYTHON
Es un potente lenguaje de código abierto.
Posee un carácter generalista.
Cuenta con un conjunto de librerías orientadas a la web.
Es empleado para desarrollar grandes sitios y aplicaciones.
RUBY
Es un potente lenguaje de código abierto.
Debe su popularidad a su entorno Ruby on Rails.
Rails está específicamente orientado a la web.
Posee grandes características y una sintaxis sencilla.
COLDFUSION
Se embebe dentro de HTML con etiquetas propias.
Es capaz de controlar tareas comunes simples.
Presenta una buena integración con la familia Adobe. No es fácil
encontrar hospedaje.
Es una de las soluciones más caras.

28. P á g i n a | 27
DESCARGA DE CÓDIGO DESDE LOS SERVIDORES AL
EQUIPO

29. P á g i n a | 28
BASES DE DATOS
Hay dos tipos: relacionales y NOSQL.
RELACIONALES
Almacenan los datos en tablas que se relacionan entre sí sobre la
base de valores clave. Esto permite una completa clasificación y
filtrado de los datos. Están orientadas a objetos y sus relaciones
también.
Oracle, MySQL, Sybase, y otras bases de datos basadas en SQL
son bases de datos relacionales populares.

30. P á g i n a | 29
NOSQL
Las bases de datos NO SQL almacenan conjuntos de datos
individuales, planos, orientados a documentos El formato de
los documentos es BSON, que está basado en JSON.
A menudo son más rápidas que los índices y se escalan más
fácilmente que las bases relacionales. A diferencia de las
relacionales, estas carecen de esquema.
MongoDB, CouchDB, SimpleDB, Hbase, CouchBase y
Cassandra, RavenDB, Neo4j, BigTable, Dynamo, Ryak,
Hadoop son ejemplos debases de datos NoSQL.

31. P á g i n a | 30
SQL (STRUCTURED QUERY LANGUAGE)
Lenguaje de consulta estructurado. Es un lenguaje declarativo de
acceso a bases de datos relacionales que permite especificar
diversos tipos de operaciones en ellas.
Es el lenguaje estándar usado para la gestión y recuperación de
información procedente de las bases de datos.

32. P á g i n a | 31
MySQL
MySQL es un sistema gestor de bases de datos (SGBD)
multiusuario, multiplataforma y de código abierto.
SISTEMA GESTOR DE DATOS
Un sistema gestor de bases de datos (SGBD) es una aplicación
formada por módulos que permite el almacenamiento,
modificación y extracción de la información en una base de
datos, además de proporcionar herramientas para añadir, borrar,
modificar y analizar los datos.
SINTAXIS
La sintaxis SQL es simple y lógica y sus fundamentos son fáciles
de aprender.
Seleccionar, insertar, actualizar, borrar y otras instrucciones
simples se utilizan para recuperar y manejar los datos.
EJEMPLO DE CÓDIGO
SELECT * FROM tours
WHERE pvp < 600
ORDER BY NombreTour ASC
Hay muchas versiones de SQL, cada una con sus propias
extensiones.
Las búsquedas en SQL están habitualmente embebidas en el
código de otro lenguaje orientado a la web.

33. P á g i n a | 32
Las aplicaciones específicas, como MySQL, pueden ayudar a crear
y gestionar bases de datos.
Aunque los usuarios, diseñadores e incluso desarrolladores web
no necesitan ser expertos en SQL, conocer los fundamentos es
interesante.
SERVICIOS EN LA NUBE (CLOUD COMPUTING)
La nube es una red distribuida de ordenadores que pueden
realizar tareas aprovechando las ventajas de la escala y la
potencia de la red. Habitualmente se refiere a procesos
distribuidos a través de internet.
GITHUB
Sistema de control de código abierto construido a partir de Git.
Permite gestionar proyectos, publicar archivos y almacenar
revisiones. Ofrece versiones tanto libres como comerciales.

34. P á g i n a | 33
Presenta un interfaz de web fácil de usar.
CDN (CONTENT DISTRIBUITED NETWORK)
CDN es un sistema de entrega de contenidos a través de una red
distribuida de servidores.
Los CDN se utilizan generalmente para facilitar recursos estáticos,
como vídeo o librerías de JavaScript.
Utilizar las librerías alojadas en Google reduce la carga alojada en
tu servidor acelera la entrega de jQuery al cliente incrementa la
probabilidad de que el cliente mantenga jQuery en la caché.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2
/jquery.min.js"></script>
Algunos CDN alojan un único tipo de recurso.
En un CDN como YouTube no sólo sirven como redes de entrega
sino también agregadores de contenidos.
Es posible elegir entre numerosos CDN libres o comerciales
para un servicio especializado.

35. P á g i n a | 34
Entre los CDN más populares se encuentran:Akamai, CloudFare,
Amazon´s CloudFront, EdgeCast y WindowsAzure.
El CDN añade una capa adicional de complejidad al sitio web.
En el caso de los recursos especializadosno existe la posibilidad
de crear descargas personalizadas o versiones “minified”
específicas.
Determinados requerimientos de seguridad pueden impedir el
uso de un CDN externo.
CMS (CONTENT MANAGER SYSTEM)
Un CMS o sistema gestor de contenidos es una aplicación web
diseñada para llevar a cabo la creación, gestión, publicación y
archivo del contenido de un sitio web.
La creación y edición de los contenidos deunCMSse realiza a
través de un editor web, lo cual flexibiliza la actualización del
contenido web.
La mayoría de los CMS permiten crear grupos de usuarios con
diferentes niveles de permisos administrativos.
La mayoría de los CMS tienen extensiones que añaden potentes
características a los sitios web.

36. P á g i n a | 35
Algunos CMS ya están alojados en los servidores que proporciona
la compañía propietaria del software,ofreciendo lo quese
denomina «solución alojada». Portanto, con los CMS que
pertenezcan a la categoría de solución alojada sólo se requiere
una cuenta de usuario para comenzar a crear un sitio web.
Otros CMS pueden instalarse en distintos servidores web.
Las características y la personalización del sitio web varían
enormemente entre los distintos CMS.
Hayqueasegurarse de identificar las necesidades que debe
cubrir el CMS antes de iniciar el proyecto.
RECURSOS ONLINE Y WEBS RECOMENDADAS
JAVASCRIPT

37. P á g i n a | 36

38. P á g i n a | 37
WEBS RECOMENDADAS

39. P á g i n a | 38