Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
PROGRAMACIÓN DEL LADO DEL CLIENTE
76
PROGRAMACIÓN DEL LADO DEL CLIENTE
EQUIPO 2 PROGRAMACIÓN WEB
Equipo 2
DEFINICIÓN
Los lenguajes de programación del lado cliente se usan para su integración en páginas web. Un código escrito en un lenguaje de script se incorpora directamente dentro de un código HTML y se ejecuta interpretado, no compilado.
Con la programación del lado del cliente se pueden validar algunos de los datos en la máquina cliente antes de enviarlos al servidor. Esto proporciona a los usuarios informes de error inmediatos, mientras siguen en esa página de formulario y sin necesidad de volver atrás tras recibir un mensaje de error. Puede resultar necesario acceder a una base de datos para validar determinados valores, mientras que no suele disponer de un acceso directo a la base de datos en la máquina del cliente, aunque ese acceso a la base de datos es factible.
SWOT
Para incorporar un fragmento de código script en una página HTML se introduce el script entre lostags <SCRIPT> y </SCRIPT>. Dos son los lenguajes de script que hay en la actualidad: el VBScript (derivado de Visual Basic) y el JavaScript (derivado de Java).
Vbscript (Visual Basic Script): Es un lenguaje de script, directamente derivado de Visual Basic. Para insertar código VBScript en una página HTML se añade al tag <SCRIPT> el parámetro LANGUAGE=”VBScript” , que determina cual de los lenguajes de script se utiliza. Decimos que los lenguajes de script se ejecutan interpretados, no compilados. Esto significa que un código escrito en un lenguaje de script no sufre ninguna transformación previa a su ejecución. Cada línea de código es traducida a lenguaje máquina justo antes de su ejecución. Después es ejecutada y la traducción no se conserva en ningún sistema de almacenamiento (como discos, cintas, etc.)
El código es cómodo para depurar, ya que no es necesario volver a compilar tras un cambio.
No es necesario disponer de un compilador, ya que el intérprete (que forma parte del navegador) ejecuta el script.
El mantenimiento es fácil y rápido, por parte del autor o de otro programador.
La ejecución se ralentiza, al ser necesaria la interpretación línea a línea cada vez.
El código es visible y puede ser objeto de plagio por parte de otras personas.
El usuario tiene acceso al código y puede modificarlo, estropeando alguna operación.
Las ventajas e inconvenientes de la interpretación son:
Las ventajas e inconvenientes de la compilación son:
El código compilado se ejecuta muy rápido, al no ser necesaria una traducción cada vez.
El código compilado no puede ser “abierto” por otras personas. No es necesario transmitir el código fuente.
El código compilado puede estar, íntegramente, incluido en un solo fichero.
Es necesario disponer de un compilador-linkador para el proceso de la compilación.
El código compilado suele ocupar bastante en disco, ya que incorpora en el propio código algunas librerías del sistema.
Depurar un programa implica volver a compilar tras los cambios.
El código en VBScript puede, además, estar diseñado para su ejecución en el lado del cliente o en el del servidor. La diferencia es que un código que se ejecuta en el lado del servidor no es visible en el lado del cliente. Este recibe los resultados, pero no el código. El código que se debe de ejecutar en el lado del servidor estará incluido en la página web correspondiente entre los tags <% y %>. Además habrá que renombrar la página para aplicarle la extensión .asp (Active Server Page -página activa en servidor-). El funcionamiento intrínseco de la ASP se especificará con mayor detal e en el capítulo 3. Lenguajes del servidor.
Un ejemplo de una sencil ísima página web que incluye código VBScript:
<HTML>
<HEAD>
<TITLE>Cuadro de mensaje</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = “VBScript”>
MSGBOX (“Ejemplo de mensaje”)
</SCRIPT>
</BODY>
</HTML>
Los lenguajes del lado del cliente
HTML
El lenguaje llamado HTML indica al navegador donde colocar cada texto, cada imagen o cada video y la forma que tendrán estos al ser colocados en la página.
Elel lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o <P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se utilizan para definir la forma o estilo que queremos aplicar a nuestro documento. <B>Esto está en negrita</B>.
Esta página es un claro ejemplo de uso del HTML.
Los lenguajes del lado del cliente.
JAVASCRIPT
Javascript es un lenguaje de programación utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web. Se trata de un lenguaje de programación del lado del cliente, porque es el navegador el que soporta la carga de procesamiento. Su uso se basa fundamentalmente en la creación de efectos especiales en las páginas y la definición de interactividades con el usuario.
Las sentencias escritas en javascript se encapsulan entre las etiquetas <script> y </script>. por ejemplo, si en el código de una página Web incluimos la sentencia
<script>
window.alert("Bienvenido a mi sitio web. Gracias...")
</script>
al abrir la página con el navegador se nos mostrará una ventana de bienvenida
APPLETS DE JAVA
Es otra manera de incluir código a ejecutar en los clientes que visualizan una página web. Se trata de pequeños programas hechos en Java, que se transfieren con las páginas web y que el navegador ejecuta en el espacio de la página.
Los applets de Java están programados en Java y precompilados, es por ello que la manera de trabajar de éstos varía un poco con respecto a los lenguajes de script como Javascript. Los applets son más difíciles de programar que los scripts en Javascript y requerirán unos conocimientos básicos o medios del lenguaje Java.
LOS LENGUAJES DEL LADO DEL CLIENTE
PRINCIPAL VENTAJE DE APPLETS DE JAVA
consiste en que son mucho menos dependientes del navegador que los scripts en Javascript, incluso independientes del sistema operativo del ordenador donde se ejecutan. Además, Java es más potente que Javascript, por lo que el número de aplicaciones de los applets podrá ser mayor.
DESVENTAJAS
Cabe señalar que los applets son más lentos de procesar y que tienen espacio muy delimitado en la página donde se ejecutan, es decir, no se mezclan con todos los componentes de la página ni tienen acceso a ellos. Es por ello que con los applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias, controlar Frames, formularios, capas, etc.
PLAN
VISUAL BASIC SCRIPT
Es un lenguaje de programación de scripts del lado del cliente, pero sólo compatible con Internet Explorer. Es por ello que su utilización está desaconsejada a favor de Javascript.
Está basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su sintaxis como la manera de trabajar están muy inspirados en él. Sin embargo, no todo lo que se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este último es una versión reducida del primero.
El modo de funcionamiento de Visual Basic Script para construir efectos especiales en páginas web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder también son los mismos: el navegador.
FLASH
Flash es una tecnología, y un programa, para crear efectos especiales en páginas web. Con Flash también conseguimos hacer páginas dinámicas del lado del cliente. Flash en realidad no es un lenguaje; Sin embargo, si tuvieramos que catalogarlo en algún sitio quedaría dentro del ámbito de las páginas dinámicas de cliente.
Para visualizar las "películas" Flash, nuestro navegador debe tener instalado un programita (plug-in) que le permita visualizarlas.
CSS
CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores... Incluso podemos definir nuestros propios estilos en un archivo externo a nuestras páginas; así, si en algún momento queremos cambiar alguno de ellos, automáticamente se nos actualizarán todas las páginas vinculadas de nuestro sitio.
CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada.
Los frameworks se han convertido en herramientas básicas para el desarrollo de webs y aplicaciones ya que permiten optimizar tiempos, costes y prestaciones. Descubre las ventajas de utilizarlos y cuáles son los mejores del mercado actualmente.
En los últimos años los frameworks PHP como Symfony, Laravel, Phalcon, Drupal han mejorado mucho y se han convertido en herramientas indispensables para los desarrolladores que quieren crear aplicaciones web optimizando tiempos, costes y prestaciones. A continuación, vamos a analizar cuáles son los mejores frameworks del mercado y qué aspectos se han de tener en cuenta a la hora de elegir uno.
MANEJO DE FRAMEWORKS
FRAMEWORKS
Un framework es una herramienta de desarrollo web que, por lo general, se define como una aplicación o conjunto de módulos que permiten el desarrollo ágil de aplicaciones mediante la aportación de librerías y/o funcionalidades ya creadas.
Los framework hacen que el desarrollador no esté continuamente “reinventado la rueda” y se centre en el problema que quiere resolver y no en la implementación de funcionalidades que normalmente son de uso común y que ya están resueltas por otros.
1. El código está organizado desde el primer momento
El orden y control tanto del código como de los archivos es mucho mejor gracias al uso de los frameworks. Cuando realizas una instalación de framework para PHP o cualquier otro lenguaje, estos ya incorporan una estructura definida.
Es una forma de mantener una cierta organización para encontrar los archivos que necesites de forma rápida y es muy útil cuando el software empieza a tener años y por él han pasado muchos desarrolladores diferentes. Al seguir todos las mismas reglas, la información está más organizada y es más fácil encontrar los archivos.
FRAMEWORKS
2. No reinventas la rueda
Como hablábamos antes, los framework proporcionan soluciones a la mayoría de problemáticas comunes del desarrollo de aplicaciones web.
Todos los frameworks existentes, llevan una serie de utilidades para:
Arquitectura de Desarrollo MVC (Modelo, Vista, Controlador).
Autenticación de usuarios, niveles control de acceso, sesiones, cookies…
Estructura de Directorios y Archivos modulares.
Manejo de Peticiones y Respuestas, (POST, GET, WebServices).
Manejo de formularios y validación de datos.
Manejo de localidades y multi-idioma.
3. Arquitectura MVC (Model - View - Controller)
No estamos hablando en chino, aunque lo parezca. El patrón Modelo-Vista-Controlador se utiliza en aplicaciones PHP por diversas razones:
Model: se encarga de presentar la estructura de tus datos, normalmente suele hacerse por interfaces con las mismas bases de datos.
View: también realiza una representación del contenido de las plantillas que componen una página web, así como de los datos de salida.
Controller: controla los request que hace el usuario, se comunica con el Model (base de datos) y nos muestra la Vista (HTML).
4. No tienes que preocuparte por la seguridad, el framework te ayuda
Son muchas las funciones que puedes aplicar en PHP para conseguir controlar la entrada/salida de datos y proteger así tu web de posibles ‘ataques’. Llevar a cabo este tipo de acciones de forma manual es posible pero un poco complejo.
Por ello, utilizamos frameworks ya que estas funciones pueden realizarse automáticamente. Por ejemplo, todas las acciones derivadas de HTML, como pueden ser las de los formularios o los enlaces, pueden filtrar tanto datos de entrada como de salida de forma automática.
5. Respaldo y protección de la comunidad
Todos los frameworks de PHP están organizados por grandes comunidades; es decir, un gran conjunto de desarrolladores a los cuáles puedes realizar consultas, conseguir su ayuda mediante foros, listas de correos o plataformas especializadas como GitHub, StackOverflow, etc.
6. Oportunidad de empleo
Si tu negocio online incluye un departamento técnico especializado en frameworks tendrá acceso a un mayor número de trabajadores con experiencia en dicha herramienta. Además un desarrollador experto en un framework será mucho más productivo y el tiempo de adaptación necesario será mínimo.
7. Los frameworks son perfectos para fomentar el trabajo en equipo
El uso de frameworks no solo es ventajoso a nivel técnico sino también a nivel de equipo. Por un lado, los desarrolladores frontend trabajan en las ‘View’, los especialistas en bases de datos en los ‘Model’ y, por último, el programador backend en la construcción de plugins, etc.
Aunque los beneficios que obtenemos de trabajar con un framework son superiores a sus inconvenientes, estos también existen y es necesario mencionarlos:
Existe una curva de aprendizaje para cada framework. Hacernos con el control de uno requiere tiempo.
Saber utilizar un framework no implica entender cómo funciona ni conocer las tecnologías que soporta.
La relevancia de un framework está sujeta a modas, es fácil que pase de ser el más el usado a un reducto del pasado en solo un año.
El hecho de que los frameworks estén pensados para funcionar en multitud de entornos distintos en algunos casos puede ser innecesario y conlleva una lentitud y peso añadido a nuestro código.
No siempre vamos a utilizar todas las funciones de un framework, pero normalmente las cargaremos todas.
Los mejores frameworks para desarrollo web
1. Symfony 4
Es uno de los frameworks más utilizados y recomendados por las empresas digitales y el preferido de muchos desarrolladores web. Symfony está compuesto por un amplio número de componentes que se pueden reutilizar, además de contar con una comunidad activa que siempre expone nuevos códigos para el desarrollo de posibles mejoras en las actualizaciones.
Ventajas de utilizar Symfony:
Licencia MIT: symfony hace uso de este tipo de licencia que permite realizar aplicaciones web gratis y de software libre.
Control de la información: desde Symfony tienes la capacidad de controlar todos los accesos a la información además del control -por defecto- de ataques CSRF o XSS.
Internacionalización a tu alcance: Symfony permite también la creación de apps en distintos idiomas.
Comunidad: uno de los factores más relevantes de Symfony. Su comunidad se caracteriza por tratarse de un modelo muy estable, de confianza y fácil de actualizar.
La calidad reside en el código: cuenta con un código abierto de muy buena calidad, con una arquitectura de uso fácil y diseños comprensibles y fáciles de utilizar para el desarrollador web.
Las mejores prácticas de programación: Symfony destaca también por sus peculiaridades en cuanto a la parte de programación puesto que facilita patrones de diseño previamente probados, bases de datos agrupadas y archivos de configuración, entre otros.
2. Laravel
Es uno de los frameworks más jóvenes. Utiliza algunos componentes de Symfony y se caracteriza por sus funcionalidades preparadas para el desarrollo de apps modernas de fácil uso.
Ventajas de utilizar Laravel:
Es un framework que permite agregar información de utilidad mediante su directorio Packalyst. Es una manera de localizar de inmediato aquello que te haga falta.
También permite el desarrollo de micro-servicios y apps.
Se compone de un sistema de enrutamiento muy eficaz, lo que permite relacionar elementos de una determinada aplicación con las rutas que el uso introduce en el navegador.
3. CakePHP
Framework de la “Old School” que se niega a doblar la rodilla ante los que van llegando, por muy fuerte que vengan pisando. Desarrollado en 2005 cuenta hoy día con licencia del MIT y ha llamado la atención de grandes empresas como Hyundai o BMW para todos sus proyectos web.
Este veterano ha sacado a la luz su versión 3.6 con la que quiere volver a lo más alto del top de los frameworks. Entre sus novedades cuenta con una gestión de las sesiones mejorada, librerías independientes y componentes modulares para reducir el peso y mejorar la personalización de los proyectos; entre otros tantos recursos de hoy día.
4. CodeIgniter
Este framework se creó en 2006 y durante mucho tiempo ha sido considerado uno de los frameworks de referencia en el mundo PHP, pero últimamente ha perdido terreno con los competidores. A pesar de esto Codeigniter no es complicado de aprender así que continúa siendo una buena opción a la hora de elegir un framework PHP.