FDP 02 Tecnologías Del Lado Cliente

Ing. Roberto Henríquez

FUNDAMENTOS PARA EL DESARROLLO DE SISTEMAS CON PHP

Tecnologías del lado cliente


Agenda Tecnologías del lado del cliente Lenguaje HTML

• Cabecera y cuerpo de una página Web• Párrafos y saltos de líneas • Enlaces de texto • Listas • Imágenes • Tablas• Introducción a CSS

Tecnologías del lado del servidor


Tecnologías del lado del cliente Son las que se ejecutan en el navegador del

usuario. La funcionalidad es soportada por el navegador. Como ejemplo podemos mencionar efectos o

controles de ventanas, diseños de las paginas, validaciones de formularios, entre otros.

El código para algunas funcionalidades puede incluirse en el archivo HTML generando rápida respuesta al usuario.

Html

CssJavascript


Tecnologías del lado del cliente Para construir paginas web creamos archivos

escritos en lenguaje de hipertexto de marca (Hyper Text Markup Languaje) o HTML.

El HTML en las paginas web, le dice al navegador todo lo que necesita saber para desplegar la página.


Tecnologías del lado del cliente Cabecera y cuerpo de una página HTML

Todo documento escrito en HTML está contenido entre las etiquetas <HTML> y </HTML>.

Cabecera: Entre las etiquetas <HEAD> y </HEAD>: Contiene información relativa al documento.• El título del documento debe ir entre las etiquetas

<TITLE> y </TITLE>.• Este título se mostrará en la parte superior del

navegador.


Tecnologías del lado del cliente Cuerpo: Entre las etiquetas <BODY> y </BODY>: Debe

contener la información que el usuario verá en el navegador.

<HTML><HEAD><TITLE>Página en HTML</TITLE></HEAD><BODY>

</BODY></HTML>


Tecnologías del lado del clientePárrafos y saltos de líneas Los textos pueden escribirse dentro de la etiqueta

<BODY> en el orden que quiera; los navegadores no interpretan los saltos de líneas o líneas en blanco, eliminando todos los espacios vacíos.

Para crear un salto de línea tiene que utilizar <BR> escrito después del texto.

Para crear párrafos tendrá que escribir el texto entre las etiquetas <P> </P>.


Tecnologías del lado del cliente<HTML><HEAD>

<TITLE>Página en HTML</TITLE></HEAD><B0DY>

<P>Esto es párrafo <br> y también un salto de

línea.</P>

</BODY></HTML>


Tecnologías del lado del cliente Enlaces de textoUn enlace es un mecanismo que permite dirigirse a una página determinada después de hacer clic en el texto.

Si entre las etiquetas <A> y </A> aparece algún contenido (texto o imagen), al hacer clic la página será dirigida a la nueva dirección.

El atributo HREF contiene la dirección del enlace.<A HREF="pagina2.htm">enlace</A>


Tecnologías del lado del clienteListas Las listas son capaces de presentar ordenadamente

una serie de conceptos. Los tipos de lista son: <UL>: Lista desordenada. <OL>: Lista ordenada.

La diferencia entre los tipos de lista radica en el carácter que aparece en la zona izquierda de cada línea de la lista. Las listas desordenadas tendrán un gráfico formal (una forma geométrica), las ordenadas tendrán un número de orden


Tecnologías del lado del cliente Listas

<ol> <li>Elemento 1</li> <li>Elemento 2</li></ol>


Tecnologías del lado del clienteImágenesLa etiqueta < IMG> utiliza el atributo SRC para insertar la imagen seleccionada en el documento.

<IMG SRC="fotol.jpg" ALIGN="center">

La alineación de la imagen con respecto a la pantalla se puede controlar con el atributo ALIGN.


Tecnologías del lado del clienteTablas

Para definir una tabla, se tiene que insertar todos los datos entre las etiquetas <TABLE, y </TABLE>.

A continuación, añada las filas y las columnas de nuestras tablas.

Para añadir una fila, tendrá que utilizar la etiqueta <TR> y para incluir una nueva columna la etiqueta <TD>.


Tecnologías del lado del clienteCSS (Cascading Style Sheet)

CSS es un lenguaje de hojas de estilos creado para controlar la presentación de los documentos HTML.

CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.


Tecnologías del lado del cliente<html><head><title>Ejemplo de estilos con CSS</title><style type="text/css">h1 { color: red; font-family: Arial; font-size: large; }p { color: gray; font-family: Verdana; font-size: medium; }</style></head><body><h1>Titular de la página</h1><p>Un párrafo de texto no muy largo.</p></body></html>


Tecnologías del lado del clienteCSS (Cascading Style Sheet)

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página.

Definiendo los estilos de esta forma, no importa el número de elementos <p> que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS.


Tecnologías del lado del clienteAgregando estilos css en un archivo externo

<link rel="stylesheet" type="text/css" href="css/estilos.css" />


Tecnologías del lado del clienteJavascript

Lenguaje de script del lado cliente que permite dar interactividad a la interfaz de la pagina web.

Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.


Tecnologías del lado del clienteJavascript

Incluir JavaScript en el mismo documento HTML.

El código JavaScript se encierra entre etiquetas <script> y se incluye en cualquier parte del documento.

Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiqueta <head>).


Tecnologías del lado del cliente Ejemplo

<html><title>Ejemplo de código JavaScript en el propio documento</title><script type="text/javascript"> alert("Un mensaje de prueba");</script></head> <body><p>Un párrafo de texto.</p></body></html>


Tecnologías del lado del clienteIncluir JavaScript en los elementos HTML

Este método consiste en incluir trozos de JavaScript dentro del código HTML de la página.

<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>


Tecnologías del lado del servidorLos lenguajes del lado del servidor son invisibles para los clientes. Las páginas que utilicen scripts de este tipo contienen el código entre etiquetas parecidas a las de HTML, pero éstas desaparecen cuando el cliente recibe la página.


Tecnologías del lado del servidorLo primero que debe saber es que todo programa escrito en PHP debe empezar por unas etiquetas determinadas.

<?php ?>

FDP 02 Tecnologías Del Lado Cliente

Documents

Transcript of FDP 02 Tecnologías Del Lado Cliente