1.

ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN

1.1. DISEO Y DESARROLLO WEB

DISEO WEB DESARROLLO WEB

Creacin y organizacin Nuevas tecnologas.

de contenido: la Diseo grfico.
arquitectura de la Programacin.
informacin. Diseo de interfaces.
Aspectos importantes: Usabilidad.
Organizacin.
Recursos.
Funcionalidad.
Accesibilidad.
Publicidad.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.2. SITIOS WEB

LADO DEL SERVIDOR LADO DEL CLIENTE

Contiene el hardware y el Se refiere a los

software del servidor web, navegadores web.
elementos de HTML y CSS.
programacin y Lenguajes de scripting
tecnologas: como Javascript (jQuery).
Scripts y programas CGI. Plugins y API del
Programas API del servidor. navegador.
Mdulos de Apache. Controles ActiveX.
Servlets de Java. Applets de Java.
Lenguajes scripting como
PHP o ASP.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.3. TECNOLOGAS DE PROGRAMACIN EN EL CLIENTE

Presentacin
Estructura: HTML (diseo): CSS

Ajax: integra la
Comportamiento programacin
(interactividad): cliente y servidor
Javascript con un proceso
asncrono.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

FUNCIONALIDADES

Qu funcionalidades tiene Javascript? Es decir, qu

podemos y qu no podemos hacer con l?

Busca en Internet 5 funcionalidades.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

Lenguaje
interpretado en el No puede escribir Reacciona a la
navegador: puede ficheros en el interaccin del
servidor. usuario.

FUNCIONALIDADES
estar deshabilitado.

Controla mltiples Modifica estilos y

ventanas, marcos, Pre-procesa datos contenido de
plugins, applets en el cliente. navegadores.

Puede solicitar
ficheros al servidor.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

COMPATIBILIDADES

Es compatible Javascript en todos los dispositivos?

Es soportado por todos los navegadores?
Se puede habilitar y deshabilitar?

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

Prcticamente todos
Hay algunas
los navegadores lo

COMPATIBILIDADES
incompatibilidades
soportan: debemos
entre navegadores.
asegurarnos.

Puede desactivarse
Algunos dispositivos
la ejecucin de
mviles no pueden
cdigo por el
ejecutar Javascript.
usuario.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

SEGURIDAD Y LIMITACIONES

Podemos, mediante Javascript, vulnerar la seguridad de

un sitio web?
Podemos atacar un servidor mediante Javascript?

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

Se ejecuta el cdigo
Scripts restringidos
en un espacio
por la poltica del
seguro de

SEGURIDAD
mismo origen.
ejecucin: la web.

El motor de
JavaScript es quien
interpreta el cdigo
en el navegador: el
responsable.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.4. CARCTERSTICAS DE JAVASCRIPT

No puede modificar o
acceder a las No puede capturar
No puede acceder al datos de un servidor
preferencias del sistema de ficheros
navegador, ventana para su
del cliente. retransmisin.
principal, impresin

LIMITACIONES
No puede interactuar No puede acceder a
No puede enviar e- directamente con los pginas almacenadas
mails de forma lenguajes del en diferentes
invisible. servidor. dominios.

No puede proteger el
origen de las Implementar
imgenes de la multiproceso o
pgina. multitarea.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIN

Editor de texto:
Edicin de cdigo en diferentes lenguajes.
Sintaxis de colores.
Verificacin de la sintaxis.
Diferencia comentarios del resto de cdigo.
Genera partes de cdigo automticas.
Utilidades adicionales.

Ejemplos de editores:
Windows: Notepad++, Aptana Studio, Eclipse, Netbeans
MacOs: Sublime Text, Aptana Studio, Eclipse, Netbeans
Linux: KompoZer, Amaya, Quanta Plus, codetech

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.5. HERRAMIENTAS Y UTILIDADES DE PROGRAMACIN

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.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.6. INTEGRACIN DE CDIGO JAVASCRIPT EN UNA PGINA WEB

Etiquetas <script> en HTML

Cmo podemos integrar un cdigo Javascript en un HTML?

Etiquetas <script> en XHTML

Cmo podemos integrar un cdigo Javascript en un XHTML?

Navegador no soportado

Cmo podemos advertir al usuario de que su navegador no

soporta Javascript?

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.6. INTEGRACIN DE CDIGO JAVASCRIPT EN UNA PGINA WEB

Etiquetas <script> en HTML

<script type=text/javascript>
Cdigo javascript
</script>

Etiquetas <script> en XHTML

<script type=text/javascript>
<!--//--><![CDATA[//><!
Cdigo javascript
//--><!]]>
</script>
O Encapsulando Javascript en CDATA
<![CDATA[
Cdigo
]]>

Navegador no soportado

<noscript>Su navegador no soporta Javascript </noscript>

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.6. INTEGRACIN DE CDIGO JAVASCRIPT EN UNA PGINA WEB

Fichero externo

Cmo podemos integrar Javascript si se

encuentra en un fichero externo (.js)?

Ventajas de usar un fichero externo

Qu ventajas tiene el uso de un fichero

externo?

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.6. INTEGRACIN DE CDIGO JAVASCRIPT EN UNA PGINA WEB

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>

Ventajas de usar un fichero externo

Carga ms rpida de pginas.

Separacin entre estructura y comportamiento.
Comparticin de cdigo entre pginas.
Facilidad para depuracin de errores.
Modularidad.
Seguridad.

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.7. PROTECCIN DE CDIGO JAVASCRIPT

El cdigo en Javascript no se puede proteger: est

accesible y visible a travs de un navegador.

Qu podemos hacer para protegerlo o demostrar que

ha sido elaborado por nosotros?

LA U R A F OLGA DO GA LA CHE
1. ARQUITECTURAS Y HERRAMIENTAS DE PROGRAMACIN
1.7. PROTECCIN DE CDIGO JAVASCRIPT

El cdigo en Javascript no se puede proteger: est accesible y visible a travs de un

navegador.

Ofuscar el cdigo
Incluir mensaje de www.javascriptobfuscator.com
Copyright Promocionar el cdigo

LA U R A F OLGA DO GA LA CHE