Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Semana 06 - Objetivos:
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.
<!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">
. slider {
width: 95%;
margin: auto;
overflow: hidden;
}
. slider ul {
display: flex;
padding: 0;
width: 400%;
. slider li {
width: 100%;
list-style: none;
}
. slider img {
width: 100%;
}
@keyframes cambio {
0% {margin-left: 0;}
20% {margin-left: 0;}
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
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.
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.
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:
<!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>
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*/
}
4. Al hacer clic en el mensaje automático nos mostrar la siguiente interfaz con el mensaje
predeterminado para poder comunicarnos con los clientes.
5. Finalmente nos pedirá hacer los siguientes pasos para entablar un chat on line, como
lo muestra la siguiente imagen.
Las dos barras invertidas al comienzo de una línea, significa que esta es solo un
comentario, se pueden eliminar completamente.
<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();
}
<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.
<script>
var ran
ran = Math.round(Math.random() *50000)
<script>
document.oncontextmenu = function(){return false}
</script>
<script>
window.onload = function()
// Para internet Explorer
{document.onselectstart = function(){return false;}
// Para Firefox
document.onmousedown = function(){return false;}}
</script>
<script>
//<! [CDATA[
function right(e) {
if (navigator.appName == 'Netscape' && e.which == 3) {
<script>
document.body.oncopy = function() {
alert('Todos los derechos reservados. NorfiPC © 2019');
return false;};
</script>
<script>
function hora () {
var DateString=(new Date()).toString();
self.status= DateString.substring(0,3+DateString.lastIndexOf(':'))+
"Cualquier mensaje";
setTimeout("hora ()",200);}
hora ()
</script>
<script>
if(navigator.appName.indexOf("Netscape") != -1){
location="netscape.html";}
if (navigator.appName.indexOf("Microsoft Internet Explorer") != -1){
location="internet-explorer.html";}
</script>
<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>
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í
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;
}
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:
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.
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.
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.
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.
1- Enlazar los scripts o librerías desde un servicio rápido y estable que emplee un
CDN.
Más abajo se pueden conocer cuáles son los más rápidos y eficientes.
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.
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>
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.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
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>
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.
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.
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
¡¡¡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.
¡Hazlo tú mismo!
(DIY – Do It Yourself)
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/