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

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

¿Cómo ha cambiado

la web?

Búsqueda

semántica

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

• Problema al cargar pagina

• Localhost en diferente direccion, revisar wamp server

GUTIERREZ

Ver la

ubicación de

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

• </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:

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

/*El evento hover es para cuando pasas el raton encima del

objeto */

.linkFrutas:hover{

• background: url("../imagenes/index/frutas_over.png") no-repeat; transition:

.linkPlantas{

background: url("../imagenes/index/plantas.png") no-repeat; transition: 1s; }

.linkPlantas:hover{

• background: url("../imagenes/index/plantas_over.png") no-repeat; transition:

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

• 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

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

carpeta

server

carpeta

sublimetext

GUTIERREZ

carpeta

sublimetext

GUTIERREZ

Así se ve el

botón de

eliminar

desde el

listado

GUTIERREZ

Insertar.php

GUTIERREZ

Vista previa

formulario

GUTIERREZ

Construcció

n de la

sentencia

insert

• Nuevo archivo

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

velazquez 6th period

transparencia.info.jalisco.gob.mx · 2015. 6. 4. · maria...

velazquez 87

diego velazquez

alfredo velazquez

edgar leonardo velazquez

nanotecnologia victor velazquez

avancce araceli

webquest velazquez!

siceba sistema de control escolar...

juguetes velazquez

araceli cuento

velazquez malacara ns_mc_fisiologia_vegetal_2014

velazquez excrecion

lopez velazquez

araceli cisneros

diego velazquez

escuela telesecundaria “laura mendez” profra. rocio...

cristo velazquez

erick velazquez