Clase 1 Plataforma introducción a Diseño Web

INTRODUCCIONA DISEÑO WEB
Phd(c). Richard Mendoza
Docente

Son la forma más utilizada para recoger
información del usuario de un sitio web y
enviarla a aplicaciones que se ejecuten en el
servidor.
HTML solo
construir el
proporciona la forma para
formulario pero no su
funcionalidad.
Para crear un formulario utilizaremos la
etiqueta <FORM> y su cierre</FORM>
aparecer
sólo dos
Dos parámetros que deben
obligatoriamente:
action: normalmente es la url.
method: Normalmente tomará
valores: GET o SET.
FORMULARIOS

ELEMENTOS DE FORMULARIO
Para comenzar con la creación de un formulario, el primer paso es
indicar una etiqueta contenedora <form>, que incluirá toda la
información que se quiere recoger en ese formulario:

TIPOS DE DATOS
Para que un usuario pueda introducir información en un formulario,
requiere que se le indiquen una serie de campos que le permitan
introducir la información de la forma más cómoda y rápida posible.

• La etiqueta <input> tiene una gran cantidad de atributos
(algunos dependiendo del valor de type, que mostraremos más
adelante). Estos son los atributos que podemos utilizar de forma
general para prácticamente cualquier campo de entrada de
datos con la etiqueta
• <input>:
LA ETIQUETA “INPUT”

CUADRO DE TEXTO
La etiqueta HTML <input> puede tomar varios valores diferentes en su
atributo type para permitir al usuario introducir información de texto.

La etiqueta HTML <input> puede tomar varios valores diferentes en su
atributo type para permitir al usuario introducir información de texto.
CUADRO DE TEXTO
<form name="formulario" method="post" action="/send.php">

Teléfono:
<input type="tel" name="telefono" placeholder="+XX XXX XXXXXX" />

Email:
<input type="email" name="correo" placeholder="nombre@dominio.com" />

Página web:
<input type="url" name="web" placeholder="https://pagina.com/" />

Usuario:`
<input type="text" name="nombre" placeholder="Por ejemplo, Juan" />

Password:
<input type="password" name="pass" placeholder="Contraseña" />

<input type="hidden" name="informacion" value="72625" />
</form>

TEXTAREA
Por último, si queremos indicar un campo para escribir textos más
extensos, lo más apropiado es utilizar la etiqueta <textarea>, que tiene
también algunos atributos adicionales:

CAMPOS NUMERICOS
La primera de ellas es number, un tipo con el que podremos utilizar un
campo de texto donde el usuario sólo puede escribir números (o
carácteres como +, - o el número e, entre otros).

FECHA Y HORA
Los atributos type de fecha/hora existentes en los campos <input>
serían los dos primeros, mientras que los tres últimos se añadirán en
HTML5.1:

CASILLAS DE VERIFICACION
Las casillas de verificación se marcan para establecer una opción como
activada (verdadero). Los botones de radio se marcan para elegir sólo
una opción de varias posibles.

Si las casillas de verificación se nos quedan cortas o necesitamos
mostrar una lista más extensa de datos, quizás sería conveniente
utilizar una lista de selección, también llamada frecuentemente combo
o lista desplegable.
LISTAS DE SELECCION

A la etiqueta <select> le podemos aplicar el atributo multiple, de modo
que desaparecerá la posibilidad de desplegar la lista, mostrando
directamente las opciones en otro formato que hará posible pulsar la
tecla CTRL y marcar varias de las opciones de la lista.
LISTA SELECCIÓN MULTIPLE

SELECCIÓN DE COLOR
La etiqueta que utilizaremos para mostrar esta interfaz será <input>
con el atributo type a color. Ten en cuenta que el interfaz puede variar
dependiendo del sistema operativo:

HTML nos proporciona un campo de entrada de datos para seleccionar
archivos, adjuntarlos y enviarlos junto al resto del formulario. Esta
interfaz habitualmente se muestra como un botón «Examinar...» o
«Seleccionar archivo» junto a un texto del archivo seleccionado por el
usuario.
SELECCIÓN DE ARCHIVOS

ORGANIZACIÓN CAMPOS
En este apartado, vamos a comentar las siguientes etiquetas, que sirven
para organizar mejor los elementos de un formulario, reagrupándolos
por categorías o temáticas, mostrándolos de forma más ordenada

• El botón <input type="submit"> sirve para enviar el formulario
una vez el usuario ha rellenado todos sus campos y pulsa en este
botón. El texto por defecto del botón será Enviar (o equivalente
según el idioma). Podemos modificar el texto del botón mediante
el atributo value.
BOTON ENVIO FORMULARIO

La etiqueta <progress> muestra por defecto una barra de progreso
«infinita», que se mueve de izquierda a derecha sin parar.
La etiqueta <meter> nos permite la creación de medidores para
mostrar el nivel o estado de algún detalle.
MEDIDOR Y BARRA DE PROGRESO

CSS: CASCADE STYLE SHEET (HOJA
DE ESTILOEN CASCADA)
de estilos
CSS es un lenguaje de hojas
creado para controlar el aspecto o
presentación de los documentos
electrónicos definidos con HTML 5.
CSS es la mejor
contenidos y su
para
presentación y
crear páginas
forma de separar los
es
web
imprescindible
complejas.
CSS

5
• Separar la definición de los contenidos y
la definición de su aspecto presenta
numerosas ventajas, ya que obliga a
crear documentos HTML/XHTML bien
definidos y con significado completo
(también llamados "documentos
semánticos").
• Además, mejora la accesibilidad del
documento, reduce la complejidad
de su mantenimiento y permite
visualizar el mismo documento en
infinidad de dispositivos diferentes.
VENTAJAS CSS

A partir delaespecificaciónHTML 4.0ladefinición del
formato de un documento puedeestar aparte en un
archivoCSS
• Actualmente todos los navegadoresWeb soportan CSS
•CSSpermitecambiarlaaparienciay diseño detodo unsitio
web con sólo modificar un archivo deestilos
INTRODUCCION CSS

UnareglaCSSconstadedos partes:selector y declaraciones
•Un selector esnormalmente el elemento HTML alquesele
quiereaplicar un estilo
•Unadeclaraciónconsisteenun parpropiedad:valor,termina
conpunto ycoma(;)y seagrupanconllaves{ }
SINTAXIS CSS

Sepueden introducir comentariosen un archivo CSS
• /* Este esun comentario CSS*/
•Los comentariosson útilesparaexplicarelcódigoy son
ignoradospor losnavegadores
•CSSpermite definir selectorespersonalizadosllamados
identificadoresy clases
SINTAXIS CSS

Elidentificador esusado paradefinir elestilo de un solo y
único elemento
•El identificador usa el atributo “id” de un elemento HTML y
en CSSsedefinecon el símbolo #
•N O utilizar números al inicio del nombre de un
identificador
SINTAXIS CSS

•Unaclaseesutilizadaparadefinir los estilos deun grupo de
Elementos
•Unaclaseusaelatributo “class”deunelemento HTML y en
CSSsedefine con el símbolo .
SINTAXIS CSS

•Tambiénesposibleespecificarqueciertos elementossean
modificadospor unaclase en particular
• N O utilizar númerosalinicio del nombre de unaclase
SINTAXIS CSS

•Existen tres formas paradefinir estilos
•Estilos en línea
•Estilos internos
•Hojade estilo externa (archivo .css)
•Los navegadores web aplican el formato a un documento
HTML de acuerdo a los estilos
DEFINICION DE ESTILOS CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Estilos CSS</title>
<link rel="stylesheet" href="style.css">
<style>
h2 {
font-
family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sa
ns-serif;color: darkblue;
}
</style></head>
<body>
<p><h1 style="font-
family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans
-serif;color: salmon;">Titulo de la Empresa</h1></p>
<h2>Lorem ipsum </h2>
<h3>Lorem, ipsum </h3></body></html>
h3 {
color: dimgray;
font-
family: 'Segoe UI', Tahoma, Geneva, Verda
na, sans-serif;
font-size: 18px;
}
index.html
PRACTICA ESTILOS CSS
style.css

•Una hojade estilo externaesideal cuando los mismos
estilos son aplicadosadiferentesdocumentos HTML
•Con unahojadeestilo externasepuedecambiareldiseño
y formato detodo un sitio web
• Seutilizaelelemento “link”paraincluir unahojadeestilo

•Los estilos internos son utilizados cuando un solo documento
contieneestilosúnicos
•Los estilos internos se definen en la sección <head> utilizando la
etiqueta“style”

•Los estilos en línea se utilizan principalmente cuando se desea
redefinir elformato de algúnelemento en particular
• Seutilizael atributo “style” de un elemento HTML

https://i.emezeta.com/weblog/css3-cheatsheet/css3-cheatsheet-2017-emezeta.pdf

Verificar que todas las llaves abiertas
estén debidamente cerradas.
Nunca omitir puntos y comas.
para
Utilizar nombres representativos
todas las clases.
REGLAS GENERALES CSS

h1 {
font-size: 20px;
}
Selector
Valor
Propiedad
TERMINOLOGIA CSS

1. Por identificador
2. Por clase
3. Por nombre de
etiqueta
4. Por jerarquía
5. Por agrupación
MANEJO DE CSS

<p id="introduccion">Lorem ipsum</p>
#introduccion{
color: # 3300FF;
}
HTML
CSS
POR IDENTIFICADOR

<p class="grande">Lorem ipsum</p>
.grande{
font-size: 40px;
}
CSS
HTML
POR CLASE

<h1>Lorem ipsum</h1>
Verdana;
h1{
font-family:
}
CSS
HTML
POR NOMBRE DE ETIQUETA

<p>< strong>Lorem</strong> ipsum</p>
p strong{
color:#AAAAAA;
}
CSS
HTML
POR JERARQUIA

<p id="primero">Lorem ipsum</p>
<p id="segundo">Lorem ipsum</p>
# primero, # segundo{
color:#336600;
}
CSS
HTML
POR AGRUPACION

index.html style.css
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="style.css"></head>
<body>
<header>
<h1 id="header-title">Titulo de la Empresa</h1>
</header>
<main>
<section>
<h3>Titulo del Articulo</h3>
</section>
<article>
<div class="section-title">
<h2>Lorem ipsum </h2></div>
<h2>Lorem ipsum</h2>
</article></main>
<aside>
<p id="primero">Lorem ipsum </p>
<p id="segundo">Lorem ipsum </p>
</aside>
<footer><p><strong>Copyright</strong> Derechos reservados 2021</p>
</footer></body></html>
#header-title {/*MANEJO CSS POR IDENTIFICADOR*/
color:#035AA6
; font-
family: Impact, Haettenschweiler, 'Arial Narrow Bold',
sa ns-serif;
font-size: 20px;
}
.section-title {/*MANEJO CSS POR CLASE*/
color: #E171B0;
font-
family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
}
h3 {/*MANEJO CSS POR ETIQUETA*/
color: #049DBF;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
}
p strong{/*MANEJO CSS POR JERARQUIA*/
color:#035AA6;
}
#primero, #segundo{/*MANEJO CSS POR AGRUPACION*/
color:#035AA6;
}

• color
• font-family
• font-size
• font-weight
• font-style
• text-decoration
PROPIEDADES
BASICAS: ESTILOS
DE TEXTO
Color del
texto en valor
hexadecimal
Familiatipográfica
(Arial,Verdana,
etc.)
Valor en pixeles
que determina
el tamaño del
texto

• color
• font-family
• font-size
• font-
weight
• font-style
• text-
decoration
PROPIEDADES
BASICAS: ESTILOS
DE TEXTO
Propiedad que determina si
el texto es normal o en estilo
bold. Valoresposibles:
• bold
• normal
• 100
• 900

• color
• font-family
• font-size
• font-
weight
• font-style
• text-
decoration
PROPIEDADES
BASICAS: ESTILOS
DE TEXTO
Propiedad que determina si
el texto es normal o en estilo
itálico. Valoresposibles:
• italic
• oblique
• normal

• color
• font-family
• font-size
• font-
weight
• font-style
• text-
decoration
PROPIEDADES
BASICAS: ESTILOS
DE TEXTO
Propiedad que
proporciona estilos
adicionales como:
• underline
• overline
• line-through
• none

Una pseudoclase CSS es una
palabra clave que se añade a los
selectores y que especifica un
estado especial del
seleccionado. Por
elemento
ejemplo,
:hover aplicará un estilo cuando
el usuario haga hover sobre el
elemento especificado por el
selector.
PSEUDO-CLASSES

Al igual que las pseudo-classes,
los pseudo-elementos se añaden
a los selectores, pero en cambio,
no describen un estado especial
sino que, permiten añadir estilos
a una parte concreta del
ejemplo, el
documento. Por
pseudoelemento ::first-line
selecciona solo la primera línea
del elemento especificado por el
selector.
PSEUDOELEMENTOS

index.html style.css
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Estilos de Texto</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Titulo de la empresa</header>
<nav>
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Quienes somos</a></li>
<li><a href="">Mision</a></li>
<li><a href="">Vision</a></li>
<li><a href="">Objetivos Corporativos</a></li>
<li><a href="">Contactenos</a></li>
</ul>
</nav>
<h1>Titulo de Texto</h1>
<h2>Lorem ipsum ?</h2></body></html>
h1 {
font-size: 18px;
font-weight: bold;
font-style: italic;
text-decoration:line-through;
}
.nav{
font-
family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida
Gra nde', 'Lucida Sans Unicode', Geneva, Verdana, sans-
serif;
list-style: none ;
}
.nav a{
color: chocolate;
text-decoration: none;
}
.nav a:hover{
background-color:yellowgreen ;
color:rgb(194, 41, 21);
text-decoration: none;
}
.nav a::after{
content: " | ";
}

57
“En un futuro
cercano, la web
será la copia
maestra del
conocimiento
humano. Tenemos
que encontrar
formas de utilizar
ese conocimiento.”
Håkon Wium Lie

Clase 1 Plataforma introducción a Diseño Web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Clase 1 Plataforma introducción a Diseño Web

Similar a Clase 1 Plataforma introducción a Diseño Web (20)

Más de Richard Eliseo Mendoza Gafaro

Más de Richard Eliseo Mendoza Gafaro (20)

Último

Último (20)

Clase 1 Plataforma introducción a Diseño Web