Upload
robertohqz
View
212
Download
0
Embed Size (px)
Citation preview
Ing. Roberto Henríquez
FUNDAMENTOS PARA EL DESARROLLO DE SISTEMAS CON PHP
Tecnologías del lado cliente
Ing. Roberto Henríquez
Contenido
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
Ing. Roberto Henríquez
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.
Css
Ing. Roberto Henríquez
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.
Ing. Roberto Henríquez
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.
Ing. Roberto Henríquez
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>
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Pá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>.
Ing. Roberto Henríquez
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>
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Enlaces de texto Un 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>
Ing. Roberto Henríquez
Tecnologías del lado del cliente Listas 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
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Listas
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Imágenes La 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.
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Tablas 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>.
Ing. Roberto Henríquez
Tecnologías del lado del cliente
CSS (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.
Ing. Roberto Henríquez
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>
Ing. Roberto Henríquez
Tecnologías del lado del cliente
CSS (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.
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Agregando estilos css en un archivo externo <link rel="stylesheet" type="text/css" href="css/estilos.css" />
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Javascript
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.
Ing. Roberto Henríquez
Tecnologías del lado del cliente Javascript
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>).
Ing. Roberto Henríquez
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>
Ing. Roberto Henríquez
Tecnologías del lado del cliente
Incluir 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>
Ing. Roberto Henríquez
Tecnologías del lado del servidor
Los 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.
Ing. Roberto Henríquez
Tecnologías del lado del servidor
Lo primero que debe saber es que todo programa escrito en PHP debe empezar por unas etiquetas determinadas. <?php ?>