Introduccion A La Programación Web - Unidad 1 PDF

PROGRAMACION WEB
PROPÓSITO DE LA
ASIGNATURA
El alumno desarrollará proyectos web

de acuerdo a metodologías de PROGRAMACIÓN WEB
desarrollo web, consumo de servicios,
scripts, frameworks y MVC para la
comunicación y acceso a la
información remota.
Antes de iniciar …
CUESTIONARIO EN LINEA
1. ¿Qué es una Página Web?

2. ¿Qué tecnologías se utilizan para construir una sitio web?
3. ¿ De qué está conformado una página web?
4. Desde el punto de vista de un Ing. En Software, menciona un sitio
Web y comenta ¿ ¿ ¿qué características tiene que lo hacen
destacar de los demás?
5. ¿Cuál es la importancia que tiene el desarrollo Web en tu carrera?
6. ¿Qué conocimientos tienes en cuanto al desarrollo de una página
Web?
7. ¿Qué es un framework o cual es su uso?
8. Para que un sitio web se encuentre en línea o en producción,
¿qué tecnología o plataforma debe existir?
9. ¿Qué lenguaje de programación puedes recomendar para el
desarrollo web?
10.¿Qué manejadores de base de datos se utilizan para programar
en web?
11.¿Qué conocimientos piden hoy en día que debe cumplir un Ing.
En Software o afín?
12.¿Qué entiendes por programación web?
UNIDAD 1. INTRODUCCIóN A
LA PROGRAMACION WEB
El alumno propondrá la arquitectura para el desarrollo de proyectos web
TEMAS
1. Conceptos de desarrollo web

2. Desarrollo de arquitectura web
3. Elaborar un portafolio de evidencias (programas desarrollados)
¿Qué es una apliación web ?
Conceptos de desarrollo web
Conceptos de desarrollo web
¿Qué tecnologías se requieren para
desarrollar una aplicación web?
¿Qué es HTML?
¿Cuál es la función de un
Navegador Web?
HTML
+
CSS
+
JS
Que significa
HTML
HTML (HyperText Markup Language) es un
lenguaje compuesto por un grupo de etiquetas
definidas con un nombre rodeado de paréntesis
angulares.
Los paréntesis angulares delimitan la etiqueta y

el nombre define el tipo de contenido que
representa.
HTML 5
Evolución
HTML5
HTML5 es una combinación de nuevas etiquetas

de markup (lenguaje) HTML, propiedades CSS3,
JavaScript y algunas tecnologías complementarias
de apoyo, pero que técnicamente son
independientes de la propia especificación
HTML5.
Etiqueta o tag
HTML es un lenguaje para escribir páginas Web definido por
tags.
L@s tags, a veces llamados "etiquetas" en español, son los

”instrucciones" a los navegadores que leen e interpretan para
conformar las páginas Web.
Todos los tags de HTML empiezan con el caracter < y terminan

con el caracter >.
Dentro de ellos va toda la instrucción del tag, empezando por el

nombre.
Por ejemplo, el tag HTML (osea el más básico) se escribe de la

siguiente manera:
<html>
Etiqueta o tag
Algunas etiquetas de HTML tienen un cierre de etiqueta.
La etiqueta de cierre se construye de igual manera que la de

apertura pero, en este caso, el nombre del elemento es
precedido por una barra diagonal ("/").
<html>
….
Instrucciones
…
</html>
Etiqueta o tag
Existen algunas llamadas void elements, algo así como

«etiquetas vacías», que no tienen etiqueta de cierre, por
considerarse que no debían tener ningún otro elemento en su
interior, por lo tanto no tienen etiquetas de cierre.
Por ejemplo
<br>
Etiqueta o tag
Self-Closing Tags
Con el tiempo, algunas variaciones de HTML como XHTML, empezaron a

incorporar Self-Closing Tags, es decir, elementos que necesitaban
únicamente de una etiqueta para definirse.
En HTML4 también comenzaron a utilizarse, si bien en un inicio ésta

nomenclatura era técnicamente incorrecta.
A medida que se iba popularizando su uso, los navegadores comenzaron a

implementarla e incluso el W3C’s acabó aceptándolas.
La etiqueta elegida, para evitar confusiones, era la de cierre, de forma que

actualmente, en HTML5, disponemos de los siguientes void elements:
Etiqueta o tag
<meta charset = "UTF-8">

<meta charset = "UTF-8" />
Cual es correcto?
Etiqueta o tag
Self-Closing Tags Hay que hacer notar que
<area /> por ejemplo
<base />
<br /> La tag
<col />
<command />
<br>
<embed />
<hr />
<iframe /> y
<img />
<input /> <br />
<link />
<keygen />
<link /> Son correctas y el
<menuitem /> navegador las va a
<meta /> interpretar sin problemas
<param /> ya que el cierre /> en
<source />
html 5, es opcional.
<track />
<wbr />
<meta charset = "UTF-8">

<meta charset = "UTF-8" />
ANTES AHORA
HTML 5
Revisa en internet, los editores de código

y mencionalos para incluir en esta lista:
• Sublimetext
• Netbeans
• Emacs
• Textmate
• Atom
• Visual Studio Code
• Bloc de notas
• Notepad++
• Brackets
• DroidEdit
• Dev C++
Iniciemos con las Tags de
HTML 5
HTML
Hola Mundo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<p>HOLA MUNDO!</p>
</body>
</html>
DOCTYPE
El doctype es la declaración de tipo de
documento (Document Type Definition DTD)
<!DOCTYPE html>
DOCTYPE es una línea de código que se incluye en los lenguajes de

marcado como SGML, XML o HTML.
Esta línea de código debe ser la primera línea en el documento.
Los estándares de DOCTYPE son definidos por la W3C.
La declaración del tipo de documento ayuda a definir el tipo o versión de

lenguaje que incluiría el documento, al incluir la declaración del tipo le
ahorramos la tarea de deducción al navegador además que es permite
seguir los estándares establecidos.
DOCTYPE es útil al momento de validar un documento, lo cual nos

permite descubrir posibles errores o incompatibilidad de etiquetas.
DOCTYPE
HTML 4.01
Para HTML 4 podemos escoger entre tres tipos de documento:

Strict, Transitional y Frameset.
Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE
HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 1.0
Al igual que HTML 4 podemos hay tres tipos de documento: Strict,
Transitional y Frameset.
Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE
Pero en HTML 5, se simplifico a :
<!DOCTYPE html>
Elementos HTML
<html>
Este elemento delimita el código HTML. Puede incluir el atributo lang para
definir el idioma del contenido del documento.
<head>
Este elemento se usa para definir la información necesaria para configurar la
página web, como el título, el tipo de codificación de caracteres y los archivos externos
requeridos por el documento.
<body>
Este elemento delimita el contenido del documento (la parte visible de la
página)
Elementos del HEAD
En un documento HTML:
El elemento <body> es hijo del elemento <html>

El elemento <head> es hijo del elemento <html>
El elemento <body> es hermano del elemento <head>
Ambos, <body> y <head>, tienen al elemento <html> como su padre.
Es importante saber esto pues es la base del DOM para trabajar con las
tags en Javascript
HEAD
Para construir una página, se inicia con la cabecera
<title>
Este elemento define el título de la página.
<title>Mi primera Web</title>
<base>
Este elemento define la URL usada por el navegador para establecer la
ubicación real de las URL relativas.
El elemento debe incluir el atributo href para declarar la URL base.
Cuando se declara este elemento, en lugar de la URL actual, el

navegador usa la URL asignada al atributo href para completar las URL
relativas.
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
HEAD
<meta>
Este elemento representa metadatos asociados con el documento como:

• la descripción del documento
• palabras claves
• el tipo de codificación de caracteres
El elemento puede incluir los atributos name para describir el tipo de

metadata, content para especificar el valor, y charset para declarar el
tipo de codificación de caracteres a utilizar para procesar el contenido.
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
Investiga que son las etiquetas META
<meta charset="">
<meta name="description" content="">
<meta name="keywords" content="">

HEAD
<link>
Este elemento especifica la relación entre el documento y un recurso

externo (generalmente usado para cargar archivos CSS).
El elemento puede incluir los atributos:

• href para declarar la ubicación del recurso
• rel para definir el tipo de relación
• media para especificar el medio al que el recurso está asociado
(pantalla, impresora, etc.)
• type y sizes para declarar el tipo de recurso y su tamaño (usado a
menudo para cargar iconos).
<link rel="icon" href="imagenes/favicon.png" type="image/png” sizes="16x16">
<link rel="stylesheet" href="misestilos.css">

HEAD
<style>
Este elemento se usa para declarar estilos CSS dentro del documento.
<style>
h1 {color:red;}
p {color:blue;}
</style>
HEAD
<script>
Este elemento se usa para cargar o declarar código JavaScript
<script type="text/javascript" >

document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Cargando un archivo externo
<script type="text/javascript" src=”ruta/javascript_file.js"></script>

O
<script src=”ruta/javascript_file.js"></script>
Ojo: Si lleva la etiqueta de cierre

Así va quedando
BODY
A pesar del hecho de que cada diseñador crea sus propios diseños, en
general podremos identificar las siguientes secciones en cada sitio web.
Pie
BODY
Ejemplo
BODY
1. Cabecera
2. Barra de Navegación
3. Sección de Información Principal
4. Barra Lateral
5. El pie
BODY
<header></header>
La intención de <header> es proveer información como los títulos,

subtítulos, logos.
<nav></nav>
La siguiente sección es la Barra de Navegación.
El elemento <nav> fue creado para la navegación, como son los menús
principales.
Las opciones de un menu pueder ser realizado con diferentes tags, ya
sean Listas (<ul>, Enlaces (<a>) y (<div>).
BODY
<section> </section>
Contiene la información más relevante del documento y puede ser
encontrada en diferentes formas (por ejemplo, dividida en varios bloques
o columnas).
El propósito de estas columnas es más general, pues contiene toda la

información relevante del documento HTML.
<aside></aside>
La Barra Lateral se ubica al lado de la columna Información Principal.
Esta es una columna o sección que normalmente contiene datos
relacionados con la información principal pero que no son relevantes o
igual de importantes.
Tambien pueden haber formularios diversos.
<aside> podría estar ubicado del lado derecho o izquierdo, esto a

consideración del programador
BODY
<footer></footer>
Presenta la información de la empresa o los datos representativos de la

organización, como contactos, direcciones, fechas.
DENTRO DEL DOCUMENTO
<article></article>
El elemento <article> nos permite incluir el contenido de la información

relevante tales como las entradas de un blog.
BODY
BODY
Ejemplo
div
DIV es una de las etiquetas que sigue funcionando en HTML5 con la

diferencia de que no cumple con
la semántica en particular. En HTML5 se usa DIV para definir bloques
sin ningún tipo de significado.
Normalmente se usa para maquetar correctamente la página o para

agrupar elementos.
Realizar ejemplo en HTML

Top
Margen
Elemento
Padding
Left Right
Bottom
Enlaces
<a> </a> Este elemento crea un enlace
<nav>
<a href="index.html">Principal</a> |
<a href="fotos.html">Fotos</a> |
<a href="videos.html">Videos</a> |
<a href="contacto.html">Contacto</a>
</nav>
Imágenes
<img src=”img/pic_trulli.jpg" alt=”Texto alternativo">
<img src=”img/pic_trulli.jpg" alt=”Texto alternativo”

width="500" height="600">

style="width:500px;height:600px;">

id=“logo”>
Estilos.css
#logo{
width:500px;
height:600px;
}
Formularios
Inician y terminan con <form> </form>
<form method=”get" action="salida.php">

</form>
action: archivo de destino

method: forma de enviar el formulario
GET
El método por default es GET.
Cuando se usa GET los valores del formulario son visibles en la
URL:
/action_page.php?nombre=Mickey&apellido=Mouse.
POST
El método POST use usa cuando se envia información sensible y no
es visible en la URL.
POST no tiene límites y se puede enviar mucha información.
Formularios
Inician y terminan con <form> </form>
Atributo Valor Descripción

accept-charset character_set Especifica la codificación de caracteres que se
van a utilizar para el envío del formulario
action URL Especifica dónde enviar el formulario de datos

cuando se envía un formulario
autocomplete on Especifica si un formulario debe tener

off autocompletar o desactivar
enctype application/x-www-form-urlencoded indicar el formato de codificación de los datos
multipart/form-data que estamos remitiendo
text/plain
method get Especifica el método de envío de los datos

post
name text Especifica el nombre de un formulario
novalidate novalidate Especifica que el formulario no debe ser

validados
target _blank Especifica dónde se debe mostrar la respuesta
_self que se recibe despues del enviar el formulario.
_parent
_top
Formularios
Elemento input
<label for=”nombre">Escriba su nombre:</label>

<input type="text" name=”nombre" id=”nombre">
<input type="text" name=”nombre" id=”nombre” placeholder="Escriba su nombre">
El for del label y el id del input, deben ser los mismos para que
se asocien
Formularios
Elemento input
Este elemento genera un campo de entrada en el que el usuario

puede seleccionar o insertar información:
text :Este valor genera un campo de entrada para insertar texto

email : para insertar correo electrónico
search : para insertar términos de búsqueda.
url : para insertar URL.
tel : para insertar números de teléfono.
number : para insertar números.
range : para insertar un rango de números.
date : para insertar una fecha.
datetime-local : para insertar fecha y hora.
week : para insertar el número de la semana (dentro del año).
month : para insertar el número del mes.
time : para insertar una hora (horas y minutos).
hidden : Se usa para enviar información oculta para el servidor
password : para insertar una contraseña
color : para insertar un color.
Formularios
Elemento input
Este elemento genera un campo de entrada en el que el usuario

puede seleccionar o insertar información:
checkbox : casilla que permite activar o desactivar una opción.

radio : genera opciones para escoger una de varias posibles.
file : genera un campo de entrada para seleccionar un archivo
button : genera un botón, que se use con JavaScript
submit : envía el formulario.
reset : reinicia el formulario.
image : carga una imagen que se usa como botón para enviar el
formulario.
Formularios
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de formulario</title>
</head>
<body>
<form action="." oninput="range_control_value.value = range_control.valueAsNumber"><p>
Nombre: <input type="text" name="name_control" autofocus required ><br />
Correo Electrónico: <input type="email" name="email_control" required ><br />
URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página web personal">
<br />
Fecha: <input type="date" name="date_control" /><br />
Tiempo: <input type="time" name="time_control" /><br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" /><br />
Mes: <input type="month" name="month_control" /><br />
Semana: <input type="week" name="week_control" /><br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10" max="10" value="0"
/><br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0" max="10" value="0" />
<output for="range_control" name="range_control_value" >0</output><br />
Teléfono: <input type="tel" name="tel_control" /><br />
Término de búsqueda: <input type="search" name="search_control" /><br />
Color Favorito: <input type="color" name="color_control" /><br />
<input type="submit" value="Submit!" /> </p>
<input type=”reset" value=”Reiniciar" /> </p>
</form>
</body>
</html>

Introduccion A La Programación Web - Unidad 1 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion A La Programación Web - Unidad 1 PDF

Cargado por

Copyright:

Formatos disponibles

PROGRAMACION WEB

El alumno desarrollará proyectos web

1. ¿Qué es una Página Web?

1. Conceptos de desarrollo web

Los paréntesis angulares delimitan la etiqueta y

HTML5 es una combinación de nuevas etiquetas

L@s tags, a veces llamados "etiquetas" en español, son los

Todos los tags de HTML empiezan con el caracter < y terminan

Dentro de ellos va toda la instrucción del tag, empezando por el

Por ejemplo, el tag HTML (osea el más básico) se escribe de la

Algunas etiquetas de HTML tienen un cierre de etiqueta.

La etiqueta de cierre se construye de igual manera que la de

Existen algunas llamadas void elements, algo así como

Con el tiempo, algunas variaciones de HTML como XHTML, empezaron a

En HTML4 también comenzaron a utilizarse, si bien en un inicio ésta

A medida que se iba popularizando su uso, los navegadores comenzaron a

La etiqueta elegida, para evitar confusiones, era la de cierre, de forma que

<meta charset = "UTF-8">

<meta charset = "UTF-8">

Revisa en internet, los editores de código

DOCTYPE es una línea de código que se incluye en los lenguajes de

Los estándares de DOCTYPE son definidos por la W3C.

La declaración del tipo de documento ayuda a definir el tipo o versión de

DOCTYPE es útil al momento de validar un documento, lo cual nos

Para HTML 4 podemos escoger entre tres tipos de documento:

Pero en HTML 5, se simplifico a :

El elemento <body> es hijo del elemento <html>

El elemento <body> es hermano del elemento <head>

Ambos, <body> y <head>, tienen al elemento <html> como su padre.

<title>Mi primera Web</title>

Cuando se declara este elemento, en lugar de la URL actual, el

Este elemento representa metadatos asociados con el documento como:

El elemento puede incluir los atributos name para describir el tipo de

<meta name="description" content="">

<meta name="keywords" content="">

Este elemento especifica la relación entre el documento y un recurso

El elemento puede incluir los atributos:

<link rel="icon" href="imagenes/favicon.png" type="image/png” sizes="16x16">

<link rel="stylesheet" href="misestilos.css">

<script type="text/javascript" >

Cargando un archivo externo

<script type="text/javascript" src=”ruta/javascript_file.js"></script>

Ojo: Si lleva la etiqueta de cierre

La intención de <header> es proveer información como los títulos,

El propósito de estas columnas es más general, pues contiene toda la

Tambien pueden haber formularios diversos.

<aside> podría estar ubicado del lado derecho o izquierdo, esto a

Presenta la información de la empresa o los datos representativos de la

DENTRO DEL DOCUMENTO

El elemento <article> nos permite incluir el contenido de la información

DIV es una de las etiquetas que sigue funcionando en HTML5 con la

Normalmente se usa para maquetar correctamente la página o para

Realizar ejemplo en HTML

<a> </a> Este elemento crea un enlace

<img src=”img/pic_trulli.jpg" alt=”Texto alternativo">

<img src=”img/pic_trulli.jpg" alt=”Texto alternativo”

<img src=”img/pic_trulli.jpg" alt=”Texto alternativo”

<img src=”img/pic_trulli.jpg" alt=”Texto alternativo”

Inician y terminan con <form> </form>

<form method=”get" action="salida.php">

action: archivo de destino

Inician y terminan con <form> </form>

Atributo Valor Descripción