Sei sulla pagina 1di 8

DISEÑO Y DESARROLLO WEB

Desarrollo Web Completo con HTML5, CSS3, JS AJAX


PHP y MySQL
TEMAS A ESTUDIAR:
 Convertir y crear sus propios diseños en páginas web
 Escribir código Java Ascript y jQuery
 Entender cómo funciona JavaScript y PHP
 Aprender AJAX, para crear páginas web dinámicas
 Crear páginas web con HTML y CSS
 Crear sitios Web Dinamicos con PHP y MYSQL
 Aplicar a un empleo de Desarrollo web junior
 Agregar pagos de PayPal a tus sitios web

INTRODUCCIÓN:
Html se conoce como un lenguaje de marcación de texto, es fácil, sintaxis clara
No es lenguaje de programación, diseñado para la estructura de un sitio web.
<p> = parrrafo
<nav> =navegación
<header> = Ebcabezado del sitio
ESTRUCTURA DE ARCHI HTML
<html>
<head>
<title> Mi pagina Web </title>
</head>
<body>
</html>

DEMOSTRACION DE UN DOCUMENTO SITIO WEB


Sitio web dinámico.

B/D

Servidor

-----------
________
________
______
php
1
DISEÑO Y DESARROLLO WEB

¿Qué es CSS?
Carcteristicas de las hojas estilos cascadas, que permitirá darle a tu código HTML un
diseño único y especial en pocas líneas. Tamaños y tipos de fuentes espacios,
márgenes, adaptar diseños a un distinto dispositivos animaciones.
Ejemplo escribir en CSS es muy fácil:
<style>
p{
color: blue;
}
</style>
CONOCIMIENTO DE CSS
{ Llaves de apertura
//declaraciones propiedad para agregar color; finalizar con punto y coma
cada linea
} Llaves de cierre:

CSS UTILIZA CASCADA


Porque puede tener un código repetido siempre el que este al final toma la hoja de
estilo, color de la página.

¿Qué es Java Script?


Añade comportamiento interactividad a tus sitios web, es un lenguaje de la web,
Desarrollo Front End
Añade Interactividad.
Desarrollo Back End.
JavaScript añade interactividad y comportamiento a tu sitio web
Reacciona a eventos del usuario en nuestra página web
Validar formularios
Procesar información
Mostrar mapas o ubicaciones

DEFINIR JavaScript
Es un lenguaje maduro y estable tiene variables, funciones, estructuras de control,
métodos lo cual lo hace un lenguaje de programación.
Java funciona se ejecuta sobre algo llamado DOM /Elementos que integran una pag.
web/
Otros usos de JavaScript
Puede utilizarse como ayuda servidor, automatizado y Dependencias, en otras
tecnologías aprender Java ayuda al desarrollo de crear otras aplicaciones.

2
DISEÑO Y DESARROLLO WEB

FUNCIONAMIENTO DE PHP Y MySQL


Sitios dinámicos de forma fácil y efectiva
¿Qué es PHP?
Es un lenguaje de Scripting diseñado para trabajar con Html, no es necesario compilar
su sintaxis es similar a C y JavaScript.
Más flexible que Html.
Ventajas:
Es necesario instalar un servidor local posible utilizar la ultima versión pero compatible
con las versiones anteriores, software libre, desarrollarse en Linux, Mac o Windows.
Diseñado para la web, es estable, muchas veces utilizado como programación
orientada a Objeto. Es una muy buen opción para utilizarlo como programación
Backend.
Permitido casi en todos los servicios hosting.
¿Qué es MyDQL?
Es una base de datos /Open Source, guarda y lee grandes cantidades de datos,
permite relacionar con otros datos. Fácil de usar y es software libre.
Para el uso de principiante es muy bueno utilizar la combinación de PHP y MySQL
siguiendo las recomendaciones protección de seguridad informática, que muchas
veces es vulnerable para programadores expertos.

COMO FUNCIONA LA COMBINACIÓN DE PHP Y MySQL

-----------
www.SitioWeb.com
________ B/D
________
______
php

Servidor

Página Web

3
DISEÑO Y DESARROLLO WEB

TEMAS A DESARROLLAR:
 Etiquetas básicas para trabajar en HTLM 5, como crear textos imágenes, listas
menús contenedores y formularios.
 Estilos en CSS 3: Textos Colores, Menús de navegación, animaciones, -
Formularios, Botones y muchos más.
 Crear Proyectos y para concluir con un proyecto final.
 Lenguaje de la web JavaScript JS, sintaxis, funciones trabajar con DOM, Manipular
DOM Crear un cotizador online y mucho más.

jQuery como escribir código Integrar Plugins crear galerías jQuery, reaccionar a
eventos en sitio y muchos más.
Integrar las 4 tecnologías en un proyecto final
Sitios web dinámicos con PHP y MySQL, sintaxis y funciones, hacer una aplicación
consultas hacer más modular nuestro sitio y demás.

Importancia de Utilizar un editor de texto /ATOM/ Sublitem text, Adobe Brackets, Visual
Studio Code para Windows. Ejecutan en cualquier plataforma
Ventajas posicionarse al inicio de una función presiona el triangulo y hacer pequeño el
código para poder seguir navegando.
Permite formatear el texto, lo recomendable es utilizar un editor de texto.

Editor de Texto más popular


Sublime Text 3 para Windows software de paga y no paga casi es licencia que no
caduca.

SU FORMA DE TRABAJO:
Puede trabajar con carpetas directorios organizados en forma jerárquica, puede hacer
la fuente más grande, puede trabajar con navegar y abrir la presentación indicada.

4
DISEÑO Y DESARROLLO WEB

Crear Archivos para trabajar con CSS (Estilos) y JavaScript, puede instalar librerías,
Plugin para instalar.
EDITOR VISUAL STUDIO CODE (DE Microsoft) gratuito para cualquier plataforma
Mac, Ubuntu
Programas trabaja con cualquier extensión, para paython, C++, etc.
Tiene un buen auto completado, No es necesario instalar muchos plugins, funciona o
se integra con otras herramientas, tiene que instalar ciertas extensiones.

ATOM /Trabaja con Ubuntu/


Se puede instalar en MAC, Windows, editor para trabajar en el curso. Un editor muy
popular, es más pesado que los otros. Se puede cambiar la apariencia, escoger un
tema, instalar un paquete para abrir un proyecto.

Brackets /Adove/
Es el mejor editor para hacer paginas web es pesado más de 50 megas, editor mas
completo.
Para trabajar con proyectos grandes. Crear carpeta de CSS. Es un poco mas
complicado, tiene forma de autocompletado muy interesante. Más orientado a web,

5
DISEÑO Y DESARROLLO WEB

PRACTICA BÁSICA
Todo lo básico de HTML, desarrollo web, a utilizar ATOM Editor de Text páginas web
Crea mi primer archivo, dar un nombre. Index.html crear: New file, decirle al navegador
que haga con nuestra pagina debemos decir que version de html
<!DOCTYPE html> este código avisa al navegador que utilice la última versión de
HTML5.
TRABAJAR CON ENCABEZADO
<hmtl>
<head> etiquetas importantes para nuestro sitio web
< meta charset=“utf-8”>
< meta name= “description” content=Explorando y Aprendiendo HTML”>
<title=Mi primer página web con HTML5 </title>
</head>
<h1>CONTENIDO DE MI PAGINA WEB </h1>
//lugar para escribir una instrucción de java//
<body>
H1 head del 1 al 6 es el tamaño de la letra.
<p> esto es un parrafo</p> de un solo tamaño no cambia el tamaño de letra
Para separa párrafo saltos de líneas utilizamos la etiqueta <br>
Para espacios en blanco &nbsp; &nbsp
Para resaltar texto <b></b>
Para hacer texto en cursiva <i ></i>

H1=el más importante


H2 = más común usado en la pag
H3 = texto más pequeño

6
DISEÑO Y DESARROLLO WEB

H6= menos importante


</body>

</hmtl>

7
DISEÑO Y DESARROLLO WEB