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

https://www.sublimetext.com/3

http://www.wampserver.com/en/

https://filezilla-project.org/

• 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

https://packagecontrol.io/installation

• 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


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;

• }EVIDENCIAS: ARACELI VELAZQUEZ

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»

Sesión 1


GUTIERREZ

• 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

https://es.wikipedia.org/wiki/P%C3%A1ginas_web

https://es.wikipedia.org/wiki/Port%C3%A1til

https://es.wikipedia.org/wiki/Computadora_personal

https://es.wikipedia.org/wiki/Resoluci%C3%B3n_de_pantalla

https://es.wikipedia.org/wiki/Unidad_central_de_procesamiento

https://es.wikipedia.org/wiki/Memoria_(inform%C3%A1tica)

• 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

https://jquery.com/download/

• 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


GUTIERREZ

Val() es el valor de variable del objeto

Text() es el valor visible del botón


GUTIERREZ

Contenido Sesión 4


GUTIERREZ

• User y contraseña.


GUTIERREZ


GUTIERREZ


GUTIERREZ

Crear

carpeta

desde

wamp

server

Abrir

carpeta

desde

sublimetext


GUTIERREZ

Abrir

carpeta

desde

sublimetext


GUTIERREZ


GUTIERREZ

Así se ve el

botón de

eliminar

desde el

listado


GUTIERREZ

Insertar.php


GUTIERREZ


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

Technology

Transcript of Desarrollo de aplicaciones web por araceli velazquez