Resumen PDF de ejercicios Dentro de los recursos están videos y archivos HTML, JavaScript y PHP comentados

Transcripción

1 Resumen PDF de ejercicios Dentro de los recursos están videos y archivos HTML, JavaScript y PHP comentados Actividad 2.1: Crear un sitio para trabajar en local y probar en local nuestra web Se denomina sitio a un conjunto de páginas relacionadas que suelen formar un dominio en internet. Podemos optar trabajar de forma local, nuestro PC hará las funciones de servidor (XAMPP) y las funciones de cliente (navegador). 1. Crear una carpeta dentro de c:\xampp\htdocs por ejemplo c:\xampp\htdocs\iaw 2. Definir los parámetros del sitio en el IDE a. Si usamos Kompozer (menú Editar Configuración de la publicación) Inconveniente, no admite HTML5 b. Si usamos Dreamweaver, menú sitio, nuevo sitio: 1

2 Inconveniente, es software propietario, hay una versión de prueba de 1 mes 3. Crear la página inicial, normalmente, llamada index.html 4. Probar que todo está correcto a. Si usamos Kompozer basta con pulsar el botón Navegar, si no hemos guardado los cambios nos pedirá que los guardemos (pulsamos Publicar ). b. Si usamos Dreamweaverpulsamos sobre el icono de vista previa El resultado debe ser una pantalla con acceso a nuestro servidor 2

3 Actividad 2.2: Crear un sitio para trabajar en local y probar en alojamiento remoto nuestra web Lo primero que vamos a hacer es darnos de alta en un alojamiento gratuito, por ejemplo, recibiremos un para activar la cuenta y, ya podremos seleccionar un plan gratuito Creamos un subdominio, en este caso asiriaw.hol.es. Recibiremos un con todos los parámetros para la conexión. Si entramos en el cpanel (aplicación típica para administrar nuestros alojamientos web) nos encontraremos con diferentes iconos (creación de cuentas de correo, base de datos, etc). Para esta actividad entraremos en administrador de archivos, la primera carpeta que nos aparecerá con dos ficheros (.htaccess para configurar los accesos y default.php). Vamos a subir el fichero index.html que hicimos y vamos a probar que nuestro subdominio está activo, si todo ha ido bien nos encontraremos con nuestra página inicial en internet: Ahora vamos a configurar nuestro sitio de Dreamweaver y le vamos a añadir otro servidor, este será el servidor remoto. Utilizamos los parámetros ftp recibidos en el correo, tened en cuenta que la carpeta donde se alojan nuestras páginas es public_html 3

4 Desde Dreamweaver conectamos en el panel de archivos (F8) y nos mostrará nuestros archivos locales y los archivos remotos, desde aquí podremos sincronizar nuestros archivos locales y remotos. A partir de aquí podemos editar los ficheros en local, subirlos a través del panel de archivos y probar visitando nuestro dominio en internet. También podemos activar en la configuración del sitio nuestro servidor remoto como servidor de pruebas, entonces Dreamweaver pulsado F12 nos sube el fichero y lanza el navegador visitando la web. Actividad 2.3: Trabajar en remoto y probar en remoto Sin duda para trabajar en grupo esta es la mejor opción, creamos el sitio y lo compartimos para que lo puedan editar desde el grupo. Lo que vimos en los ejercicios de la unidad anterior cuando vimos cómo crear una página con el IDE en la nube. Actividad 2.4: Crear un sitio estático con varias páginas relacionadas con esta asignatura Con un sitio estático nos referimos a páginas basadas únicamente en HTML5 y CSS3, vamos a realizar varias páginas estáticas, el objetivo principal es aprender a organizar nuestro alojamiento. Si nuestro sitio consta de 1 o 2 páginas no hay que organizar demasiado, es fácil controlar todo, pero cuando empieza a aumentar el número de páginas es imprescindible tener una organización. Lo normal es crear una estructura de carpetas para organizar las páginas, por ejemplo, una carpeta para las imágenes, otra para los contenidos o una carpeta por tema a tratar, etc. También, es habitual, crear una hoja de estilos común a todas las páginas de nuestro sitio de forma que todas nuestras páginas tengan un estilo propio y similar. Para realizar nuestras páginas la solución más cómoda es hacerlas con un editor que nos genere automáticamente el código HTML. 4

5 En este caso crearemos una estructura con 5 carpetas para organizar por contenidos: html5css3, javascript, php, jquery y teoria (ojo sin acento, en los alojamientos donde publiquemos las páginas podemos tener problemas con los caracteres especiales). Seguir el diseño en los videos de la unidad Creamos un archivo index.html, dividido en tres partes header, main y footer <!doctype html> <html> <head> <meta charset="utf-8"> <title>páginainicial</title> <link href="estilos.css" rel="stylesheet" type="text/css"> </head> <body> <header> <h1>implantación de Aplicaciones Web</h1> </header> <main> <section> <p>en la.</p> </section> <section id="enlaces"> <ul> <li><a href="html5css3/ejercicios.html" style="">ejercicios de HTML5</a></li> <li><a href="javascript/ejercicios.html">ejercicios de Javascript</a></li> <li><a href="php/ejercicios.html">ejercicios de PHP</a></li> <li><a href="jquery/ejercicios.html">ejercicios de Jquery</a></li> </ul> </section> </main> <footer> <p style="">. Zafra.</p> </footer> </body> </html> El archivo de estilos.css lo compartiremos entre las diferentes páginas. Actividad 2.5: Crear las siguientes páginas estáticas: a) Etiquetas en línea versus etiquetas en bloque b) Tablas, Combinación de celdas. Etiquetas thead, tfoot y tbody. Etiqueta colgroup c) Imágenes d) Etiquetas div y span e) Ejercicio anterior usando las etiquetas que ofrece HTML5 f) Nuevas posibilidades de controles en formularios g) Transformaciones y transiciones Las páginas están como recurso en la unidad, vamos a comentar las cuestiones principales de cada una de ellas: a) En una página HTML hay elementos que se comportan en línea y elementos que se comportan en bloque, básicamente la diferencia es que los que trabajan en bloque provocan un salto de línea, por ejemplo, h1 p div formtable provocan un saldo de línea al abrir la etiqueta y otro al cerrarla; strong u a input no lo provocan. b) Para el diseño de tabla se han incorporado una serie de etiquetas que dan más posibilidades thead, tfoot y tbody permiten crear tres zonas horizontales en la tabla. 5

6 Colgroup permite crear zonas verticales. La principal utilidad, además de dar significado, es decorar por zonas la tabla en vez de celda a celda. c) Cuidad con cambiar los anchos y altos de las imágenes las podemos deformar, cuidado también con subir una imagen con mucha calidad para después quedar en unos pocos pixeles de ancho x alto. d) Están son las etiquetas que se usaban antes de HTML5 para crear zonas en la páginas, el truco era dar id significativas a las capas, por ejemplo, <div id= cabecera ><div id= principal >. e) Pues HTML5 ofrece una solución más elegante las etiquetas header, footer, f) Se han incorporado diferente tipo de captura de datos como fechas, rangos, etc. OJO, hay navegadores no los soportan aún. g) Sin necesidad de lenguaje script podemos mediante estás dos técnicas dar cierto dinamismo a nuestras páginas. Actividad 2.6: Crear las siguientes páginas dinámicas con scripts de cliente: a) Mensaje de "Hola" b) Cambiar color de fondo de página c) Al hacer clic en un botón cambia el título de página d) Selector de color de fondo e) Al pasar sobre el tercer párrafo cambia imagen f) Copiar un texto en un párrafo a la vez que tecleamos g) Suma de elementos h) Cambio de color condicional i) Qué día es hoy? j) Repetir un nombre 10 veces k) Rellenar todas las celdas de azul l) AJAX (Utilizar script de clientes combinados con script de servidor) Las páginas están como recurso en la unidad, vamos a comentar las cuestiones principales de cada una de ellas: a) Con la etiqueta <script language="javascript"> se incrusta en código JavaScript en medio del código HTML b) Normalmente, el código va asociado a un evento que provoca el usuario, esto hace interactiva la página. c) Para organizar el código es habitual diseñar funciones (pequeños paquetes de código). d) Trata el uso del evento Change y barra de selección e) Trata el uso del evento MouseOver f) Trata el uso del evento KeyPress g) Ejemplo de cómo trabajar con diferentes tipos de datos h) Ejemplo de la estructura if i) Ejemplo de la estructura switch y alert() j) Bucle for k) Colecciones l) Pequeño ejemplo de AJAX, esta técnica es muy usada en la interacción. Actividad 2.7: Crear las siguientes páginas dinámicas con scripts de servidor: a) Mensaje de "Hola" b) Formas de alternar php y HTML c) Uso de variables en PHP d) Envío de un dato por método POST e) Uso de variables en PHP f) Tabla de multiplicar de un número g) Envio de un dato por método GET h) Envio de un dato por método GET i) Envio de dos datos por método GET j) Creador de páginas (diferentes controles de formulario) k) MiniCalculadora l) CalculadoraMensaje de "Hola" 6

7 m) Cambiar color de fondo de página n) Al hacer clic en un botón cambia el título de página Las páginas están como recurso en la unidad, vamos a comentar las cuestiones principales de cada una de ellas: a) El ejemplo más simple, escribir un texto. b) Diferentes formas de incrustar el código PHP dentro HTML c) Variables en PHP d) Formulario enviado por POST e) Uso de variables f) Bucles en PHP g) Formulario enviado por GET h) Envío de dato desde un hipervínculo i) Envío de datos desde un hipervínculo j) Más captura y envíos de datos k) Misma calculadora hecha en JavaScript pero ahora en PHP l) Ejercicio bastante completo de PHP 7