1. arquitecturas y herramientas de programación
TRANSCRIPT
![Page 1: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/1.jpg)
![Page 2: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/2.jpg)
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.1. DISEÑO Y DESARROLLO WEB
D I S E Ñ O W E B
§ Creación y organización de contenido: la arquitectura de la información.
§ Aspectos importantes:§ Organización.§ Funcionalidad.§ Accesibilidad.§ Publicidad.
D E S A R R O L L O W E B
§ Nuevas tecnologías.§ Diseño gráfico.§ Programación.§ Diseño de interfaces.§ Usabilidad.§ Recursos.
L A U R A F O L G A D O G A L A C H E
![Page 3: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/3.jpg)
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.2. SITIOS WEB
L A D O D E L S E R V I D O R
§ Contiene el hardware y el software del servidor web, elementos de programación y tecnologías:§ Scripts y programas CGI.§ Programas API del servidor.§ Módulos de Apache.§ Servlets de Java.§ Lenguajes scripting como
PHP o ASP.
L A D O D E L C L I E N T E
§ Se refiere a los navegadores web.§ HTML y CSS.§ Lenguajes de scripting
como Javascript (jQuery).§ Plugins y API del
navegador.§ Controles ActiveX.§ Applets de Java.
L A U R A F O L G A D O G A L A C H E
![Page 4: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/4.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.3. TECNOLOGÍAS DE PROGRAMACIÓN EN EL CLIENTE
Estructura: HTML Presentación (diseño): CSS
Comportamiento (interactividad):
Javascript
Ajax: integra la programación
cliente y servidor con un proceso
asíncrono.
![Page 5: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/5.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
FUNCIONALIDADES
¿Qué funcionalidades tiene Javascript? Es decir, ¿qué podemos y qué no podemos hacer con él?
Busca en Internet 5 funcionalidades.
![Page 6: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/6.jpg)
FUNCIONALIDADES
L A U R A F O L G A D O G A L A C H E
Lenguaje interpretado en el navegador: puede
estar deshabilitado.
No puede escribir ficheros en el
servidor.
Reacciona a la interacción del
usuario.
Controla múltiples ventanas, marcos, plugins, applets…
Pre-procesa datos en el cliente.
Modifica estilos y contenido de navegadores.
Puede solicitar ficheros al servidor.
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
![Page 7: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/7.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
COMPATIBILIDADES
¿Es compatible Javascript en todos los dispositivos?¿Es soportado por todos los navegadores?
¿Se puede habilitar y deshabilitar?
![Page 8: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/8.jpg)
COMPATIBILIDADES
L A U R A F O L G A D O G A L A C H E
Prácticamente todos los navegadores lo soportan: debemos
asegurarnos.
Hay algunas incompatibilidades entre navegadores.
Algunos dispositivos móviles no pueden ejecutar Javascript.
Puede desactivarse la ejecución de código por el
usuario.
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
![Page 9: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/9.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
SEGURIDAD Y LIMITACIONES
¿Podemos, mediante Javascript, vulnerar la seguridad de un sitio web?
¿Podemos atacar un servidor mediante Javascript?
![Page 10: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/10.jpg)
SEGURIDAD
L A U R A F O L G A D O G A L A C H E
Se ejecuta el código en un “espacio
seguro de ejecución”: la web.
Scripts restringidos por la política del “mismo origen”.
El motor de JavaScript es quien interpreta el código en el navegador: el
responsable.
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
![Page 11: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/11.jpg)
LIMITACIONES
L A U R A F O L G A D O G A L A C H E
No puede modificar o acceder a las
preferencias del navegador, ventana
principal, impresión…
No puede acceder al sistema de ficheros
del cliente.
No puede capturar datos de un servidor
para su retransmisión.
No puede enviar e-mails de forma
invisible.
No puede interactuar directamente con los
lenguajes del servidor.
No puede acceder a páginas almacenadas
en diferentes dominios.
No puede proteger el origen de las
imágenes de la página.
Implementar multiproceso o
multitarea.
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.4. CARÁCTERÍSTICAS DE JAVASCRIPT
![Page 12: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/12.jpg)
Editor de texto:• Edición de código en diferentes lenguajes.• Sintaxis de colores.• Verificación de la sintaxis.• Diferencia comentarios del resto de código.• Genera partes de código automáticas.• Utilidades adicionales.
Ejemplos de editores:§ Windows: Notepad++, Aptana Studio, Eclipse, Netbeans…§ MacOs: Sublime Text, Aptana Studio, Eclipse, Netbeans…§ Linux: KompoZer, Amaya, Quanta Plus, codetech…
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIÓN
![Page 13: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/13.jpg)
Navegador web:• No necesita Internet para probar los scripts de Javascript.• Inspector de elementos HTML.• Depurador.• Editor de estilos.• Otras funciones.
Ejemplos de navegadores:§ Mozilla Firefox, Google Chrome, Safari, Opera, Internet Explorer, etc.
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIÓN
![Page 14: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/14.jpg)
•¿Cómo podemos integrar un código Javascript en un HTML?
Etiquetas <script> en HTML
•¿Cómo podemos integrar un código Javascript en un XHTML?
Etiquetas <script> en XHTML
•¿Cómo podemos advertir al usuario de que su navegador no soporta Javascript?
Navegador no soportado
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.6. INTEGRACIÓN DE CÓDIGO JAVASCRIPT EN UNA PÁGINA WEB
![Page 15: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/15.jpg)
•<script type=“text/javascript”>Código javascript
</script>
Etiquetas <script> en HTML
•<script type=“text/javascript”><!--//--><![CDATA[//><!—
Código javascript//--><!]]>
</script>•O Encapsulando Javascript en CDATA<![CDATA[Código ]]>
Etiquetas <script> en XHTML
•<noscript>Su navegador no soporta Javascript </noscript>
Navegador no soportado
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.6. INTEGRACIÓN DE CÓDIGO JAVASCRIPT EN UNA PÁGINA WEB
![Page 16: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/16.jpg)
•¿Cómo podemos integrar Javascript si se encuentra en un fichero externo (.js)?
Fichero externo
•¿Qué ventajas tiene el uso de un fichero externo?
Ventajas de usar un fichero externo
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.6. INTEGRACIÓN DE CÓDIGO JAVASCRIPT EN UNA PÁGINA WEB
![Page 17: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/17.jpg)
•<script type=“text/javascript” src=“ruta/archivo.js”></script>•<script type=“text/javascript” src=“../js/archivo.js”></script>•<script type=“text/javascript”
src=“http://www.dominio.com/archivo.js”></script>
Fichero externo
•Carga más rápida de páginas.•Separación entre estructura y comportamiento.•Compartición de código entre páginas.•Facilidad para depuración de errores.•Modularidad.•Seguridad.
Ventajas de usar un fichero externo
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.6. INTEGRACIÓN DE CÓDIGO JAVASCRIPT EN UNA PÁGINA WEB
![Page 18: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/18.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.7. PROTECCIÓN DE CÓDIGO JAVASCRIPT
El código en Javascript no se puede proteger: está accesible y visible a través de un navegador.
¿Qué podemos hacer para protegerlo o demostrar que ha sido elaborado por nosotros?
![Page 19: 1. Arquitecturas y Herramientas de Programación](https://reader030.vdocuments.co/reader030/viewer/2022021506/5873e01b1a28abd72e8b5b89/html5/thumbnails/19.jpg)
L A U R A F O L G A D O G A L A C H E
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN1.7. PROTECCIÓN DE CÓDIGO JAVASCRIPT
El código en Javascript no se puede proteger: está accesible y visible a través de un navegador.
Incluir mensaje de Copyright
Ofuscar el código•www.javascriptobfuscator.com Promocionar el código