Fundamentos del diseño web front end

NDICE

- Pgina 02 - Qu es Front-End

- Pgina 04 - Fases de un proyecto web

- Accesibilidad y usabilidad

- Pgina 07 - Frameworks

- Pgina 10 - Libreras o bibliotecas

- Pgina 11 - API

- Pgina 13 - Pluggins o Addons

- Widgets

- Pgina 14 - Wireframes y prototipos

- Pgina 15 - Herramientas para el prototipado web

- Pgina 16 - Responsive Web Design

- Pgina 18 - HTML (HyperText Markup Language)

- Pgina 21 - CSS (Cascade Style Sheet)

- Pgina 23 - CSS3

- Pgina 24 - Diseo Fluido. Media queries

- Pgina 30 - Preprocesadores CSS

- Pgina 32 - JavaScript

- Pgina 35 - SEO (Search Engine Optimization)

- Pgina 41 - Robots.txt

- Pgina 44 - Planes de Hosting

- Pgina 47 - Qu es URL

- Pgina 48 - Qu es un dominio

- Pgina 52 - Transferir archivos al servidor

- Pgina 55 - Migraciones

- Pgina 57 - Auditora web

- Pgina 62 - Referencias

QU ES FRONT-END?

FRONT END Informacin Diseo Comportamiento

LENGUAJES DE PROGRAMACIN Front-end Back-end

HABILIDAD SOBRE CAPACITARSE CON

El diseo 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

Caractersticas:

Ejemplos de Frameworks para CSS y JavaScript:

CSS/CSS-HTML-JavaScript JavaScript

Comparacin entre cdigos 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 diseo con jQuery Mobile:

Bloc de Notas

X Archivo Edicin Formato Ver Ayuda

VENTAJAS INCONVENIENTES

LIBRERAS O BIBLIOTECAS

Caractersticas:

API (APLICATION PROGRAMMING INTERFACE)

Caractersticas:

LISTADO DE APIS JAVASCRIPT Implementadas En Desarrollo

Ejemplos:

PLUGINS O ADDONS

Caractersticas:

WIDGETS

Caractersticas:

Ejemplos:

WIREFRAMES Y PROTOTIPOS

La arquitectura de la informacin se encarga de:

.

HERRAMIENTAS PARA EL PROTOTIPADO WEB

Herramientas online

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

.

. Cuando el tiempo de respuesta de la carga de una pgina web

es de un segundo o superior, resulta inaceptable para el usuario.

.

HTML (HYPERTEXT MARKUP LANGUAGE)

Otras caractersticas:

Estructura del cdigo en HTML

Bloc de Notas


HMTL 2

HTML 3.2

HTML 4.01

XHTML

HTML 5

CSS (CASCADE STYLE SHEET)

Caractersticas:

Representacin del esquema del cdigo en CSS

Bloc de Notas


Selector Declaracin

{

color: black;

/* propiedad es color : black es valor */

}

Representacin 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

Caractersticas:

DISEO FLUIDO. MEDIA QUERIES

Ejemplos de cdigo HTML para la etiqueta

Bloc de Notas


Bloc de Notas


Caractersticas:

Puntos de corte por dispositivo ms usuales:

Cdigo usual para los puntos de corte de SmartPhone, Tableta PC y

Ordenador Porttil

@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 tamao

del dispositivo. Otra opcin sera 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;


}

@media only screen and (max-width: 769px) {

p {

width: 50%;

height: 300px;

padding: 50px:

color: white;


}

De pxeles a em

Cdigo para 14px por defecto, y que luego cambie a 18px para H1 en em:

Bloc de Notas


body {

font: 14px;

}

h1 {

font-size: 1.2857 em;

/* 18px/14px=1.2857em */

/* Se recomienda agregar el clculo como comentario */

}

PREPROCESADORES CSS

VENTAJAS INCONVENIENTES

Caractersticas de los principales preprocesadores CSS:

Sass Less Stylus

JAVASCRIPT

Caractersticas:

Los elementos bsicos del lenguaje son:

Ejemplo de cdigo:

Bloc de Notas


document.write("Hola Mundo");

SEO (SEARCH ENGINE OPTIMIZATION)

Ejemplos de herramientas online:

TIPOS DE INTENCIN DE BSQUEDA DEL USUARIO

TIPOS DE INTENCIN DE BSQUEDA 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

CMO FUNCIONAN LOS MOTORES DE BSQUEDA

ALGORITMOS DE BSQUEDA:

DIFERENTES ROBOTS:

UN GIGANTE LLAMADO GOOGLE

FACTORES PARA POSICIONAR EN GOOGLE POR CATEGORA:

BLACK SEO

PRINCIPALES TCNICAS DE BLACK SEO:

ROBOTS.TXT

SINTAXIS DE ROBOTS.TXT:

Bloc de Notas


User-agent: *

Bloc de Notas


User-agent: *

Disallow: /directorio

Disallow: /directorio/archivo.jpg

Bloc de Notas


User-agent: msnbot

Crawl-delay: 10

Bloc de Notas


#Este es el archivo robots

User-agent: *

CONSIDERACIONES:

Ejemplo de cdigos HTML para no indizar el archivo robots.txt:

Bloc de Notas


PLANES DE HOSTING

SERVIDOR COMPARTIDO O DEDICADO

URL de aplicaciones web para comprobar las posibles

penalizaciones por motores de bsqueda basadas en IP a un

servidor de hosting, o alguno de los sitios web que hospeda:

ALMACENAMIENTO

OPCIONES DE INSTALACIN

ANCHO DE BANDA

TRANSFERENCIA DE DATOS

MONITORIZACIN DE UPTIME

URL de aplicacin web para monitorizar el tiempo de servicio:

SOPORTE TCNICO

COSTE

MANTENIMIENTO

QU ES URL (UNIFORM RESOURCE LOCATOR)

Ejemplos de recursos en Internet:

QU ES UN DOMINIO

Tipos de dominio:

RELACIN CON EL FRONT-END

CONSIDERACIONES PREVIAS

CONFECCIONAR UN NOMBRE DE DOMINIO

REGISTRANDO DOMINIOS

TRANSFERIR ARCHIVOS AL SERVIDOR

Ejemplos:

Caractersticas de Git:

MIGRACIONES

Procedimiento para migrar

AUDITORA 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

[email protected]

PortadandiceQu es Front-EndFases de un proyecto webAccesibilidad y usabilidadFrameworksLibreras o bibliotecasAPIPluggins o AddonsWidgetsWireframes y prototiposHerramientas para el prototipado webResponsive Web DesignHTMLCSSCSS3Diseo Fluido. Media queriesPreprocesadores CSSJavaScriptSEORobots.txtPlanes de HostingQu es URLQu es un dominioTransferir archivos al servidorMigracionesAuditora webReferencias

Fundamentos del diseño web front end

Internet

Transcript of Fundamentos del diseño web front end