Prog. WEB (IV)

Ballesteros Oswaldo En la sesiones 12 y 13 aparece un taller de paso a paso para crear un Sitio Web con Bootstrap y acceso a BD.

Actividad Sustentación - Semana 16 - Noviembre 18

Materialización del Prototipo del Sitio WEB en Bootstrap.
Recuerde manejar las divisiones de columnas (12 celdas por fila).
Según su prototipo de sitio WEB presentado anteriormente debe implementarlo usando codigo HTML, FrameWork Bootstrap 4 y Java Script.

Temas para el Parcial: Semana 16 - Noviembre 18

1. Java Script
   • DOM(HTML)
   • AJAX
   • JSON
2. FrameWorks(¿Qué son? ¿Para qué sirven?
Ejemplos de estos:
• CSS(Bootstrap,... )
• JS(jQuery,... )
• PHP(Laravel,...)
3. PHP
   • WEB Services(PHP, MySQLi)
   • ¿Qué es una Sesión en PHP?
   • Variables Globales: $GLOBALS, $_SESSION, $_SERVER, $_POST, $_GET, $_REQUEST, $_FILES, $_ENV, $_COOKIE

El QUIZ tendrá preguntas tipo opción múltiple con unica respuesta
Abrá código(PHP, JavaScript, HTML) del cuál se le pedirá escojer que hace

Usa Tu Biblioteca CUN >> Material Fisico Disponible Material Digital

---

Primer Corte: Actividad(30%), Participación/Quiz(30%) y Parcial(40%)

Sesión 1 Sesión 2 Sesión 3 Sesión 4 Sesión 5

---

SYLLABUS DE LA ASIGNATURA

Documento con el temario a desarrollar durante el periodo académico.

Lunes: 6:15pm a 8:30pm (Nocturo) Sala 216
Martes: 2:00pm a 4:15pm (Diurno) Sala 216

Presentación y Reglas en la Asignatura

Presentación y establecer reglas para el desarrollo de la asignatura.

Contenidos temáticos de la asignatura:

• Introducción a HTML, CSS y Java Script
• Etiquetas: h, p, ol, ul, table, a, img con NetBeans
• Formularios HTML
• Prototipos de un Sitio WEB
• Frameworks CSS
• Bootstrap
• Validar Sitio WEB

Libros disponibles en Biblioteca:

• HTML5 y CSS3 para diseñadores. Beati, Hernán. 2015. ISBN: 9789587780406
• Guía práctica de XHTML, JavaScript y CSS. Orós Cabello, Juan Carlos. 2013. ISBN: 9786077072225
• Diseño Web con CSS. Schulz, Ralph. 2009. ISBN: 9786077686156

Bibliografía:

• Diseño PAG WEB XHTML, JAVASCRIPT, CSS, AlfaomegaEditores.
• Manual rápido de CSS-Beatriz Eugenia Florián G.
• HTML 5 para desarrolladores, Wrox

Cibergrafía:

• HTML Cinco
• HTML 5 Intro
• Manual de CSS.
• HTML 5 Tutorial
• Java Script
• Bootstrap 3 - Librosweb.es

Los Estudiantes deben hacer su matricula académica antes de la segunda sesión.

HERRAMIENTAS: IDE NetBeans8 Editores de Texto: Sublime Text NotePad++ Bootstrap 3 jQuery Pencil Prototype 2.05 Pencil Prototype

(1) ¿Qué es HTML, HTML5, CSS y JavaScript?

Estructura Básica de un Documento HTML5

HTML5 es la última versión de HTML. El término representa dos conceptos diferentes: Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos. Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance.<<<extraido de developer

Lecturas Recomendadas:
HTML 5 - ¿Cómo usarlo? Java Script CSS

ENLACES: Volver Arriba

(2) HTML Basico con NetBeans - h - p - ol - ul - table - a - img

Creación de paginas web con el IDE NetBeans. Etiquetas HTML (Texto Encabezado, Párrafo, Listas, Tablas, Enlaces, Imágenes) parametrizadas desde la paleta de controles del IDE

Sitio WEB Introducción from Emerson Garay

Sitio WEB HTML from Emerson Garay

ENLACES: Guia HTML, CSS3 Y JavaScript Volver Arriba

(3) HTML Basico con NetBeans - Formularios

Formulario (form) Campos ( input, textarea, select, checkbox, radio ) Seleccionar archivo ( file ) Botones (submit, reset )

¿Qué son formularios HTML?
Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Ellos permiten a los usuarios enviar información a un sitio web. La mayor parte de las veces se envía información a un servidor web, pero la pagina web también puede interceptarla para usarla por su lado. <<<extraido de developer

ENLACES: Elementos de Formulario HTML Volver Arriba

(4) HTML - JavaScript con NetBeans - Formularios

Crear y usar código JavaScript junto con Formularios HTML

JavaScript es un lenguaje de programación, al igual que PHP, si bien tiene diferencias importantes con éste. JavaScript se utiliza principalmente del lado del cliente (es decir, se ejecuta en nuestro ordenador, no en el servidor) permitiendo crear efectos atractivos y dinámicos en las páginas web.<<<extraido de aprender a programar

ENLACES: Formularios HTML
Volver Arriba

(5) Parcial 1

Etiquetas HTML básicas para manejar:
Tablas, Listas, Enlaces, Imágenes,
Textos, Formularios desde el IDE de NetBeans

1) Descargar el archivo del parcial
2) Descomprimir el archivo(requiere clave)
3) Lea atentamente el documento
4) Enviar al correo institucional del docente
5) Asunto: Parcial 1 WEB: Fulano o Zutano
6) Solo el archivo index.html se debe adjuntar

Volver Arriba

(6) Diseño del Sitio WEB

Diseño del Sitio WEB

1. Elementos del Sitio WEB

Prototipado del Sitio WEB

1. Herramientas de prototipado
• Pencil Prototye (Bajar Software Recomendado)
• Pencil Prototyping(Pluging de Firefox)
2. Uso de las herramientas de prototipado
• Creación del boceto de la pagina principal

DESCARGAR: Imágenes Agregar a Prototype

ACTIVIDAD INDIVIDUAL 2.1
1. Descripción del propósito del sitio.(Documento en Word)
2. Crear el diseño(prototipo) de la pagina web principal de su sitio con Pencil Prototype.
Volver Arriba

(6 y 7) HTML Formularios - JavaScript Validación y Cálculos

DOM JavaScript

1. window.alert()
2. document.getElementById()
   1. value
   2. selectedIndex
   3. options(length, selectedIndex, [].text,)
3. null:El valor null es un literal de Javascript que representa un valor nulo o "vacío". Es uno de los valores primitivos de Javascript.
4. Math:es un objeto incorporado que tiene propiedades y métodos para constantes y funciones matemáticas
   • Math.cos
   • Math.sin
   • Math.tan
   • Math.hypot
   • Math.log
   • Math.min
   • Math.max
   • Math.pow
   • Math.sin
   • Math.random
   • ...

Funciones JavaScript

1. isNaN: es una función de alto nivel y no está asociada a ningún objeto. isNaN intenta convertir el parámetro pasado a un número. Si el parámetro no se puede convertir, devuelve true; en caso contrario, devuelve false.
2. parseInt:Convierte (parsea) un argumento de tipo cadena y devuelve un entero de la base especificada.
3. parseFloat:Convierte (parsea) un argumento de tipo cadena y devuelve un número de punto flotante

DESCARGAR:

Taller 2.1 - Validación y Cálculos en Javascript <<< descargar

Volver Arriba

(8) Frameworks CSS - Ejemplo con Bootstrap

Frameworks CSS ejemplos:
* Bootstrap, Materialize, Foundation y muchos otros
Framework Bootstrap
* Funcionalidad, Ventajas y Estructura
* Ejemplos y Talleres.

Bootstrap 4 by on Scribd

Sitio web (bootstrap 4) from Emerson Garay

Ejemplo con Bootstrap

Introducción e Instalación

Vista de Diseño Responsive en:
Firefox: Ctrl + Shift + M ó
Icono Menú(3 rayas) -> Desarrollador -> Vista diseño adaptativo
Chrome: Icono Menú(3 puntos) -> Mas herramientas -> Herramientas desarrollador -> Ctrl + Shift + M

DESCARGAR: Imágenes para trabajar en clase
ACTIVIDAD INDIVIDUAL 2.2
1. Materialización del Prototipo del Sitio WEB en Bootstrap.
* Recuerde manejar las divisiones de columnas (12 celdas por fila).
Volver Arriba

(9) Framework Bootstrap con la Libreria jQuery

Slides (Carrusel de Imagenes utilizando Bootstrap)

Sitio web (boostrap carrusel de imagenes) from Emerson Garay

Como hacer un slideshow con Bootstrap

DESCARGAR: Archivo jQuery 3.3.1 jQuery 3.3.1 - WEB Oficial Volver Arriba

(10) Parcial 2

Prototipo de un Sito WEB con Pencil Prototype
Materialización del prototipo con Bootstrap 3

1) Descargar el archivo del parcial
2) Descomprimir el archivo(requiere clave)
3) Lea atentamente el documento
4) Enviar al correo institucional del docente
5) Asunto: Parcial 1 WEB: Fulano o Zutano
6) Solo el archivo index.html se debe adjuntar

PARCIAL PRACTICO:  Bajar Parcial 1 Volver Arriba

(11) Imágenes y Tablas en Bootstrap

Tablas Bootstrap 4

Imágenes Bootstrap 4

DESCARGAR: Taller Practico 3.1 Volver Arriba

(12) Bootstrap 4, JavaScript, PHP y MySQLi

Listar los registros de una tabla de una BD

1) Crear una nueva carpeta en el directorio "htdocs" del XAMPP
2) Guardar en la carpeta creada las carpetas(css y js) de Bootstrap 4
3) Seguir los pasor del Taller1-PHP-MySQL

TALLER PRACTICO:  Bajar Taller 1 PHP-MySQLi Volver Arriba

(13) Bootstrap 4, JavaScript, PHP, MySQLi, AJAX y JSON

CRUD de la tabla de una BD

1) Retomar el Taller 1
2) Seguir los pasos del Taller2-PHP-MySQL-AJAX-JSON

TALLER PRACTICO 2:  Bajar Taller 2 PHP-MySQLi Volver Arriba