Front-End, teoría, tecnologías, metodología, Aplicaciones online y offline. Guía completa para el diseño y desarrollo web 2.0 actualizada a Enero del 2016.

2. Í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

3. ¿QUÉ ES FRONT-END?
FRONT END
Información Diseño Comportamiento

4. LENGUAJES DE PROGRAMACIÓN
Front-end Back-end
HABILIDAD SOBRE CAPACITARSE CON
El diseño Front-End se aplica a:

5. FASES DE UN PROYECTO WEB
ACCESIBILIDAD Y USABILIDAD

6. 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:

7. Algunas pautas de accesibilidad web recomendadas por W3C:

8. FRAMEWORKS
Características:

9. 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:

10. Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<div role= "banner" data-role="header" data-form="ui-bar-a" data-
theme="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-btn-
corner-all ui-icon-grid ui-btn-icon-notext ui-shadow" data-
role="button" role="button">Navigation</a>
</div>

11. VENTAJAS INCONVENIENTES
LIBRERÍAS O BIBLIOTECAS
Características:

12. API (APLICATION PROGRAMMING INTERFACE)
Características:

13. LISTADO DE APIS JAVASCRIPT
Implementadas En Desarrollo
Ejemplos:

14. PLUGINS O ADDONS
Características:
WIDGETS
Características:
Ejemplos:

15. WIREFRAMES Y PROTOTIPOS
La arquitectura de la información se encarga de:

16. .
HERRAMIENTAS PARA EL PROTOTIPADO WEB
Herramientas online

17. Herramientas offline
RESPONSIVE WEB DESIGN
3 pilares en el Responsive Web Design
Rejilla Fluida
Media Queries
(Extensiones de Media
Declarations)
Contenidos
Multimedia
Adaptables
CSS3 JavaScript

18. .
. Cuando el tiempo de respuesta de la carga de una página web
es de un segundo o superior, resulta inaceptable para el usuario.
.

19. HTML (HYPERTEXT MARKUP LANGUAGE)
Otras características:
Estructura del código en HTML

20. Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<etiqueta atributos>
<etiquetaAnidadaDeApertura></etiquetaAnidadaDeCierre>
</etiqueta>
HMTL 2
HTML 3.2

21. HTML 4.01
XHTML
HTML 5

22. CSS (CASCADE STYLE SHEET)
Características:
Representación del esquema del código en CSS
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
Selector Declaración
{
color: black;
/* propiedad es color : black es valor */
}

23. Representación de los tres tipos de selectores en CSS
Etiqueta{}
#identificador{}
.clase{}

24. Etiqueta.clase{} 
Etiqueta.clase.clase 
.clase.clase 
Etiqueta .clase{} 
Etiqueta, .clase{} 
#identificador:modificador{} 
CSS3
Características:

25. DISEÑO FLUIDO. MEDIA QUERIES
Ejemplos de código HTML para la etiqueta <meta name="viewport">
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=yes">
</head>

26. Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<head>
<meta name="viewport" content="width=480, initial-scale=1”>
</head>

27. Características:

28. Puntos de corte por dispositivo más usuales:

29. 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);
}

30. De píxeles a em

31. Código para 14px por defecto, y que luego cambie a 18px para H1 en em:
Bloc de Notas X
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

32. VENTAJAS INCONVENIENTES
Características de los principales preprocesadores CSS:
Sass Less Stylus

33. JAVASCRIPT
Características:

34. Los elementos básicos del lenguaje son:

35. Ejemplo de código:
Bloc de Notas X
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>

36. SEO (SEARCH ENGINE OPTIMIZATION)
Ejemplos de herramientas online:

37. 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:

38. URL OPTIMIZADAS
Ejemplo:
https://www.tienda.com/muestra_producto.php?product_id=1

39. CÓMO FUNCIONAN LOS MOTORES DE BÚSQUEDA
ALGORITMOS DE BÚSQUEDA:
DIFERENTES ROBOTS:
UN GIGANTE LLAMADO GOOGLE

40. FACTORES PARA POSICIONAR EN GOOGLE POR CATEGORÍA:
BLACK SEO

41. PRINCIPALES TÉCNICAS DE BLACK SEO:

42. ROBOTS.TXT
SINTAXIS DE ROBOTS.TXT:

43. Bloc de Notas X
Archivo Edición Formato Ver Ayuda
User-agent: *
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
User-agent: *
Disallow: /directorio
Disallow: /directorio/archivo.jpg
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
User-agent: msnbot
Crawl-delay: 10
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
#Este es el archivo robots
User-agent: *

44. CONSIDERACIONES:
Ejemplo de códigos HTML para no indizar el archivo robots.txt:
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<meta name="robots” content="noindex, follow">
Bloc de Notas X
Archivo Edición Formato Ver Ayuda
<meta name="googlebot” content="noindex">
<meta name="slurp” content="noindex">
<meta name="msnbot” content="noindex">

45. 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:

46. ALMACENAMIENTO
OPCIONES DE INSTALACIÓN
ANCHO DE BANDA

47. TRANSFERENCIA DE DATOS
MONITORIZACIÓN DE «UPTIME»
URL de aplicación web para monitorizar el tiempo de servicio:
SOPORTE TÉCNICO

48. COSTE
MANTENIMIENTO
QUÉ ES URL (UNIFORM RESOURCE LOCATOR)

49. Ejemplos de recursos en Internet:
QUÉ ES UN DOMINIO
Tipos de dominio:

50. RELACIÓN CON EL FRONT-END
CONSIDERACIONES PREVIAS

51. CONFECCIONAR UN NOMBRE DE DOMINIO

53. REGISTRANDO DOMINIOS
TRANSFERIR ARCHIVOS AL SERVIDOR
Ejemplos:

54. Características de Git:

56. MIGRACIONES

57. Procedimiento para migrar

58. AUDITORÍA WEB
Comprobaciones usuales y herramientas:

63. 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