Fundamentos del diseño web front end
-
Upload
david-hurtado -
Category
Internet
-
view
454 -
download
8
Transcript of 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
X Archivo Edicin Formato Ver Ayuda
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
X Archivo Edicin Formato Ver Ayuda
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
X Archivo Edicin Formato Ver Ayuda
-
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
-
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;
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 pxeles a em
-
Cdigo para 14px por defecto, y que luego cambie a 18px para H1 en em:
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
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
X Archivo Edicin Formato Ver Ayuda
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
X Archivo Edicin Formato Ver Ayuda
User-agent: *
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
User-agent: *
Disallow: /directorio
Disallow: /directorio/archivo.jpg
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
User-agent: msnbot
Crawl-delay: 10
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
#Este es el archivo robots
User-agent: *
-
CONSIDERACIONES:
Ejemplo de cdigos HTML para no indizar el archivo robots.txt:
Bloc de Notas
X Archivo Edicin Formato Ver Ayuda
-
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
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