1. Arquitecturas y Herramientas de Programación

1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIÓN
1.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.
LA U R A F O LG A D O G A LA CH E

1.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 programasCGI.
§ ProgramasAPI 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.

1.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.

1.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.

FUNCIONALIDADES
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.

COMPATIBILIDADES
¿Es compatible Javascript en todos los dispositivos?
¿Es soportado por todos los navegadores?
¿Se puede habilitar y deshabilitar?

COMPATIBILIDADES
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.

SEGURIDAD Y LIMITACIONES
¿Podemos, mediante Javascript, vulnerar la seguridad de
un sitio web?
¿Podemos atacar un servidor mediante Javascript?

SEGURIDAD
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.

LIMITACIONES
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.

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…
1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIÓN

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.
1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIÓN

•¿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
1.6. INTEGRACIÓN DE CÓDIGO JAVASCRIPT EN UNA PÁGINA WEB

•<scripttype=“text/javascript”>
Código javascript
</script>
Etiquetas <script>en HTML
•<scripttype=“text/javascript”>
<![CDATA[//><!—
Código javascript
//--><!]]>
</script>
•O EncapsulandoJavascripten CDATA
<![CDATA[
Código
]]>
Etiquetas <script>en XHTML
•<noscript>Su navegador nosoporta Javascript</noscript>
Navegador no soportado

•¿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

•<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

1.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?

1.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

1. Arquitecturas y Herramientas de Programación

Más contenido relacionado

La actualidad más candente (20)

Similar a 1. Arquitecturas y Herramientas de Programación (20)

Más de Laura Folgado Galache (16)

Último (8)

1. Arquitecturas y Herramientas de Programación