Embed Size (px)
Citation preview
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.
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.
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.
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).
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.
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.
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. Almacenamiento de datos → Almacenamiento interno y
gestión de sesiones. Intérprete JavaScript → Se encarga de ejecutar de forma
interna cualquier script.
P á g i n a | 8
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.
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
P á g i n a | 11
ASP.NET
P á g i n a | 12
PERFILES FRONTEND
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.
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.
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.
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.
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 sobredimensionar CSS y volverlo ineficiente.
Añaden una capa de complejidad a los flujos de trabajo
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
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
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.
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.
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.
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.
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).
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
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.
P á g i n a | 27
DESCARGA DE CÓDIGO DESDE LOS SERVIDORES AL EQUIPO
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.
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 de bases de datos NoSQL.
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.
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.
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.
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.
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 especializados no 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 de un CMS se 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.
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 que se denomina «solución alojada». Por tanto, 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.
Hay que asegurarse de identificar las necesidades que debe cubrir el CMS antes de iniciar el proyecto.
RECURSOS ONLINE Y WEBS RECOMENDADAS
JAVASCRIPT
P á g i n a | 36
P á g i n a | 37
WEBS RECOMENDADAS
P á g i n a | 38
