desarrollo de aplicaciones web por araceli velazquez
TRANSCRIPT
![Page 1: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/1.jpg)
Por Araceli Velázquez Gutiérrez
![Page 2: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/2.jpg)
Sesión 1
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 3: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/3.jpg)
• Editor de programas sublime text
• https://www.sublimetext.com/3
• Servidor WAMP
• http://www.wampserver.com/en/
• Filezilla
• https://filezilla-project.org/
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 4: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/4.jpg)
• Verificar que Wampserver esté ejecutando todos los
servicios
Apuntes ARACELI VELAZQUEZ GUTIERREZ
Debe
aparecer en
color verde
![Page 5: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/5.jpg)
• Archivos de inicio de localhost
• El archivo index es el primero en ejecutarse
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Los archivos
de localhost
![Page 6: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/6.jpg)
• Opciones de apache, servicio
• Prueba de apagar servidor web
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 7: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/7.jpg)
• localhost = 127.0.0.1
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 8: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/8.jpg)
• Sublimetext
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Index.php
de wamp
![Page 9: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/9.jpg)
• Instalación de nuevos paquetes en sublimetext
• https://packagecontrol.io/installation
• Copiar el texto de la pagina en la consola de sublimetext
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Copiar este
texto para
ejecutarlo en
la consola
![Page 10: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/10.jpg)
• Ejecutar en la consola
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Copiar el
texto aquí y
ejecutar
![Page 11: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/11.jpg)
• CTRL +SHIFT +P
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 12: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/12.jpg)
• CTRL+SHIFT+ P
• Install
• EMMET
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 13: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/13.jpg)
• CTRL+SHIFT+ P
1. Install package
2. Color picker
1. Install package
2. CSSLint o CSSLinker
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 14: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/14.jpg)
• CTRL+SHIFT+ P
1. Install package
2. SublimeLinter
1. Install package
2. DocBlockr
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 15: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/15.jpg)
• CTRL+SHIFT+ P
1. Install package
2. PHPCompanion
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 16: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/16.jpg)
Copiar la carpeta Reinos
naturales a l www de
wampserver
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Reinos naturales
![Page 17: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/17.jpg)
• Abrir proyecto
• Guardar proyecto
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 18: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/18.jpg)
• Ligar el editor de codigo con la ruta
• Add folder to project
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 19: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/19.jpg)
• Crear archivo index
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 20: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/20.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
¿Cómo ha cambiado
la web?
Búsqueda
semántica
![Page 21: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/21.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 22: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/22.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
¿Cómo ha cambiado
la web?
Cambios principalmente en
el sentido semántico de las
secciones
Aside:
Agregados
![Page 23: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/23.jpg)
• Página web
• Sitio web
• Portal web
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Definiciones
correctas de
![Page 24: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/24.jpg)
• Creación del archivo index.html
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 25: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/25.jpg)
• Creación del archivo index.html
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Con EMMET escribe html:5
y click en tab para que
añada la sintaxis por default
![Page 26: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/26.jpg)
• Crear 10 etiquetas IMG
• img*10>
• TAB
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 27: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/27.jpg)
• Crear 10 etiquetas IMG dentro de una etiqueta div
• div>img*10>
• TAB
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Con EMMET se
crean las
instrucciones
Después de clickear
TAB
![Page 28: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/28.jpg)
• Problema al cargar pagina
• Localhost en diferente direccion, revisar wamp server
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Ver la
ubicación de
www
![Page 29: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/29.jpg)
• Versión 3 de CSS
• Reglas CSS
• Selector universal
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 30: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/30.jpg)
• Colores
• Nombre del color
• Hexadecimal
• RGB con 3 datos
• Rojo, verde, azul
• #F00 = Rojo
• #0F0 =Verde
• #00F = Azul
• RGB con 6 digitos
• #00 00 00 Dos digitos para cada color, incrementa el numero de
colores
• #F2A
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 31: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/31.jpg)
• Tamaño
• Pixeles
• Porcentajes
• Establecer tamaños
• Width:
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 32: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/32.jpg)
• Estableciendo hoja de estilo en archivo index.html
• <link rel"stylesheet" type="txt/css"
href="estilos_css/index_css.css"</link>
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 33: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/33.jpg)
• Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes: 1. el selector (en el ejemplo sería: “body”), el cual le dice al
navegador la parte del documento que se verá afectada por la regla;
2. la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
3. y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
• El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas:
• body { color: purple }
• body { background-color: #d8da3d } EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 34: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/34.jpg)
• Opciones para desarrolladores en google chrome
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 35: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/35.jpg)
• Capa para encabezado y capa para menú
• Usando EMMET
• <div>Prueba con hoja de estilo</div>
• <!--Iniciando la maquetación en html5-->
• <header>
• <div></div>
• <div></div>
• </header>
• </body>
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 36: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/36.jpg)
• img
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 37: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/37.jpg)
• Para aplicar elementos distintos a objetos con el mismo
nombre, entonces utilizar clases
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 38: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/38.jpg)
• Archivo html
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 39: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/39.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 40: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/40.jpg)
• .linkFrutas{
• background: url("../imagenes/index/frutas.png") no-
repeat; transition: 1s;
• }
• .linkFrutas:hover{
• background: url("../imagenes/index/frutas_over.png")
no-repeat; transition: 0.3s;
• }
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
El efecto de la transición
dura 0.3 segundos
:hover captura el evento
de pasar por encima con
el ratón
![Page 41: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/41.jpg)
• * { margin:0px; padding:0px; }
• div.bienvenidos{ background:green;
• width:100%; height:30px; }
• div.logotipo{width:30%;height:140px; display: inline-block; vertical-align:
top;}
• div.logotipo:hover{• background:#ECFF3B;
• margin-top: 15px;
• transition: 0.3s;
• }
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 42: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/42.jpg)
• div.menuIconos{• width:70%;
• height:140px;
• display: inline-block;
• vertical-align: top;
• margin-left: -4px; }
• div.barraintermedia{
• background:#333;width:100%;height:10px; }
• nav.menu2{width:100%;height:220px;
• background: url("../imagenes/index/fondo_nav_imagenes.png")
no-repeat;
• } EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 43: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/43.jpg)
• .navFrutas:hover, .navPlantas:hover, .navTierra:hover,
.navAnimales:hover, .navAgua:hover {
• transform: scale(1.1);
• }• .navFrutas, .navPlantas, .navTierra, .navAnimales, .navAgua {
• margin-right: 20px;
• width: 182px;
• height: 225px ;
• transition: 0.3s;
• }
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 44: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/44.jpg)
nav{ width:80%;
• height:120px;
• margin:auto; text-align:center;
• font-family: Georgia, "Times New Roman", Times, serif;
• margin-top: 10px;
• }
.linkFrutas, .linkPlantas, .linkTierra, .linkAnimales, .linkAgua {
• width:100px;
• height: 120px;
• display:inline-block;
• vertical-align: top;
• }EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 45: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/45.jpg)
.linkFrutas{background: url("../imagenes/index/frutas.png") no-repeat; transition:
1s; }
/*El evento hover es para cuando pasas el raton encima del
objeto */
.linkFrutas:hover{
• background: url("../imagenes/index/frutas_over.png") no-repeat; transition:
0.3s;
• margin-top: 15px;
• }
.linkPlantas{
background: url("../imagenes/index/plantas.png") no-repeat; transition: 1s; }
.linkPlantas:hover{
• background: url("../imagenes/index/plantas_over.png") no-repeat; transition:
0.3s;
• margin-top: 15px;
• } EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 46: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/46.jpg)
• Archivo css
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
De tipo DIV,
nombre
«contenidos»
Uso de
definición de
«contenidos»
![Page 47: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/47.jpg)
• /*Selector utilizando clases */
• img.imagen{
• border-radius: 10px 10px 10px 10px;
• }
• footer{
• width:95%;
• background: black;
• color: white;
• height:80px;
• text-align: center;
• font-size: 12px;
• border-radius: 0px 0px 10px 10px;
• }
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Uso de
definición de
«contenidos»
![Page 48: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/48.jpg)
Sesión 1
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 49: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/49.jpg)
• HTML 5, lenguaje de empaquetado
• Diagnostico
• Introduccin
• Estructura de un documento
• CSS3
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 50: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/50.jpg)
Sesión 2
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 51: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/51.jpg)
• Diseño responsive, diseño adaptable
• El diseño web adaptable, adaptativo, conocido por las siglas
RWD del inglés Responsive Web Design, es una filosofía de
diseño y desarrollo cuyo objetivo es adaptar la apariencia de las
páginas web al dispositivo que se esté utilizando para
visualizarlas. Hoy día las páginas web se visualizan en multitud de
dispositivos como tabletas, teléfonos inteligentes, libros
electrónicos, portátiles, PCs, etcétera. Además, aún dentro de
cada tipo, cada dispositivo tiene sus características concretas:
tamaño de pantalla, resolución, potencia de CPU, sistema
operativo o capacidad de memoria entre otras. Esta tecnología
pretende que con un único diseño web, se obtenga una
visualización adecuada en cualquier dispositivo.
• RWD
• Media queries EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 52: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/52.jpg)
• HTML• <meta name="viewport" content="width = device-width;
• initial-escale=1">
• CSS• @media screen and (min-width:480px) and (max-width:780px) {
• body { background: silver;}
• div.bienvenidos{ background:red; }
• article.pag{
• color:white;
• font-size: 12pt; }
• div.contenidos{ background:darkgray; }
• div.menuIconos{display: none; }
• .navFrutas, .navPlantas, .navTierra, .navAnimales, .navAgua {
• max-width: 70px;
• max-height: 70px; }
• div.logotipo{transform: scale(0.7); }
• }
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 53: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/53.jpg)
Sesión 3
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 54: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/54.jpg)
• Descarga de jquery• https://jquery.com/download/
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8"> <meta content="hola">
• <title>Ejemplo archivo con java script</title>
• <link rel="stylesheet" href="">
• <script src="jquery-3.0.0.js"></script>• <script>
• $(document).ready(function(){
• alert("Bienvenidos a jquery");
• });
• /*Pide valores al usuario */
• x= prompt("Valor inicial x");
• </script>
• </head><body> </body>
• </html>
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 55: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/55.jpg)
• Nombre de identificador
• <button id="btn">Mostrar/Ocultar</button>
• $('#btn').on('click', function() {
• Nombre de clase
• <p class="parrafo1">
• $('.parrafo1')
• Tipo de atributos
• <p>otro parrafo
• $('p').slideToggle();
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 56: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/56.jpg)
• <script>
• $(document).ready(function(){
• alert("Bienvenidos a jquery");
• /*con la linea siguiente accedemos al boton por su identificador */
• $('#btn').on('click', function() {
• alert("boton clickeado");
• $('p').slideToggle(); });
• /*slideToggle es para mostrar u ocultar algun texto */
• });
• /*Pide valores al usuario */
• x= prompt("Valor inicial x");
• /*con la linea siguiente accedemos al boton por su identificador */
• </script>
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 57: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/57.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 58: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/58.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 59: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/59.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Val() es el valor de variable del objeto
Text() es el valor visible del botón
![Page 60: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/60.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 61: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/61.jpg)
Contenido Sesión 4
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 62: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/62.jpg)
• User y contraseña.
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 63: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/63.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 64: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/64.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Crear
carpeta
desde
wamp
server
Abrir
carpeta
desde
sublimetext
![Page 65: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/65.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Abrir
carpeta
desde
sublimetext
![Page 66: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/66.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 67: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/67.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 68: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/68.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Así se ve el
botón de
eliminar
desde el
listado
![Page 69: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/69.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Insertar.php
![Page 70: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/70.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 71: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/71.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Vista previa
del
formulario
![Page 72: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/72.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Construcció
n de la
sentencia
insert
![Page 73: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/73.jpg)
• Nuevo archivo
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 74: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/74.jpg)
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
Curso programación web
![Page 75: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/75.jpg)
Sesión 5, Gestores de contenido
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 76: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/76.jpg)
• Sesión 5, Gestores de contenido
• Creación y gestión de contenidos
• Varias aplicaciones de creacion de contenido
• Creacion de portales web
• Joomla
• Oscommerce
• Drupal
• Magento
• Mambo
• ZenCart
• CakePHP
• VirtuMart
• ezPublish
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ
![Page 77: Desarrollo de aplicaciones web por araceli velazquez](https://reader030.vdocumento.com/reader030/viewer/2022021507/5a6dfd247f8b9a1f288b4eb3/html5/thumbnails/77.jpg)
• CMS de aprendizaje en línea
• Atutr
• Moodle
• Aprendizaje colaborativo
• Wikis
• Foros
• Blogs
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ