Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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. Autenti...
1.- Instalar Xampp
• Verificar que este corriendo tanto Apache como Mysql
1.- htdocs

• Las paginas web se deben almacenan en la carpeta htdocs, (por

que apache esta direccionado a esa carpeta)
3.- Ejecutar archivos PHP

• Para ejecutar los archivos php, se tiene que ejecutar un navegador e

indicar URL con el recu...
4.- Estructura de un proyecto web
Codigo del archivo index.php , genera una interfaz para que el
usuario se autentifique.

5.- Autentificación
6.- Header y Body

1
2
3

<head>
</head>
Cabecera de la pagina web, dentro de este elemento se importan archivos
hojas de ...
Cuerpo (body) dentro de este elemento se agrega el codigo html que da el
diseño a la pagina web.
7.- Convenciones de los div

Las div son contenedores , que se utlizan para tener
informacion, imagenes, tablas, formulari...
• Para crear un div en html se utiliza la etiqueta (<div> </div>), la primera

inicia y la segunda finaliza.

• Con la pro...
El siguiente código crea la siguiente interfaz
grafica de usuario (GUI)
7.1 - Tablas

1.- Las tablas se utilizan para
ordenar elementos en una celda
especifica.
Una tabla se compone de filas y
c...
8.- Formularios

<form>
</form>
se utiliza para crear un formulario en HTML, este se utiliza para manejar acciones dentro
...
9 – Etiquetas y Campos de texto

1

2

3

Dentro de las celdas de las tablas podemos acomodar etiquetas, campos de texto y...
10 – Botones
1

2

3

Podemos crear un botón de dos formas:
La primera es enfocado a botones para formularios, esto quiere...
Hoja de estilo

Propiedas indicadas
para la clase de la hoja de estilo
se pueden utilizar mucho mas
para eso se podria con...
Propiedas indicadas
para la clase de la hoja de estilo
se pueden utilizar mucho mas
para eso se podria consultar en
intern...
1.  introduccion al desarrollo web php parte 1
1.  introduccion al desarrollo web php parte 1
Upcoming SlideShare
Loading in …5
×

1. introduccion al desarrollo web php parte 1

626 views

Published on

  • Be the first to comment

  • Be the first to like this

1. introduccion al desarrollo web php parte 1

  1. 1. DESARROLLO WEB Introducción Universidad Tecnológica de Tecamachalco
  2. 2. 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
  3. 3. 1.- Instalar Xampp • Verificar que este corriendo tanto Apache como Mysql
  4. 4. 1.- htdocs • Las paginas web se deben almacenan en la carpeta htdocs, (por que apache esta direccionado a esa carpeta)
  5. 5. 3.- Ejecutar archivos PHP • Para ejecutar los archivos php, se tiene que ejecutar un navegador e indicar URL con el recurso correcto.
  6. 6. 4.- Estructura de un proyecto web
  7. 7. Codigo del archivo index.php , genera una interfaz para que el usuario se autentifique. 5.- Autentificación
  8. 8. 6.- Header y Body 1 2 3 <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
  9. 9. Cuerpo (body) dentro de este elemento se agrega el codigo html que da el diseño a la pagina web.
  10. 10. 7.- Convenciones de los div 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.
  11. 11. • 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.
  12. 12. El siguiente código crea la siguiente interfaz grafica de usuario (GUI)
  13. 13. 7.1 - Tablas 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.
  14. 14. 8.- Formularios <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)
  15. 15. 9 – Etiquetas y Campos de texto 1 2 3 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.
  16. 16. 10 – Botones 1 2 3 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.
  17. 17. Hoja de estilo Propiedas indicadas para la clase de la hoja de estilo se pueden utilizar mucho mas para eso se podria consultar en internet sus demas atributos
  18. 18. Propiedas indicadas para la clase de la hoja de estilo se pueden utilizar mucho mas para eso se podria consultar en internet sus demas atributos

×