ÍNDICE
-
Página 02 - Qué es Front-End
Página 04 - Fases de un proyecto web
Accesibilidad y usabilidad
Página 07 - Frameworks
Página 10 - Librerías o bibliotecas
Página 11 - API
Página 13 - Pluggins o Addons
Widgets
Página 14 - Wireframes y prototipos
Página 15 - Herramientas para el prototipado web
Página 16 - Responsive Web Design
Página 18 - HTML (HyperText Markup Language)
Página 21 - CSS (Cascade Style Sheet)
Página 23 - CSS3
Página 24 - Diseño Fluido. Media queries
Página 30 - Preprocesadores CSS
Página 32 - JavaScript
Página 35 - SEO (Search Engine Optimization)
Página 41 - Robots.txt
Página 44 - Planes de Hosting
Página 47 - Qué es URL
Página 48 - Qué es un dominio
Página 52 - Transferir archivos al servidor
Página 55 - Migraciones
Página 57 - Auditoría web
Página 62 - Referencias
¿QUÉ ES FRONT-END?
Información
FRONT END
Diseño
Comportamiento
LENGUAJES DE PROGRAMACIÓN
Front-end
Back-end
HABILIDAD SOBRE
CAPACITARSE CON
El diseño Front-End se aplica a:
FASES DE UN PROYECTO WEB
ACCESIBILIDAD Y USABILIDAD
Algunos ejemplos imprescindibles en usabilidad web son:
Cuatro factores para determinar el tipo de usuario al que se dirige el
proyecto de un desarrollo web:
Algunas pautas de accesibilidad web recomendadas por W3C:
FRAMEWORKS
Características:
Ejemplos de Frameworks para CSS y JavaScript:
CSS/CSS-HTML-JavaScript
JavaScript
Comparación entre códigos que realizan el mismo coloreado del
estilo visual y el fondo:
var el = document.getElementById("elem");
el.style.color = color "white";
el.style.backgroundColor = "red";
return el;
$("#elem").css({color:"white" , backgroundColor:"red"});
Ejemplo de diseño con jQuery Mobile:
Bloc de Notas
Archivo
Edición
Formato
Ver
X
Ayuda
<div role= "banner" data-role="header" data-form="ui-bar-a" datatheme="a" data-swatch="a" class="ui-header ui-bar-a">
<a data-form="ui-icon" title="Home" class="ui-btn-left ui btn corner-all
ui-btn ui-icon-home ui-btn-icon-notext ui-shadow" data-role="button"
role="button> Home </a>
<h1 aria-level="1" role="heading" tabindex="0" class="ui-title">A</h1>
<a data-form="ui-icon" title="Navigation" class="ui-btn-right ui-btncorner-all ui-icon-grid ui-btn-icon-notext ui-shadow" datarole="button" role="button">Navigation</a>
</div>
VENTAJAS
INCONVENIENTES
LIBRERÍAS O BIBLIOTECAS
Características:
API (APLICATION PROGRAMMING INTERFACE)
Características:
LISTADO DE APIS JAVASCRIPT
Implementadas
En Desarrollo
Ejemplos:
PLUGINS O ADDONS
Características:
WIDGETS
Características:
Ejemplos:
WIREFRAMES Y PROTOTIPOS
La arquitectura de la información se encarga de:
.
HERRAMIENTAS PARA EL PROTOTIPADO WEB
Herramientas online
Herramientas offline
RESPONSIVE WEB DESIGN
3 pilares en el Responsive Web Design
Media Queries
Rejilla Fluida
(Extensiones de Media
Declarations)
CSS3
Contenidos
Multimedia
Adaptables
JavaScript
.
. Cuando el tiempo de respuesta de la carga de una página web
es de un segundo o superior, resulta inaceptable para el usuario.
.
HTML (HYPERTEXT MARKUP LANGUAGE)
Otras características:
Estructura del código en HTML
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
<etiqueta atributos>
<etiquetaAnidadaDeApertura></etiquetaAnidadaDeCierre>
</etiqueta>
HMTL 2
HTML 3.2
X
HTML 4.01
XHTML
HTML 5
CSS (CASCADE STYLE SHEET)
Características:
Representación del esquema del código en CSS
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
Selector Declaración
{
color: black;
/* propiedad es color : black es valor */
}
X
Representación de los tres tipos de selectores en CSS
Etiqueta{}
#identificador{}
.clase{}
Etiqueta.clase{}
Etiqueta.clase.clase
.clase.clase
Etiqueta .clase{}
Etiqueta, .clase{}
#identificador:modificador{}
CSS3
Características:
DISEÑO FLUIDO. MEDIA QUERIES
Ejemplos de código HTML para la etiqueta <meta name="viewport">
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=yes">
</head>
X
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
<head>
<meta name="viewport" content="width=480, initial-scale=1”>
</head>
X
Características:
Puntos de corte por dispositivo más usuales:
Código usual para los puntos de corte de SmartPhone, Tableta PC y
Ordenador Portátil
@media only screen and (max-width: 480px) {
p{
width: 90%;
height: 500px;
padding: 20px:
color: white;
background: rgb(117,15,25);
}
}
/* Donde max- es el prefijo y width es la propiedad. Usar la propiedad
width implica usar el ancho del viewport del dispositivo. Si el ancho del
viewport del dispositivo ha cambiado, la media querie ajusta el tamaño
del dispositivo. Otra opción sería usar device-width, pero hay
dispositivos que no la asumen correctamente */
@media only screen and (max-width: 481px) and (max-width: 768px) {
p{
width: 95%;
height: 400px;
padding: 40px:
color: white;
background: rgb(115,160,88);
}
@media only screen and (max-width: 769px) {
p{
width: 50%;
height: 300px;
padding: 50px:
color: white;
background: rgb(89,126,165);
}
De píxeles a em
Código para 14px por defecto, y que luego cambie a 18px para H1 en em:
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
body {
font: 14px;
}
h1 {
font-size: 1.2857 em;
/* 18px/14px=1.2857em */
/* Se recomienda agregar el cálculo como comentario */
}
PREPROCESADORES CSS
X
VENTAJAS
INCONVENIENTES
Características de los principales preprocesadores CSS:
Sass
Less
Stylus
JAVASCRIPT
Características:
Los elementos básicos del lenguaje son:
Ejemplo de código:
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
<!doctype html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Hola Mundo");
</script>
<!-- script es el nombre de la etiqueta)
type es la propiedad añadida a la etiqueta <script>
= es el operador binario de asignación
document es el objeto
. sintaxis de punto
write es la función
; fin de la instrucción
document.write ("Hola Mundo"); es una sentencia -->
</body>
</html>
X
SEO (SEARCH ENGINE OPTIMIZATION)
Ejemplos de herramientas online:
TIPOS DE INTENCIÓN DE BÚSQUEDA DEL USUARIO
TIPOS DE INTENCIÓN DE BÚSQUEDA POR VOLUMEN
ERRORES EN SEO:
CONTENIDO INVISIBLE
Errores comunes de contenido invisible:
URL OPTIMIZADAS
Ejemplo:
https://www.tienda.com/muestra_producto.php?product_id=1
CÓMO FUNCIONAN LOS MOTORES DE BÚSQUEDA
ALGORITMOS DE BÚSQUEDA:
DIFERENTES ROBOTS:
UN GIGANTE LLAMADO GOOGLE
FACTORES PARA POSICIONAR EN GOOGLE POR CATEGORÍA:
BLACK SEO
PRINCIPALES TÉCNICAS DE BLACK SEO:
ROBOTS.TXT
SINTAXIS DE ROBOTS.TXT:
Bloc de Notas
Archivo
Edición
Formato
Ver
X
Ayuda
User-agent: *
Bloc de Notas
Archivo
Edición
Formato
Ver
X
Ayuda
User-agent: *
Disallow: /directorio
Disallow: /directorio/archivo.jpg
Bloc de Notas
Archivo
Edición
Formato
Ver
X
Ayuda
User-agent: msnbot
Crawl-delay: 10
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
#Este es el archivo robots
User-agent: *
X
CONSIDERACIONES:
Ejemplo de códigos HTML para no indizar el archivo robots.txt:
Bloc de Notas
Archivo
Edición
Formato
Ver
X
Ayuda
<meta name="robots” content="noindex, follow">
Bloc de Notas
Archivo
Edición
Formato
Ver
Ayuda
<meta name="googlebot” content="noindex">
<meta name="slurp” content="noindex">
<meta name="msnbot” content="noindex">
X
PLANES DE HOSTING
SERVIDOR COMPARTIDO O DEDICADO
URL de aplicaciones web para comprobar las posibles
penalizaciones por motores de búsqueda basadas en IP a un
servidor de hosting, o alguno de los sitios web que hospeda:
ALMACENAMIENTO
OPCIONES DE INSTALACIÓN
ANCHO DE BANDA
TRANSFERENCIA DE DATOS
MONITORIZACIÓN DE «UPTIME»
URL de aplicación web para monitorizar el tiempo de servicio:
SOPORTE TÉCNICO
COSTE
MANTENIMIENTO
QUÉ ES URL (UNIFORM RESOURCE LOCATOR)
Ejemplos de recursos en Internet:
QUÉ ES UN DOMINIO
Tipos de dominio:
RELACIÓN CON EL FRONT-END
CONSIDERACIONES PREVIAS
CONFECCIONAR UN NOMBRE DE DOMINIO
REGISTRANDO DOMINIOS
TRANSFERIR ARCHIVOS AL SERVIDOR
Ejemplos:
Características de Git:
MIGRACIONES
Procedimiento para migrar
AUDITORÍA WEB
Comprobaciones usuales y herramientas:
REFERENCIAS
https://www.video2brain.com
https://www.w3c.org
https://www.wikipedia.es
https://www.40defiebre.com
https://www.norfipc.com
https://asanzdiego.blogspot.com.es
hughesjd@missouri.edu
