Sei sulla pagina 1di 25

FUNCIONES en JavaScript

Semana 06 - Objetivos:

• Conocer la sintaxis de JavaScript.

• Creación de Slider con JavaScript.

• Programar funciones en los eventos Onclick y Onload.

• Validar formularios de contacto.


TALLER DE PÁGINAS WEB

Los tres tipos de lenguajes para la página


A continuación, vamos a resumir los tres tipos de lenguaje que se fueron utilizando en este
taller:

1. El lenguaje HTML (HyperText Markup Language) nos aporta la estructura básica de los
sitios, famoso por sus etiquetas conocido por todos los que se han inmerso en el desarrollo de
páginas web.

2. Por otro lado, CSS u Hojas de Estilo en Cascada (Cascading Style Sheets) se utiliza para
controlar la presentación, el formato, y el diseño de nuestra aplicación. Gracias a ella podemos
dar forma al estilo que queremos que se muestre.

3. JavaScript se utiliza para controlar el comportamiento de los diferentes elementos, esto es,
aporta funcionalidad, dinámica, a nuestros elementos.

Ing. en Sistemas Ulises Lapa Asto. 2


TALLER DE PÁGINAS WEB

Creación de Slider con solo CSS


1. Primero grabaremos en la subcarpeta Imágenes cuatro imágenes con el nombre de
slide_1. jpg hasta slide_4 .jpg las que utilizaremos en la página web.

2. Luego escribimos la estructura básica en HTML. y generemos una aplicación con el


siguiente código y lo grabaremos con el nombre paginaSlider2.html.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Página Slider 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<! -- escribimos la ruta del archivo de estilos CSS-->


<link rel="stylesheet" href="estilos/estiloSlider2.css" type="text/css">
</head>
<div class="slider">
<ul>
<li> <img src="imagenes/slide_1.jpg" alt="">
</li>

<li> <img src="imagenes/slide_2.jpg" alt="">


</li>

<li> <img src="imagenes/slide_3.jpg" alt="">


</li>

<li> <img src="imagenes/slide_4.jpg" alt="">


</li>
</ul>
</div>
</body>
</html>

Ing. en Sistemas Ulises Lapa Asto. 3


TALLER DE PÁGINAS WEB

3. Ahora crearemos la hoja de estilo que manejara los desplazamientos y cambios de


tiempo de las imágenes y lo grabaremos con el nombre estiloSlider2.css.
Realizamos este código de la siguiente manera:

/* hoja de estilo del slider2 de imágenes de tamaño 1500 x 500 */

. slider {
width: 95%;
margin: auto;
overflow: hidden;
}

. slider ul {
display: flex;
padding: 0;
width: 400%;

animation: cambio 20s infinite alternate linear;


}

. slider li {
width: 100%;
list-style: none;
}

. slider img {
width: 100%;
}

@keyframes cambio {

0% {margin-left: 0;}
20% {margin-left: 0;}

25% {margin-left: -100%;}


45% {margin-left: -100%;}

50% {margin-left: -200%;}


70% {margin-left: -200%;}

75% {margin-left: -300%;}


100% {margin-left: -300%;}

Ing. en Sistemas Ulises Lapa Asto. 4


TALLER DE PÁGINAS WEB

4. Termina la codificación veremos un slider con 4 páginas que van alternando de forma
automática, como se muestra en la siguiente figura.

Como vemos también se puede hacer animaciones sin necesidad del lenguaje
JavaScript, se sugiere no usar muchas imágenes para no hacer muy pesada la carga
de la página web

Ing. en Sistemas Ulises Lapa Asto. 5


TALLER DE PÁGINAS WEB

Cómo enviar mensajes por WhatsApp desde mi sitio web

Enviar mensajes por WhatsApp desde un sitio web es posible gracias a una API
que provee la misma compañía, existe una función llamada «Clic para chatear»
que puedes utilizar en tu sitio web para iniciar una conversación en WhatsApp Web
o a través de la aplicación móvil.

Si en tu sitio web quieres emplear un canal de comunicación nuevo para ventas y


decides utilizar WhatsApp, puedes crear una URL dinámica en donde el campo «text»
corresponde a un nombre de producto, servicio o consulta facilitando la comunicación
entre ambas partes.

Cómo funciona el botón “clic para chatear”


Como la compañía explica en su documentación y preguntas frecuentes acerca de su API
existen dos parámetros que puedes utilizar para iniciar una conversación desde un enlace:

• Un número telefónico y/o mensaje, quedando, por ejemplo:

https://api.whatsapp.com/api/send?phone=51987654321

El formato correcto debe ser el código país (Perú =51) junto al número de teléfono sin guiones,
espacios o símbolos de esta manera si el número telefónico es: +51 (9) 87654321 debes
utilizar 51987654321 tal cual aparece en el ejemplo de arriba.

También es posible adjuntar un mensaje predeterminado para iniciar una conversación, de la


siguiente manera:

https://api.whatsapp.com/send?phone=51987654321&text=Me%20gustaría%20saber%20el%2
0precio%20del%20sitio%20web

Los símbolos que aparecen entre las palabras «%20» corresponden a un espacio en blanco
codificado en una url, el envío de mensaje también puede ser sin utilizar un número, en el caso
de que quieras enviar un mensaje a un contacto:

Creando la página en HTML


1. Primero crearemos la estructura principal en HTML, el cual grabaremos con el nombre
de paginaWhatsapp.html, con el siguiente código.

Ing. en Sistemas Ulises Lapa Asto. 6


TALLER DE PÁGINAS WEB

<!DOCTYPE html>
<html lang="es">
<head>
<title> Mensajería </title>
<! -- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<! -- Enalce de nuestra hoja de estilos -->
<link rel="stylesheet" href="estiloWhatsapp.css">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h2>Mensajería de WhatsApp</h2><br>
<h3>Canal de comunicación de ventas</h3>
</header>

<section id="seccion">
<article>
<header>
<h3>Click para chatear:</h3>
<! -- utilizar un link o un botón -->
<img src="imagenes/Whatsapp1.png" />
</header>
<a title="Click para chatear"
href="https://api.whatsapp.com/api/send?phone=51992134567" target="_blank"
rel="noopener">Envíanos un mensaje para un chat</a>
</article>

<article>

<header>
<h3>Mensaje automatico:</h3>
<! -- Si quieres adjuntar un mensaje predeterminado: -->
<img src="imagenes/Whatsapp2.png" />
</header>

<a title="Click para mensaje"


href="https://api.whatsapp.com/send?phone=51992134567&text=Me%20gustaría%20saber%2
0el%20precio%20del%20sitio%20web" target="_blank" rel="noopener"> Clic aquí y
envíanos un mensaje automático</a>
</article>
</section>
</div>
</body>
</html>

Ing. en Sistemas Ulises Lapa Asto. 7


TALLER DE PÁGINAS WEB

2. Luego escribimos la hoja de estilo y lo guardaremos con el nombre


estiloWhatsapp.css, con las siguientes configuraciones:

/* Creando los estilos básicos */


*{ margin: 0px;
padding: 0px;
}
/* Nueva jerarquía para cabeceras */
h2 {
font: 20px verdana, sans-serif;
}
h3 {
font: 18px Tahoma, sans-serif;
}
/* Declarando los nuevos elementos*/
header, section{
display: block;
}
/* Creando la caja principal */
#agrupar {
width: 900px;
margin: 15px auto;
}
/* La cabecera Whatsapp*/
#cabecera {
background: LightSeaGreen;
padding: 20px;
text-align:left;
color:white;
margin: 0 auto;
}
/* Diseño de la sección artículo. */

article {
background: url(imagenes/fondoWhatsapp1.jpg);
padding: 20px;
margin-bottom: 15px;
}

article >a {
color: LightSeaGreen; /*cambia de color */
text-decoration: none;
font: 14px Tahoma
}

article >a:hover{
color: white; /* cambia a color blanco cuando el mouse pasa
encima*/
}

Ing. en Sistemas Ulises Lapa Asto. 8


TALLER DE PÁGINAS WEB

3. Finalmente nos mostrara la siguiente ventana de mensajería del canal de comunicación


de ventas de la siguiente manera:

4. Al hacer clic en el mensaje automático nos mostrar la siguiente interfaz con el mensaje
predeterminado para poder comunicarnos con los clientes.

Ing. en Sistemas Ulises Lapa Asto. 9


TALLER DE PÁGINAS WEB

5. Finalmente nos pedirá hacer los siguientes pasos para entablar un chat on line, como
lo muestra la siguiente imagen.

6. De esta manera podremos realizar la interacción con nuestros clientes a través de la


App. de mensajería.

Ing. en Sistemas Ulises Lapa Asto. 10


TALLER DE PÁGINAS WEB

Códigos de JavaScript para insertar en páginas y blogs

Las dos barras invertidas al comienzo de una línea, significa que esta es solo un
comentario, se pueden eliminar completamente.

Mostrar mensajes de bienvenida y despedida en una página


Función muy utilizada para mostrar un saludo o bienvenida cuando el usuario carga la página y
es opcional mostrar otro cuando sale de la página o cierra el navegador.
Para eso se usan las funciones ONLOAD y ONUNLOAD.

<script>
window.onload=function(){alert('Bienvenido a esta página');}
window.onunload=function(){alert('Vuelva en otro momento');}
</script>

Si la página utiliza el evento onload para iniciar otras funciones es necesario incluir la anterior
de la siguiente forma: párrafo con un identificador nombrado: 'link1' (puedes darle otro nombre):

window.onload = function()
{
funcion1() {alert ('Bienvenido a esta página');}
funcion2();
funcion3();
}

Retrasar la ejecución de una función


Con setTimeout podemos aplazar una función, cierto número de segundos.
En el siguiente ejemplo se retrasa 5 segundos la aparición de un cuadro de alerta con un
mensaje, después que termina de cargar la página.

function alerta(){ alert('mensaje');


}
window.onload = function(){ setTimeout('alerta()',5000);
}

Ing. en Sistemas Ulises Lapa Asto. 11


TALLER DE PÁGINAS WEB

Añadir efectos a los vínculos


1- Muestra un cuadro de alerta con un mensaje al poner el ratón encima de un vínculo.

<a href="http://tu-sitio.com"
onmouseover="javascript:alert('Mensaje');return false">Vínculo</a>

2- Muestra un mensaje de alerta al hacer clic sobre un vínculo, antes de enviar al usuario al
destino.

<a href="http://tu-sitio.com"
onclick="javascript:alert('Mensaje');">Vínculo</a>

3- Aumenta el tamaño del texto del vínculo al poner el ratón encima, al quitarlo restaura el texto
a su tamaño original.

<div id="vinc"><a href="http://tu-sitio.com"


onmouseover="javascript:
void(document.getElementById('vinc').style.fontSize='3em')"
onmouseout="javascript:
void(document.getElementById('vinc').style.fontSize='1em')">
Vínculo</a></div>

4- Mensaje de confirmación antes de enviar el usuario a una página. Pruébalo: Vínculo

<a href="javascript:if (confirm('Quieres entrar a NorfiPC?'))


{parent.location='http://norfipc.com/index.html';};">Vínculo</a>

Contador de visitantes engañoso.


5- Script curioso pero engañoso para exagerar la supuesta cantidad de visitantes de una
página. Por ejemplo, Usted es el visitante 3000 de esta página.

<script>
var ran
ran = Math.round(Math.random() *50000)

Ing. en Sistemas Ulises Lapa Asto. 12


TALLER DE PÁGINAS WEB

document.write("Usted es el visitante " + ran + " de esta página.")


</script>

Botón para imprimir página

<input type="button" value="Imprime esta página" onclick="window.print()">

Crear restricciones al uso del ratón


Deshabilitar el uso del clic derecho por completo

<script>
document.oncontextmenu = function(){return false}
</script>

Impedir la selección y la copia de texto en una página

<script>
window.onload = function()
// Para internet Explorer
{document.onselectstart = function(){return false;}
// Para Firefox
document.onmousedown = function(){return false;}}
</script>

Acción al dar un clic derecho

Mostrar un mensaje o ejecutar otra acción al dar un clic derecho.

<script>
//<! [CDATA[
function right(e) {
if (navigator.appName == 'Netscape' && e.which == 3) {

Ing. en Sistemas Ulises Lapa Asto. 13


TALLER DE PÁGINAS WEB

alert ('Prohibido clic derecho');


return false;} else
if (navigator.appName == 'Microsoft Internet Explorer'
&& event.button==2) {
alert ('Prohibido clic derecho'); return false;} return true;}
document.onmousedown = right;
//]]>
</script>

Agregar crédito al copiar contenido de la página


Cada vez que alguien copie algún bloque de texto de la página, automáticamente le agregamos
nuestro crédito (no se usa en esta página).

<script>
document.body.oncopy = function() {
alert('Todos los derechos reservados. NorfiPC © 2019');
return false;};
</script>

Mostrar la fecha y hora


Mostrar la fecha y hora en la barra de estado con un mensaje. (Solo Internet Explorer)

<script>
function hora () {
var DateString=(new Date()).toString();
self.status= DateString.substring(0,3+DateString.lastIndexOf(':'))+
"Cualquier mensaje";
setTimeout("hora ()",200);}
hora ()
</script>

Ing. en Sistemas Ulises Lapa Asto. 14


TALLER DE PÁGINAS WEB

Identificar el navegador de los visitantes


Código Browser Sniffer, identifica el navegador del usuario y lo envía a la página preparada
para dicho navegador.

<script>
if(navigator.appName.indexOf("Netscape") != -1){
location="netscape.html";}
if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1){
location="internet-explorer.html";}
</script>

Establecer como página de inicio


Propone al usuario establecer esta página como su página de inicio (Solo Internet Explorer)

<a href="javascript:if
(document.all) {document.body.style.behavior='url(#default#homepage)';
document.body.setHomePage('http://norfipc.com');};">
Hazme tu página de inicio</a>

Guardar una página en los favoritos del navegador


Vinculo que permite al lector agregar una página a sus favoritas.
Se usa un código Browser Sniffer o sea si el navegador es Internet Explorer se ejecuta una
función diferente que si es Firefox.

<a href="javascript:if(navigator.appName.indexOf('Microsoft Internet


Explorer')!=-1){window.external.AddFavorite
(''+window.document.URL,''+window.document.title);}
if (navigator. appName.indexOf('Netscape')! =-1) {window.sidebar.addPanel
(''+window.document.title,''+window.document.URL,'')}
else{parent.location=(location.href);}">Guardar</a>

Ing. en Sistemas Ulises Lapa Asto. 15


TALLER DE PÁGINAS WEB

Crear validaciones básicas:

Con estos atributos, podemos crear validaciones básicas en nuestros campos de entrada de
datos, obligando al usuario a rellenar un campo obligatorio, forzando a indicar valores entre un
rango numérico o permitiendo sólo textos con un tamaño específico, entre otros. El código
HTML es así

<form name="formulario" method="post"


action="http://pagina.com/send.php">

<! -- Nombre de usuario. Campo obligatorio, entre 5-40 carácteres -->


Usuario: <input type="text" name="nombre" placeholder="Por ejemplo,
Juan" minlength="5" maxlength="40" required pattern="[A-Za-z0-9]+"
title="Letras y números. Tamaño mínimo: 5. Tamaño máximo: 40">

<! -- Contraseña. Campo obligatorio, mínimo 11 carácteres -->


Password: <input type="password" name="pass" placeholder="Contraseña"
minlength="11" required pattern="[A-Za-z0-9]+">
</form>

Además, utilizando las pseudoclases CSS de validación: valid e :invalid podemos aplicar estilos
a los campos <input> y <textarea> teniendo en cuenta su validación. Aplicando el siguiente
código CSS se mostrará un fondo verde o rojo, dependiendo de si cumple o no la validación,
respectivamente:

input:valid, textarea:valid {
background:green;
}
input:invalid, textarea:invalid {
background:red;
}

Ing. en Sistemas Ulises Lapa Asto. 16


TALLER DE PÁGINAS WEB

Expresiones regulares para crear validaciones:

Una expresión regular es una cadena de texto que representa un posible patrón de
coincidencias, que aplicaremos mediante el atributo pattern en los campos que queramos
validar.
Para ello hay que conocer algunas características básicas de las expresiones regulares:

Expresión Carácter especial Denominación Descripción


regular
. Punto Comodín Cualquier carácter (o texto de
tamaño 1)
A|B Pipe Opciones lógicas Opciones alternativas (o A o B)
C(A|B) Paréntesis Agrupaciones Agrupaciones alternativas
(o CA o CB)
[0-9] Corchetes Rangos de carácteres Un dígito (del 0 al 9)
[A-Z] Una letra mayúscula de la A a la Z
[^A-Z] ^ en corchetes Rango de exclusión Una letra que no sea mayúscula de
la A a la Z
[0-9]* Asterisco Cierre o clausura Un dígito repetido 0 ó más veces
(vacío incluido)
[0-9]+ Signo más Cierre positivo Un dígito repetido 1 ó más veces
[0-9]{3} Llaves Coincidencia exacta Cifra de 3 dígitos (dígito
repetido 3 veces)
[0-9]{2,4} Coincidencia (rango) Cifra de 2 a 4 dígitos (rep.
de 2 a 4 veces)
b? Interrogación Carácter opcional El carácter b puede aparecer o
puede que no
\. Barra invertida Escape El carácter. literalmente (no como
comodín)

Ing. en Sistemas Ulises Lapa Asto. 17


TALLER DE PÁGINAS WEB

Librerías de JavaScript

Según los datos estadísticas del servicio de W3Techs, el 75% de todos los sitios de internet
usan librerías de JavaScript. De ellas las más populares son las siguientes:

JQuery
JQuery es la más popular de las librerías JavaScript de internet. Es un archivo que contiene
varias instrucciones, que permiten que el navegador ejecute muchas funcionalidades
adicionales.

JQuery es muy empleada para hacer cambios de forma dinámica en el DOM (estructuras de las
páginas), sin tener que recargarlas y agregarles gran cantidad de efectos y animaciones.
Podemos cambiar el tamaño, la forma o el estilo de cualquier elemento de una página.

✔ Sitio web: http://jquery.com/

Bootstrap
Bootstrap es un framework web (marco de trabajo) libre y de código abierto, muy popular usado
para crear sitios web.

Ofrece plantillas HTML, hojas de estilo CSS, fuentes y una librería para adicionar
funcionalidades adicionales a las páginas, por ejemplo, botones, menús, barras de navegación,
paneles, visores de imágenes, etc.

Se apoya en JQuery, por lo que es necesario cargar esta librería previamente. Bootstrap es
uno de los proyectos más populares en Github.

✔ Sitio web: http://getbootstrap.com/

✔ Proyecto en Github: https://github.com/twbs/bootstrap

✔ Carga desde este sitio una página creada con Bootstrap.

Ing. en Sistemas Ulises Lapa Asto. 18


TALLER DE PÁGINAS WEB

MooTools
Es un JavaScript framework (marco de trabajo) modular, orientado a objetos.
Proyecto inspirado en Prototype, permite agregar efectos simples y básicos a las páginas,
usando una librería de pequeño tamaño, que se puede personalizar completamente.
Sitio web: http://mootools.net/

ASP.NET Ajax
Librería JavaScript basada en ASP.NET, desarrollada por Microsoft. La usan todos los sitios de
esta empresa y varios sitios de internet.

Prototype
Es un JavaScript framework, enfocado principalmente en creación de contenido dinámico y
actualizaciones asíncronas en páginas y aplicaciones web. Su librería es usada por varios
proyectos.
Sitio web: http://prototypejs.org/

Script.aculo.us
Librería JavaScript basada en Prototype, al que agrega efectos visuales, controles y utilidades.
Su desarrollo no está actualizado.

AngularJS
Librería JavaScript de código abierto mantenida por Google y varios desarrolladores
independientes, para crear aplicaciones web de una sola página.

AngularJS es uno de los proyectos más populares en Github.

Precauciones al usar las librerías y scripts en las páginas


Las librerías JavaScript al igual que los scripts que proporcionan las redes sociales y otros
servicios de internet, pueden ser en algunos casos letales.

Antes de decidirnos a insertar cualquier script externo en las páginas de un sitio web, debemos
de conocer que siempre existe el riesgo que paralice por completo o bloquee la carga de la
página donde se encuentra.

Si dicho script no está disponible o existe retraso en su entrega, por algún motivo como lentitud
en la red o no disponibilidad del servidor donde se aloja, nuestra página puede bloquearse
completamente.

Para evitarlo tenemos las siguientes alternativas:

Ing. en Sistemas Ulises Lapa Asto. 19


TALLER DE PÁGINAS WEB

Para evitarlo tenemos las siguientes alternativas:

1- Enlazar los scripts o librerías desde un servicio rápido y estable que emplee un
CDN.

Un servicio CDN (Content Delivery Network), es un servicio que posee varios


servidores o centros de datos repartidos geográficamente.

Más abajo se pueden conocer cuáles son los más rápidos y eficientes.

2- Cargar el script se forma asíncrona.

El modo asíncrono, opción que admiten todos los navegadores modernos, permite que
el archivo o librería sea descargado de forma paralela a otros recursos, por lo que, si
no está disponible o existen retrasos, no afectará la carga de la página.

Para eso es necesario agregar la propiedad "async" a la etiqueta de los scripts de la


siguiente forma:

<script async src="direccion-url-script.js"></script>

Lamentablemente muchas librerías no admiten esta opción.

3- Alojar el script en nuestro servidor en los casos en que lo permita.

Esta puede ser la mejor opción, desde que permite un mayor rendimiento.

No está disponible para muchos casos en los que se usan servicios de alojamiento
gratis.

1) Librería JQuery

Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos) creados por
desarrolladores de todo el mundo. Estos plugins resuelven situaciones concretas dentro del
maquetado de un sitio, por ejemplo: un menú responsive, una galería de fotos, un carrousel de
imágenes, un slide, un header que cambia de tamaño, el deslizamiento del scroll al hacer clic
en un botón (anclas HTML), la transición entre páginas y miles de efectos más.

Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un
archivo .js que se puede descargar desde el sitio oficial: https://jquery.com/ colocar en una
carpeta js y luego vincular con una etiqueta <script>, por ejemplo:

<script src="js/jquery-3.2.1.min.js"></script>

Ing. en Sistemas Ulises Lapa Asto. 20


TALLER DE PÁGINAS WEB

Ese vínculo conviene colocarlo dentro del body y hacia el final del HTML para no demorar la
carga de los contenidos. Si descargamos el archivo y lo vinculamos de esa manera, debemos
subir el archivo a nuestro hosting.

Otra forma de vincular la librería es utilizando el servidor de Google. De esta manera no


necesitamos descargarla ni subirla a nuestro servidor. En ese caso, el código es el mismo, pero
con ruta absoluta:

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

La página donde Google ofrece los vínculos a diferentes recursos es la


siguiente: https://developers.google.com/speed/libraries/#jquery

Los archivos. min son archivos que están optimizados (con el código comprimido) y no son
editables, se usan en producción cuando se considera que no es necesario hacerle
modificaciones. La ventaja es que son más livianos y por lo tanto cargan más rápido.

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

Ing. en Sistemas Ulises Lapa Asto. 21


TALLER DE PÁGINAS WEB

Usando iconos de las Librerías

Cómo empezar a usar los iconos


Hay varias maneras de implementarlos, aquí veremos una de ellas.
1. Descargar el kit de CSS y Font
2. Extraer los archivos .css en nuestra carpeta CSS y los archivos de fuente en
nuestra carpeta Fonts.
3. Copiar y pegar esta línea de código dentro de la etiqueta <head> de nuestro
html, poniendo la ruta correcta al archivo .css que se indica.
<link rel=” stylesheet” href=” tucarpeta /css /font-awesome.min.css “>
4. Ver todos los ejemplos que ofrece Font Awesome

Font Awesome
Font Awesome está diseñado para ser utilizado con elementos en línea y recomendamos
mantener un elemento HTML coherente para hacer referencia a ellos en su proyecto. Nos
gusta la <i>etiqueta por brevedad y por el hecho de que la mayoría de la gente está usando
<em></em>para el texto semántico enfatizado / en cursiva en estos días. Si esa no es tu taza
de té, usar a <span>es más correcto semánticamente.

Debe conocer dos bits de información para hacer referencia a un ícono:

1. su nombre, con el prefijo fa-


2. y el estilo que desea usar como prefijo correspondiente

<i class="fas fa-camera"></i> <! - el prefijo de estilo 1) de este icono ==


fas y 2) nombre del icono == camera -->
<i class="fas fa-camera"></i> <! - usando un elemento <i> para hacer
referencia al icono ->
<span class="fas fa-camera"></span> <! - usando un elemento <span> para hacer
referencia al icono ->

Estilo Disponibilidad Prefijo de estilo Ejemplo Representación

Sólido Gratis fas <i class="fas fa-camera"></i>

Regular Pro requerido far <i class="far fa-camera"></i>

Ligero Pro requerido fal <i class="fal fa-camera"></i>

Las marcas Gratis fab <i class="fab fa-font-awesome"></i>

Ing. en Sistemas Ulises Lapa Asto. 22


TALLER DE PÁGINAS WEB

El fa prefijo ha quedado en desuso en la versión 5. El nuevo valor predeterminado es el fas estilo sólido
y el fab estilo para las marcas.

¿Qué posibilidades ofrece?

Como hemos dicho, se trata de una fuente más, con lo que podemos jugar con todas las
posibilidades que ofrece una tipografía. Por ejemplo:

Tamaño

Ing. en Sistemas Ulises Lapa Asto. 23


TALLER DE PÁGINAS WEB

No comprobar la web en distintos navegadores y


resoluciones

¡¡¡He terminado de diseñar mi web!!! ¡¡¡Ya puedo lanzarla al mundo para recibir un montón de
visitas y hacerme rico!!!
¡STOP!
Este error es bastante común.

• Diseñas (o te diseñan) la web en un ordenador y no tienes en cuenta que no todos los


monitores son iguales y de que existen diferentes resoluciones para móviles y
tablets…

• Antes de lanzar tu web, te recomiendo encarecidamente que compruebes su


funcionamiento en diferentes navegadores, resoluciones de pantalla y
dispositivos (yo incluso les envío la web a varios amigos para que la prueben
en sus tablets y móviles).

Puedes usar este servicio para probar tu web en varios escenarios:


http://quirktools.com/screenfly/

¡Hazlo tú mismo!
(DIY – Do It Yourself)

Ing. en Sistemas Ulises Lapa Asto. 24


TALLER DE PÁGINAS WEB

Referencias
Nebra, M. (2019). Aprende a crear tu propio sitio Web con HTML5 y CSS3. Recuperado de:

https://openclassrooms.com/en/courses/3339201-aprende-a-crear-tu-propio-sitio-web-con-
html5-y-css3/3340579-configurar-css

Rubianes, E. (2018). Los 45 errores más comunes al diseñar una página web. Recuperado el 21
06 2019 de: https://refrescandonegocios.com/errores-al-disenar-pagina-web/

Ing. en Sistemas Ulises Lapa Asto. 25

Potrebbero piacerti anche