INTRODUCCION AL LA PROGRAMACION WEB.ppt

INTRODUCCIÓN A LA PROGRAMACIÓN WEB
PÁGINA WEB
Dispuestos en pantalla según ciertas características
Archivo compuesto por diversos elementos:
TEXTO ENLACES MULTIMEDIA
Interactividad y efectos ( menús, movimiento de objetos,
fecha y hora, imágenes, mensajes, etc.)
Validaciones, acceso a bases de datos (ABM, consultas),
manejo de claves, cookies.

PÁGINA WEB
ESTÁTICA
Su código está escrito en el lenguaje
HTML (Hyper Text Mark up Language)
Indica dónde colocar cada elemento en
la página, y con qué características
A través de etiquetas (TAGS)
Se presenta sin movimiento y sin
funcionalidades más allá de los enlaces
Se le puede agregar
Hojas de Estilo (CSS),
que amplían los estilos
de los elementos
(colores, fuentes, links, etc)
<A HREF=“pagina2.htm”> Página 2 </A>
<A HREF=“pagina2.htm”
style=“color:red”> Página 2</A>

PÁGINA WEB
DINÁMICA
Además de HTML, se necesitan
lenguajes de programación web.
Existen dos tipos:
Posee efectos especiales e interactividad.
Páginas que se procesan
en el navegador del cliente
Páginas que se procesan
en el servidor

PÁGINA WEB
DINÁMICA
Rollovers, control de ventanas y formularios, cálculos,
fecha y hora, efectos de imagen y de texto.
Los Scripts se pueden programar en:
Páginas que se procesan en el navegador del cliente
Se logran con código insertado en el HTML,
llamado Script (Guión)
JavaScript Visual Basic Script

PÁGINA WEB
DINÁMICA
NO ES JAVA
Permite la programación de pequeños scripts
y de programas orientados a objetos, con funciones,
estructuras de datos complejas, etc
JavaScript
Su sintaxis deriva
del lenguaje C
SUN
MICROSYSTEMS
Funciona en cualquier navegador,
por eso pasó a ser el Estándar.

PÁGINA WEB
DINÁMICA
Compatible solamente con Internet Explorer.
Por eso no es el Estándar.
Su sintaxis deriva del Visual Basic.
Visual Basic Script
MICROSOFT
CORP.
Es más amigable que Javascript.

PÁGINA WEB
DINÁMICA
Se ejecutan en el servidor web, y se envía el
resultado en HTML al cliente por Internet.
Distintas tecnologías:
Con esto, se accede a bases de datos y claves
en forma segura.
PHP
ASP
Páginas que se procesan en el servidor
JSP
CGI
Agendas, Foros,
Estadísticas, Juegos,
Chat, etc.

PÁGINA WEB
DINÁMICA
Es la tecnología más antigua.
Common Gateway Interface
CGI
Difícil de programar.
En la ejecución se torna pesado.
Lenguajes usados: Perl, también C,
C++ y Visual Basic.
Se encuentra en desuso

PÁGINA WEB
DINÁMICA
Es la tecnología de Microsoft
Active Server Pages
ASP
Funciona en servidores web
de Microsoft
Lenguajes usados:
VBScript y Jscript
(Javascript de Microsoft).
Personal Web
Server (Win 98)
Internet Information
Server (WinXP)
Bajo Linux: se debe instalar el componente Chilisoft

PÁGINA WEB
DINÁMICA
Gratuito, multiplataforma,
rápido y seguro.
Hypertext PreProcesor
PHP
Está montado sobre sevidores
Linux o Unix Posee un lenguaje
propio derivado del C
Servidor web: Apache

PÁGINA WEB
DINÁMICA
Multiplataforma
Java Server Pages
JSP
Código Abierto Utiliza scripts de servidor
en lenguaje Java (Servlets)
Servidores web: Apache, IIS, Netscape
Se pueden crear
componentes reusables

Estructura de una página web
Página Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores
• Tipografías
• Alineación
• Efectos
• Validaciones
• Automatización
• Párrafos
• Encabezados
• Listas
•Tablas
• Capas
• Etc.
• Textos
• Imágenes
• Enlaces
• Fondos
• Tamaños
• Etc.

Los diferentes Lenguajes de
programación para la web
• Actualmente existen diferentes lenguajes de
programación para desarrollar en la web,
estos han ido surgiendo debido a las
tendencias y necesidades de las plataformas.

Lenguaje HTML
• Desde el surgimiento de internet se han publicado
sitios web gracias al lenguaje HTML. Es un
lenguaje estático para el desarrollo de sitios web
(acrónimo en inglés de HyperText Markup
Language, en español Lenguaje de Marcas
Hipertextuales).
• El estándar lo define el W3C (World Wide Web
Constortium).
• Interpretado.
• Extensiones de archivos .html ó .htm.

Sintaxis
• <html> (Inicio del documento HTML)
• <head>
• ( Cabecera )
• </head>
• <body>
• ( Cuerpo )
• </body>
• </html>
• <b> </b> Negrita
• <p> </p> Definir parrafo
• <etiqueta> Apertura de la etiqueta
• </etiqueta> Cierre de la etiqueta

Ventajas
• Sencillo que permite describir hipertexto.
• Texto presentado de forma estructurada y agradable.
• No necesita de grandes conocimientos cuando se
cuenta con un editor de páginas web o WYSIWYG.
• Archivos pequeños.
• Despliegue rápido.
• Lenguaje de fácil aprendizaje.
• Lo admiten todos los exploradores.

Desventajas
• Lenguaje estático.
• La interpretación de cada navegador puede
ser diferente.
• Guarda muchas etiquetas que pueden
convertirse en “basura” y dificultan la
corrección.
• El diseño es más lento.
• Las etiquetas son muy limitadas.

Lenguaje Javascript
• Este es un lenguaje interpretado, no requiere
compilación. Fue creado por Brendan Eich
en la empresa Netscape Communications.
Utilizado principalmente en páginas web.

Sintaxis
• <script type="text/javascript"> ... </script>

Ventajas
• Lenguaje de scripting seguro y fiable.
• Los script tienen capacidades limitadas, por
razones de seguridad.
• El código Javascript se ejecuta en el cliente.

Desventajas
• Código visible por cualquier usuario.
• El código debe descargarse completamente.
• Puede poner en riesgo la seguridad del sitio,
con el actual problema llamado XSS
(significa en inglés Cross Site Scripting
renombrado a XSS por su similitud con las
hojas de estilo CSS).

Lenguaje PHP
• Es un lenguaje de programación utilizado para la
creación de sitio web
• Usado principalmente para sitio dinámicos.
• Del lado del servidor.
• Embebido en HTML.
• Necesita de servidor Web.Extensiones de archivo
.php.
• Lenguaje libre.
• Multiplataforma.
• Desctaca su conectividad con MySQL.

Sintaxis
• La sintaxis utilizada para incorporar código PHP es la siguiente:
• <?
• $mensaje = “Hola”;
• echo $mensaje;
• ?>
• También puede usarse:
• <?php
• $mensaje = “Hola”;
• echo $mensaje;
• ?>

Ventajas
• Muy fácil de aprender.
• Se caracteriza por ser un lenguaje muy rápido.
• Soporta en cierta medida la orientación a objeto. Clases y herencia.
• Es un lenguaje multiplataforma: Linux, Windows, entre otros.
• Capacidad de conexión con la mayoría de los manejadores de base de
datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras.
• Capacidad de expandir su potencial utilizando módulos.
• Posee documentación en su página oficial la cual incluye descripción y
ejemplos de cada una de sus funciones.
• Es libre, por lo que se presenta como una alternativa de fácil acceso
para todos.
• Incluye gran cantidad de funciones.
• No requiere definición de tipos de variables ni manejo detallado del
bajo nivel.

Desventajas
• Se necesita instalar un servidor web.
• Todo el trabajo lo realiza el servidor y no delega al
cliente. Por tanto puede ser más ineficiente a medida
que las solicitudes aumenten de número.
• La legibilidad del código puede verse afectada al
mezclar sentencias HTML y PHP.
• La programación orientada a objetos es aún muy
deficiente para aplicaciones grandes.
• Dificulta la modularización.
• Dificulta la organización por capas de la aplicación.

Lenguaje ASP
• Es una tecnología del lado de servidor
desarrollada por Microsoft para el
desarrollo de sitio web dinámicos

Ventajas
• Usa Visual Basic Script, siendo fácil para
los usuarios.
• Comunicación óptima con SQL Server.
• Soporta el lenguaje JScript (Javascript de
Microsoft).

Desventajas
• Código desorganizado.
• Se necesita escribir mucho código para
realizar funciones sencillas.
• Tecnología propietaria.
• Hospedaje de sitios web costosos.

Lenguaje ASP.NET
• Este es un lenguaje comercializado por
Microsoft, y usado por programadores para
desarrollar entre otras funciones, sitios web.
ASP.NET es el sucesor de la tecnología
ASP, fue lanzada al mercado mediante una
estrategia de mercado denominada .NET.

Sintaxis
• La extensión de nombre de archivo .aspx en lugar de
.htm, .html u otras extensiones. La extensión de nombre
de archivo .aspx hace que ASP.NET procese la página.
• Una directiva @ Page u otra directiva opcional, según
convenga para el tipo de página que se está creando.
• Un elemento form que está configurado correctamente
para ASP.NET. El elemento form sólo es necesario si la
página contiene controles cuyos valores se deben utilizar
durante el procesamiento de páginas.
• Controles de servidor Web.
• Código del servidor si agrega su propio código a la
página.

Ventajas
• Completamente orientado a objetos.
• Controles de usuario y personalizados.
• División entre la capa de aplicación o diseño y el
código.
• Facilita el mantenimiento de grandes aplicaciones.
• Incremento de velocidad de respuesta del servidor.
• Mayor velocidad.
• Mayor seguridad.

Desventajas
• Mayor consumo de recursos.

Lenguaje JSP
• Es un lenguaje para la creación de sitios
web dinámicos, acrónimo de Java Server
Pages.

Sintaxis
• <%= new java.util.Date() %>

Ventajas
• Ejecución rápida del servlets.
• Crear páginas del lado del servidor.
• Código bien estructurado.
• Integridad con los módulos de Java.
• La parte dinámica está escrita en Java.
• Permite la utilización se servlets.

Desventajas
• Complejidad de aprendizaje.

Lenguaje Python
• Es un lenguaje de programación creado en
el año 1990 por Guido van Rossum, es el
sucesor del lenguaje de programación ABC.
Python es comparado habitualmente con
Perl. Los usuarios lo consideran como un
lenguaje más limpio para programar.
Permite la creación de todo tipo de
programas incluyendo los sitios web.

Sintaxis
• Ejemplo de una clase en Phyton:
• def dibujar_muneco(opcion):
• if opcion == 1:
• C.create_line(580, 150, 580, 320,
width=4, fill="blue")
• C.create_oval(510, 150, 560, 200,
width=2, fill='PeachPuff')

Ventajas
• Libre y fuente abierta.
• Lenguaje de propósito general.
• Gran cantidad de funciones y librerías.
• Sencillo y rápido de programar.
• Licencia de código abierto (Opensource).
• Orientado a Objetos.
• Portable.

Desventajas
• Lentitud por ser un lenguaje interpretado.

Lenguaje Ruby
• Es un lenguaje interpretado de muy alto
nivel y orientado a objetos. Desarrollado en
el 1993 por el programador japonés
Yukihiro “Matz” Matsumoto. Su sintaxis
está inspirada en Phyton, Perl. Es
distribuido bajo licencia de software libre
(Opensource).

Ventajas
• Permite desarrollar soluciones a bajo Costo.
• Software libre.

HTML5
• ¿Qué es HTML5?
• Es un lenguaje de marcas utilizado para el desarrollo de páginas
web.
• Define la estructura y contenido que debe tener una web.
• No define el estilo visual que tendrá para eso se usará CSS.
• Ha sido establecido como estándar de diseño web por el W3C.
• Los navegadores deben saber interpretar este lenguaje de manera
correcta (no siempre IE)
• Sobre HTML se desarrollan tecnologías para facilitar a los usuarios el
diseño de una web.

HTML5
• Evolución:
• En 1997 nace HTML4 publicado por el W3C como estándar de diseño
web.
• En 1999 nace XHTML 1.0 que extiende HTML4
• En 2001 se publica la nueva versión de XHTML, la 1.1
• En 2002 se prepara un borrador para una nueva versión de XHTML
• En 2008 naceHTML5 como el sucesor de HTML4 y XHTML 1.1

HTML5
• ¿Por qué HTML5?
• HTML 4.0 era suficiente para cubrir todas las necesidades web
surgidas hasta el momento.
• La web evolucionó rápidamente insertando diferentes contenidos a
ofrecer en cada página.
• HTML 4.0 no cubre esas necesidades por lo que se crearon diversas
tecnologías que suplieran este vacío:
• Flash Player
• Silverlight
• Se tiende a un trabajo distribuido por lo que se exigen herramientas
tipo "escritorio" en versión web.

HTML5
• ¿Por qué HTML5?
• En este punto HTML4 se queda obsoleto.
• Instalar plugins de terceros genera graves agujeros de seguridad.
• Las nuevas funcionalidades requeridas no encajan con el esquema
inicial diseñado.
• Conclusión: hay que hacer evolucionar el estándar a las necesidades
actuales  HTML5
• Referencia: http://www.w3schools.com/html/default.asp

HTML5
• El concepto de elemento HTML
• Los elementos son los componentes fundamentales del HTML
• Cuentan con 2 propiedades básicas:
• Atributos
• Contenido
• En general se conforman con una Etiqueta de Apertura y otra Cierre.
• Los atributos se colocan dentro la etiqueta de apertura, y el contenido
se coloca entre la etiqueta de apertura y la de cierre.

HTML5
• El concepto de elemento HTML
Elemento
Etiqueta de Apertura Etiq. de Cierre
Contenido
<p class=“texto”>Curso HTML CEMA </p>
Nombre Valor
Atributo

HTML5
• Tipos de elementos HTML
• Estructurales:
• Describen el propósito del texto y no denotan ningún formato específico.
<h1>Curso HTML</h1>
• De Presentacion:
• Describen la apariencia del texto, independientemente de su función.
<b>Curso HTML</b>
• Los elementos de presentación se encuentran obsoletos desde la
aparición del CSS.
• De HiperTexto:
• Relaciona una parte del documento a otros documentos.
<a href=“http://www.cema.edu.ar”>Universidad del Cema</a>

HTML5
• Estructura base de un documento html.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación y
cargaremos componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>

HTML5
• Definir un documento HTML.
• El primer paso es crear un fichero html o xhtml.
• Una vez creado deberemos especificar el tipo de
documento, para ello la primera línea debe ser:
• <!DOCTYPE html> si es HTML
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> si es XHTML
• Una vez realizado esto podremos comenzar con el
contenido de nuestro fichero HTML
• HTML layout

HTML5
• La sección HEAD
• Contiene metainformación de la página
• Establecemos título y palabras clave para los buscadores
• Incluimos hojas de estilo (CSS) a utilizar en la página
• Podemos introducir código javascript a usar en nuestra
página.
• Referencia:
http://www.w3schools.com/html/html_head.asp

HTML5
• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos en la
sección HEAD.
• En este punto tenemos a nuestra disposición de todos
los tags disponibles para maquetar nuestra página.
• Referencia: Elementos HTML

CSS3
• El lenguaje HTML está limitado a la hora de aplicarle
forma a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de
dar forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo web.
• Para "maquetar" se utilizan elementos HTML en un
uso diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de CSS.

CSS3
• Principales características
• Permite definir el estilo de cada elemento HTML
de manera exacta.
• Permite escalar tamaños en función del tamaño
de la pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos
aplicados (LESS y SASS).
• Permite crear plantillas de estilos que pueden
importarse en otros HTML.

CSS3
• Los estilos CSS deben darse de alta en un fichero
acorde para ello, no obstante:
• Pueden declararse dentro de un HTML mediante
la etiqueta <style>
• Pueden aplicarse directamente sobre un
elemento concreto en la propiedad "style".
• Lo correcto es llevar los estilos a un o unos ficheros
css, pero se permite añadir pequeños retoques
directamente sobre el HTML.

CSS3
• Cómo se define un estilo en css:
Selector { propiedad: valor;
...}
Declaración
H1 {color:#CC9900;}
Ejemplo:

CSS3
• Un selector es un identificador para saber sobre qué elemento
HTML debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos HTML
estándar.
• Los estilos pueden sobreescribir a otro, el orden de
sobreescritura es el mismo en el que se cargan los ficheros
css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto, podemos
indicarlo con !important

CSS3
• Tipos de selectores:
• De elemento HTML:
• h1, table, div, span…
• De identificador
• Todos los elementos HTML cuya propiedad "id" tenga
un determinado valor, tendrán ese estilo.
• De clase
• Todos los elementos HTML cuya propiedad "class"
tenga un determinado valor tendrán ese estilo.

CSS3
• Normalmente se le aplica un estilo por defecto a los elementos
HTML para conformar una plantilla.
• La personalización definitiva se suele realizar haciendo uso de
la propiedad "class".
• No es recomendado usar el selector por id. Sólo se recomienda
cuando el componente, además de estilo realiza alguna
funcionalidad javascript.
• Cuando incluyamos plantillas en un fichero HTML hay que
estar seguros que no incorporan estilos CSS que
sobreescriban los nuestros.
• En caso de conflicto, debemos asegurar que nuestros estilos
quedan situados por encima de los otros (aunque no siempre
es posible)

CSS3
• CSS3 como mejora de CSS incorpora propiedades para una
mejor maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion

Javascript
• Inicialmente se llamaba LiveScript.
• Lenguaje de guiones (script).
• Con el respaldo de SUN en 1995 pasó a llamarse
JavaScript.
• Es un lenguaje interpretado.
• Se ejecuta en el cliente, nunca en el servidor.
• Parte de un conjunto limitado de objetos y clases
• No permite interacción cliente-servidor, únicamente
opera en el cliente (Conseguido con jQuery).

Javascript
• Diseñado para programas sencillos y pequeños.
• Muy utilizado para validación de datos.
• Utilizado junto con CSS para poner efectos en las
páginas de Web.
• Es independiente de la plataforma.
• Es bajamente tipado.
• Fácil de aprender, pero difícil de depurar.
• Gran parecido con Java pero mucho más limitado.

Javascript
• Javascript se integra en HTML de dos maneras:
• Como fichero *.js incluido en la misma sección
que los CSS.
• Como código directamente en el fichero HTML
haciendo uso de la etiqueta <script>
• Algunos navegadores no soportan scripts por lo que
tendremos que tenerlo en cuenta.
• Para tratar el problema haremos uso de la
etiqueta <noscript>

Javascript
• La declaración de variables se hace sin especificar el
tipo:
• var miVariable;
• Si intento hacer una operación no permitida sobre el
tipo que contiene la variable tendré un error.
• Para mostrar mensajes por pantalla haré uso de:
• alert("texto del mensaje")
• Los métodos se declaran con la etiqueta function:
• function hola(){ … }
• Para devolver un valor haremos uso de "return".

Javascript
• La llamada a los métodos Javascript se hará desde
elementos HTML.
• Los elementos HTML tienen asociados determinados
eventos cuando su estado cambie.
• En esos eventos podemos llamar a código Javascript.
• Haciendo uso de Jquery como extensión de
Javascript podremos realizar funcionalidad antes de
que un documento se cargue.

Javascript: jQuery
• Jquery es una librería Javascript que pretende facilitar
el uso del código Javascript a los programadores.
• Añade un conjunto nuevo de eventos a los ya
existentes HTML.
• Permite hacer llamdas AJAX, por lo que permite que,
el cliente, llame directamente al servidor.
• Incorpora librerías de componentes HTML con
funcionalidad enriquecida que podemos usar con
poco esfuerzo. jQuery
• Tutorial: jQuery tutorial

Javascript: jQuery
• Al igual que en CSS haremos uso de selectores para
recuperar un elemento concreto.
• La sintaxis es $(selector):
• $("p"): recuperaría todos los elementos HTML de
tipo <p>
• $(".test"): recuperaría todos los elementos HTML
cuyo atributo "class" fuera "test".
• $("#test"): recuperaría todos los elementos HTML
cuyo atributo "id" fuera "test".

Bootstrap
• Framework CSS que facilita a los desarrolladores la
maquetación de las páginas.
• Incluye un conjunto de clases CSS para maquetar de
manera fácil una página a cualquier resolución.
• Es mantenido y actualizado por Twitter.
• Está optimizado para dispositivos móviles.
• Permite un diseño “Responsive”
• Web de Boostrap

Bootstrap
• El problema
• A la hora de maquetar una web tenemos que
tener en cuenta infinitas resoluciones y tamaños
de pantalla.
• Nuestros diseños no se adaptan a todas las
resoluciones.
• Debemos hacer un gran esfuerzo para crear un
CSS que maquete bien.
• Tenemos que hacer diferentes versiones de la
web según el dispositivo en el que se verán.

Bootstrap
• Solución “Responsive Design”
• Diseña una sóla vez para todos tus dispositivos.
• El diseño se adaptará dinámicamente a la
resolución en la que se esté visualizando.
• Los diferentes elementos “saben” que
propiedades deben tener, según la resolución.
• Definimos la estructura que debe tener la web y
esta se adapta según el dispositivo que la
visualiza.

Bootstrap
• Boostrap incluye un conjunto de estilos para hacer
nuestra web responsive.
• Es un framework potente y complejo por lo que para
profundizar a fondo requiere conocimientos amplios
de CSS.
• No obstante no es necesaria una gran experiencia
para conseguir una maquetación de calidad que sea
“responsive”,

INTRODUCCION AL LA PROGRAMACION WEB.ppt

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a INTRODUCCION AL LA PROGRAMACION WEB.ppt

Similar a INTRODUCCION AL LA PROGRAMACION WEB.ppt (20)

Último

Último (20)

INTRODUCCION AL LA PROGRAMACION WEB.ppt