1. introduccion al desarrollo web php parte 1
TRANSCRIPT
DESARROLLO WEB
Introducción
Universidad Tecnológica de Tecamachalco
Indice
1. Xampp (servidores Mysql y Apache)
2. htdocs
3. Ejecutar archivos PHP
4. Estructura de un proyecto web
5. Autentificación
6. Header y Body
7. Convenciones de los div
8. Formularios
9. Etiquetas y Campos de texto
10. Botones
1.- Instalar Xampp
• Verificar que este corriendo tanto Apache como Mysql
• Las paginas web se deben almacenan en la carpeta htdocs, (por que apache esta direccionado a esa carpeta)
1.- htdocs
• Para ejecutar los archivos php, se tiene que ejecutar un navegador e indicar URL con el recurso correcto.
3.- Ejecutar archivos PHP
4.- Estructura de un proyecto web
Codigo del archivo index.php , genera una interfaz para que el usuario se autentifique.
5.- Autentificación
<head> </head>
Cabecera de la pagina web, dentro de este elemento se importan archivos hojas de estilo y javaScript. css y js respectivamente
1.- Se utiliza para manejar la letra (ñ y los acentos dentro de una pagina)
2.- Se utiliza para importar a nuestra pagina las hojas de estilo
3.- Se utilia para importar a nuestra pagina los archivos JavaScript
1
2
3
6.- Header y Body
Cuerpo (body) dentro de este elemento se agrega el codigo html que da el diseño a la pagina web.
Las div son contenedores , que se utlizan para tener informacion, imagenes, tablas, formularios, campos de texto, botnes, menus, etc.
Su objetivo de los div, es ordenar el contenido de las paginas web, en posiciones establecidas respeto a la pagina y a la posicion de los div anteriores.
Las convenciones de los identificaciones (id) de los div se muestra en la figura de abajo.
7.- Convenciones de los div
• Para crear un div en html se utiliza la etiqueta (<div> </div>), la primera inicia y la segunda finaliza.
• Con la propiedad class se asigna un estilo al div (primero se debe crear el estilo), indicado en una hoja estilo (archivo css).
• En este caso se esta indicando el estillo “estilo_banner”
• Al hacer esto el div toma el diseño y la forma indicada en la clase estilo que se le esta especificando, indicado en el archivo CSS.
• NOTA: Se tiene que importar la hoja de estilo al proyecto.
El siguiente código crea la siguiente interfaz grafica de usuario (GUI)
1.- Las tablas se utilizan para ordenar elementos en una celda especifica.
Una tabla se compone de filas y columnas.
La etiqueta para crear una tabla son <table> </table>
La Etiqueta <tr> se utiliza para crear una fila de una tabla y dentro de esa etiqueta se indica el número de columnas con las etiquetas <td> </td>, dependiento el numero de etiquetas <td> </td> seran el número de columnas.
7.1 - Tablas
<form>
</form>
se utiliza para crear un formulario en HTML, este se utiliza para manejar acciones dentro de una pagina web (eventos), en el ejemplo de arriba la accion que tiene es mandar a traer al archivo login.php se vinculan los archivo
Quien origina el evento es el Botón, en el momento en que el usuario de clic en el botón la acción se envía al formulario y el formulario manda a traer una pagina web. (la que se indique en la acción)
8.- Formularios
9 – Etiquetas y Campos de texto
Dentro de las celdas de las tablas podemos acomodar etiquetas, campos de texto y botones.
Una etique se crea con la etiqueta <label> texto </label> y se utiliza para mostrar un texto en la pagina web.
Un campo de texto se crea con la etiqueta (ver imagen 2), y se utiliza para que un usuario pueda introducir información.
Podemos manejar campos de texto donde no se muestre la información que anote el usuario con el objetivo de que sea confidencial.
1
2
3
10 – Botones
Podemos crear un botón de dos formas:
La primera es enfocado a botones para formularios, esto quiere decir que el boton maneja accion y la envia al formulario y el formulario tiene una accion que puede ser mandar a traer a una pagina ver imagen 1.
La segunda forma es crear un botón el cual cual maneje un evento (onClick) que ejecute a un metodo, y por medio del metodo podemos mandar a traer un pagina o cargar un control Dialog(), que mas a delante se vera.
La etiqueta <br/> se utiliza para dar un salto de linea.
1
2
3
Hoja de estilo
Propiedas indicadaspara la clase de la hoja de estilose pueden utilizar mucho maspara eso se podria consultar en internet sus demas atributos
Propiedas indicadaspara la clase de la hoja de estilose pueden utilizar mucho maspara eso se podria consultar en internet sus demas atributos