Formularios y subida al servidor
Clase 03
Formularios
Un formulario HTML es una sección de un documento que contiene texto,
código, elementos especiales llamados controles: casillas de verificación
(checkboxes), botones de opción (radio buttons), menúes, etc.; y rótulos
(labels) en esos controles. Los usuarios normalmente “completan” un
formulario modificando los valores de sus controles (introduciendo texto,
seleccionando objetos de un menú, etc.), antes de enviar el formulario a un
agente para que lo procese (por ej.: a un servidor web, a un servidor de
correo, etc.)
Formularios: <form>
Se utiliza la etiqueta contenedora
<form>, que incluye todos los campos
necesarios para su funcionamiento.
Hay tipos de campos adecuados para
cada tipo de dato.
Existe un control especial, el botón,
que puede enviar los datos del
formulario al servidor o limpiar el
contenido de sus campos.
Formularios: atributos action y method
La etiqueta <form> admite diversos
atributos. Entre ellos:
● Action: define el tipo de acción que se
llevará a cabo (enviar a un mail o procesar
su contenido con un script). También
podemos indicar la URL a la que se enviará
la petición HTTP con toda la información
del formulario.
● Method: indica si la petición HTTP será
GET o POST
Formularios: <label>
<label> : se usa para especificar la etiqueta (o nombre) del campo del
formulario. Es información para el usuario.
Admite el atributo for, que debe tener el mismo valor que el atributo id del
campo (input, select o textarea) al que hace referencia la etiqueta.
Formularios: <input>
Atributos del tag <input>:
● type: este valor puede tener muchos valores: text, email, checkbox, color, date, file, hidden, etc. en
función del tipo de campo que queramos.
● id: este atributo es obligatorio si en el elemento label tiene un atributo for, en tal caso deberá
contener un identificador único en la página.
● name: representa el nombre asignado al campo cuando se envía la petición HTTP.
● size: define el tamaño de la caja de texto en número de caracteres visibles.
● maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede ser escrito
en el campo.
● value: representa el valor que se asignará al campo cuando se envíe la petición HTTP. Permite
asignar un valor por defecto al campo.
Formularios: atributo type
El atributo type de la etiqueta valida el tipo de dato de entrada:
● text: permite ingresar una cadena alfanumérica.
● number: sólo permite seleccionar un número.
● date: ofrece un calendario para cargar la fecha.
● password: oculta el texto que se está ingresando en el campo.
● email: valida que sea un mail.
● url: valida que sea una url.
● image: define una imagen como botón de envío.
Formularios: atributo type
● tel: define un campo para ingresar un número de teléfono.
● file: define un campo de selección de archivo.
● button: activa código JavaScript cuando se hace clic en él.
● checkbox: permite elegir varias opciones.
● radio: permite elegir una opción entre varias posibles.
● range: define un control de rango (como un control deslizante).
● submit: botón enviar.
Subida a un servidor
Clase 03
Netlify
Hosting gratuito que permite probar rápidamente nuestro sitio web.
Requiere registro.
Para agregar el sitio basta con arrastrar la carpeta que contiene el sitio.
https://app.netlify.com/drop
Tutoriales sobre cómo subir a Netlify:
● Netlify Drop. Introduction: https://youtu.be/-LRlQ_jaLAU
● Netlify Tutorial. Deploy a new site just by Drag and Dropping:
https://www.youtube.com/watch?v=vywDFg2uIxY
GitHub Pages
1. Cómo publicar un sitio web gratis con
Github Pages:
https://m.youtube.com/watch?v=SnQ
TURNAUqY&feature=youtu.be
2. Curso Git y GitHub:
https://www.youtube.com/watch?v=p
tXiQwE535s&list=PLoCpUTIZIYORkDz
YwdunkVf-KIqGjyoot&ab_channel=Pr
ogramarDesdeCero
¿Cómo pensar un proyecto
web?
Clase 03
HTML
HyperText Markup Language: Lenguaje de marcado de hipertexto.
Define la estructura, semántica y contenido de las páginas web.
El navegador (cliente) interpreta el HTML y lo representa en pantalla. Permite agregar texto,
imágenes, enlaces, tablas, listas, formularios, etc.
No todos los navegadores son capaces de interpretar un mismo código de una manera unificada
(siempre debemos probar que funcione en la mayoría de ellos).
Utiliza etiquetas (tags) que definen la estructura del documento. Texto plano con extensión .html
HIPERTEXTO:
Sistema que permite enlazar fragmentos de textos entre sí. Permite que la lectura no sea lineal, sino
que el usuario acceda a la información a través de los ítems relacionados.
¿Cómo pensar un proyecto web?
A nivel conceptual, tenemos que tener clara la idea de negocio. Se trata
“simplemente” de hacer un ejercicio de análisis y reflexión.
1. ¿Cuál es el objetivo a cumplir con este proyecto?
2. ¿Quién es tu público objetivo? ¿Quién eres tú para merecerlos?
3. ¿Cuáles son tus palabras clave?
¿Cuál es el objetivo a cumplir con este proyecto?
En ello está basado todo tu negocio. Si
vas a montar una tienda de calzado,
seguro que tienes clarísimo que tu
objetivo es vender calzado. Sin
embargo, la gente piensa que su
objetivo es tener miles de visitas, o
posicionarse en el primer lugar de
Google. Sí, eso está muy bien, pero
sólo para vender zapatos.
¿Quién es tu público objetivo?
Es clave saber quién es tu audiencia para dirigirte
a ella. Ahí radica la diferencia: recibir tráfico
cualificado, interesado realmente en lo que
ofreces. De lo contrario, podrás conseguir miles
de visitas, pero muy pocos clientes interesados.
¿Quién eres tú para merecerlos? Es importante
reflexionar sobre qué tienes tú o tu producto o tu
servicio que te haga diferente del resto: ¿por qué
habría yo de elegirte a ti y no al de al lado?
Identificar los beneficios que obtendrá la persona
que te compre, contrate o lo que sea que
ofrezcas.
¿Cuáles son tus palabras clave?
Las palabras clave son el alimento del que se
nutre tu blog y tu sitio web. Tienes que
tenerlas claras. Algo que haga referencia, a tu
cliente ideal, a tu especialidad o lo que te
hace diferente, o a algún beneficio que posea
tu producto. Esto último es fruto de
identificar beneficios y nichos de mercado.
Estructura genérica de un sitio web
Tipos de estructura de un sitio web
1. Pensar el número de páginas en la estructura
del sitio web.
2. Pensar los niveles de estructura de un sitio
web.
3. Definir la estructura del sitio web a nivel
conceptual.
4. Definir la estructura del sitio web a nivel técnico
(Maquetar):
a. Hacer el árbol de la estructura de un sitio web.
b. Hacer estructura de un sitio web amigable para SEO.
c. Utilizar enlaces internos para mejorar la estructura del
sitio web.
Etiquetas semánticas
➔ <header> Se coloca en el body y es la cabecera visual de la página o de una
sección (logotipo, título, etc.). No confundir con , que es el encabezado del
documento HTML.
➔ <nav> Apartado de navegación (enlaces de secciones, categorías, etc...).
También permite dividir en categorías una sección.
➔ <main> Contenido principal del body
➔ <footer> Pie de página (del documento completo) o de una sección.
➔ <section> Define una sección en un documento
➔ <aside>Agrupación de contenido no relacionado con el tema principal del
documento. Suele usarse para agregar publicidad.
➔ <article> Artículo. Parte principal de un escrito (posts en blogs, artículos en
diarios, mensajes en foros, comentarios, etc.)
➔ <address> Agrupación con la información de contacto del autor del artículo o
documento.
