Desarrollo de aplicaciones web por araceli velazquez

Por Araceli Velázquez Gutiérrez

Sesión 1
EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ

• Editor de programas sublime text
• https://www.sublimetext.com/3
• Servidor WAMP
• http://www.wampserver.com/en/
• Filezilla
• https://filezilla-project.org/
GUTIERREZ

• Verificar que Wampserver esté ejecutando todos los
servicios
Apuntes ARACELI VELAZQUEZ GUTIERREZ
Debe
aparecer en
color verde

• Archivos de inicio de localhost
• El archivo index es el primero en ejecutarse
GUTIERREZ
Los archivos
de localhost

• Opciones de apache, servicio
• Prueba de apagar servidor web
GUTIERREZ

• localhost = 127.0.0.1
GUTIERREZ

• Sublimetext
GUTIERREZ
Index.php
de wamp

• Instalación de nuevos paquetes en sublimetext
• https://packagecontrol.io/installation
• Copiar el texto de la pagina en la consola de sublimetext
GUTIERREZ
Copiar este
texto para
ejecutarlo en
la consola

• Ejecutar en la consola
GUTIERREZ
Copiar el
texto aquí y
ejecutar

• CTRL +SHIFT +P
GUTIERREZ

• CTRL+SHIFT+ P
• Install
• EMMET
GUTIERREZ

• CTRL+SHIFT+ P
1. Install package
2. Color picker
1. Install package
2. CSSLint o CSSLinker
GUTIERREZ

• CTRL+SHIFT+ P
1. Install package
2. SublimeLinter
1. Install package
2. DocBlockr
GUTIERREZ

• CTRL+SHIFT+ P
1. Install package
2. PHPCompanion
GUTIERREZ

Copiar la carpeta Reinos
naturales a l www de
wampserver
GUTIERREZ
Reinos naturales

• Abrir proyecto
• Guardar proyecto
GUTIERREZ

• Ligar el editor de codigo con la ruta
• Add folder to project
GUTIERREZ

• Crear archivo index
GUTIERREZ

GUTIERREZ
¿Cómo ha cambiado
la web?
Búsqueda
semántica

GUTIERREZ

GUTIERREZ
¿Cómo ha cambiado
la web?
Cambios principalmente en
el sentido semántico de las
secciones
Aside:
Agregados

• Página web
• Sitio web
• Portal web
GUTIERREZ
Definiciones
correctas de

• Creación del archivo index.html
GUTIERREZ

• Creación del archivo index.html
GUTIERREZ
Con EMMET escribe html:5
y click en tab para que
añada la sintaxis por default

• Crear 10 etiquetas IMG
• img*10>
• TAB
GUTIERREZ

• Crear 10 etiquetas IMG dentro de una etiqueta div
• div>img*10>
• TAB
GUTIERREZ
Con EMMET se
crean las
instrucciones
Después de clickear
TAB

• Problema al cargar pagina
• Localhost en diferente direccion, revisar wamp server
GUTIERREZ
Ver la
ubicación de
www

• Versión 3 de CSS
• Reglas CSS
• Selector universal
GUTIERREZ

• 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
GUTIERREZ

• Tamaño
• Pixeles
• Porcentajes
• Establecer tamaños
• Width:
GUTIERREZ

• Estableciendo hoja de estilo en archivo index.html
• <link rel"stylesheet" type="txt/css"
href="estilos_css/index_css.css"</link>
GUTIERREZ

• 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

• Opciones para desarrolladores en google chrome
GUTIERREZ

• Capa para encabezado y capa para menú
• Usando EMMET
• <div>Prueba con hoja de estilo</div>
• 
• <header>
• <div></div>
• <div></div>
• </header>
• </body>
GUTIERREZ

• img
GUTIERREZ

• Para aplicar elementos distintos a objetos con el mismo
nombre, entonces utilizar clases
GUTIERREZ

• Archivo html
GUTIERREZ

• .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;
• }
GUTIERREZ
El efecto de la transición
dura 0.3 segundos
:hover captura el evento
de pasar por encima con
el ratón

• * { 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;
• }
GUTIERREZ

• 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

• .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;
• }
GUTIERREZ

nav{ width:80%;
• height:120px;
• margin:auto; text-align:center;
• font-family: Georgia, "Times New Roman", Times, serif;
• }
.linkFrutas, .linkPlantas, .linkTierra, .linkAnimales, .linkAgua {
• width:100px;
• height: 120px;
• display:inline-block;
• vertical-align: top;
• }
GUTIERREZ

.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;
• }
.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;
• } EVIDENCIAS: ARACELI VELAZQUEZ
GUTIERREZ

• Archivo css
GUTIERREZ
De tipo DIV,
nombre
«contenidos»
Uso de
definición de
«contenidos»

• /*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;
• }
GUTIERREZ
Uso de
definición de
«contenidos»

• HTML 5, lenguaje de empaquetado
• Diagnostico
• Introduccin
• Estructura de un documento
• CSS3
GUTIERREZ

Sesión 2
GUTIERREZ

• 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

• 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); }
• }
GUTIERREZ

Sesión 3
GUTIERREZ

• 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>
GUTIERREZ

• 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();
GUTIERREZ

• <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>
GUTIERREZ

GUTIERREZ
Val() es el valor de variable del objeto
Text() es el valor visible del botón

Contenido Sesión 4
GUTIERREZ

• User y contraseña.
GUTIERREZ

GUTIERREZ
Crear
carpeta
desde
wamp
server
Abrir
carpeta
desde
sublimetext

GUTIERREZ
Abrir
carpeta
desde
sublimetext

GUTIERREZ
Así se ve el
botón de
eliminar
desde el
listado

GUTIERREZ
Insertar.php

GUTIERREZ
Vista previa
del
formulario

GUTIERREZ
Construcció
n de la
sentencia
insert

• Nuevo archivo
GUTIERREZ

GUTIERREZ
Curso programación web

Sesión 5, Gestores de contenido
GUTIERREZ

• 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
GUTIERREZ

• CMS de aprendizaje en línea
• Atutr
• Moodle
• Aprendizaje colaborativo
• Wikis
• Foros
• Blogs
GUTIERREZ

Desarrollo de aplicaciones web por araceli velazquez

Recommended

Recommended

More Related Content

Similar to Desarrollo de aplicaciones web por araceli velazquez

Similar to Desarrollo de aplicaciones web por araceli velazquez (20)

Recently uploaded

Recently uploaded (13)

Desarrollo de aplicaciones web por araceli velazquez