Arquitectura Web

ARQUITECTURA WEB
sgarciaca@nebrija.es
Sergio Garcia
Chrome – opera – moxila – microsoft
Tres lenguajes de programas:

1. Java Script: este es el verdadero leguaje: es para los movimientos
2. Html: estructura los elementos de la pagina
3. Css: nace para cuidar la estética de las paginas web: colores, fuentes
SEO: es el posicionamiento orgánico que me va a dar el navegador; primeros puestos.
Descargar Visual Studio Code: https://code.visualstudio.com/docs/?dv=win
24 de octubre del 2022
Codepen.io  crear cuenta

Es una plataforma para aprender el htlm, lenguaje de programación.
Visual Studio Code  descargar
Window resizer – what Font – CSS peeper – whatruns – fireshot  pluggins Google
LENGUAJE HTML
P= párrafo
<P> MI GATA SE LLAMA YUNA </P>: la P es la etiqueta, como el comando que
indica que hacer, las P son de inicio y cierre.
Enlace:
Este es la etiqueta de apertura de un link.
Anidar elementos: significa usar una etiqueta dentro del contenido de dos etiquetas:
DEBE HABER UNA ETIQUETA DE ENTRADA UN CONTENIDO Y UNA

ETIQUETA DE SALIDA.
ANATOMÍA DE UN DOCUEMENTO HTML
<!DOCTYPE hyml>: cualquier documento html tiene esta etiqueta, tiene que se incluida
para que funcione bien, debe star al principio.
<HTML> >/HTML>: todo el contenido de lo que este haciendo en el DOC HTML debe
contenes esta etiqueta d einicio y de fin.
<HEAD> </HEAD>: esta etiqueta sirve para poner las cosas en una pagina web que no
ven lus usuarios como las keywords.
<HEAD>
<meta charset=”utf-8”>
</HEAD>
Esta etiqueta debe ponerse para que cuando se use la letra Ñ o una tilde no aparezca un
símbolo o algo raro.
<BODY> </BODY>: es todo lo que se quiera enseñar: imágenes, textos, menú etc.
ESTRUCTURA BASICA DE UNA PAGINA WEB EN LENGUAJE HTML:

TEXTOS
<P> </P>: con estas etiquetas se pone el párrafo.
<H1></H1>
Normalmente solo se pone un H1, y los H2 que se quiera.
Estas son las etiquetas para hacer una lista:
IMAGENES
<IMG SCR=”URL DE LA IMAGEN”>: esta es la etiqueta
<img scr="imagenes/nombredelaimagen.jpg">
SOLO PONER PNG Y JPG.
Esta es para poner descripción a la imagen:
Si tu imagen no tiene ALT los ordenadores de personas ciegas no pueden leerlo, y

además Google te baja el SEO.
ENLACES
Esta es la estructura de un enlace.

Siempre guardar el archivo index.htm en el programa VISUAL STUDIO CODE.
TAREAS:
1- Hacer un Briefing: lo más completo posible
Campus, modulo, contenidos generales
7 noviembre.
Referencia elementos html: REVISAR EN EL CAMPUS

HACER UN CODIGO EN VISUAL STUDIO CODE: el básico que hemos visto en
clase.
26 de octubre del 2022

UX WEB: user xperiance, la experiencia de usuario; como una persona se siente cuando
utiliza un producto o servicio digital
UI: user interface, interface del usuario; lo que esta viendo, aspecto de la pagina web
Utilizar ambas en debida forma provocara:
- Generación de alto valor para el público
- Altas posibilidades de engagement
- Fortalecimiento de marca
- Aumento de conversaciones
HUMAN CENTERED DESING: una manera de hacer las cosas en marketing
1. Visibilidad del estado del sistema: el diseño siempre tiene que mantener informados
a los usuarios de lo que está pasando.
2. La coincidencia entre el sistema y el mundo real: el sistema debe usar el idioma de
los usuarios.
3. Control y libertad del usuario: los usuarios muchas veces realizan acciones por
error, todo usuario necesita una salida de emergencia para salir de la acción no
deseada; Control Z.
4. Consistencia y estándares: los usuarios no tendrían que preguntarse si una palabra
acción significa lo mismo, debemos seguir ciertas conversiones para no crear una
carga cognitiva al usuario.
5. Prevención de errores: los mensajes de error son importantes, si puede haber un
error hay que poner el mensaje y una posible solución.
6. Recognition rather tan recall:
7. Flexibilidad y eficiencia de uso: gestos o acciones que aceleren el uso.
8. Diseño estético y minimalista: no debe contener información irrelevante.
9. Ayuda a tus usuarios a reconocer, diagnosticar y recuperarse de los errores: hay que
dar opciones a los usuarios ante los errores de la web.
10. Ayuda y documentación: es mejor si la pagina web no necesita información
adicional para comprender la página, por ejemplo las preguntas frecuentes.
02 de noviembre del 2022
CABECERA: por lo general debe ser simple, y el neuromarketing dice que el logo de la
marca siempre debe ir en la parte superior izquierda.
Si la pagina es una Landing hay que poner un formulario en la parte de arriba.
*** Los sliders no se adaptan bien a los dispositivos móviles y no se ven bien.
SERVICIOS: resumen de los servicios que se ofrecen.
AUTORIDAD: testimonios de los servicios que se han prestado, y algunos clientes que se
han tenido.
POST ESTRATÉGICOS:
One pace: es la pagina donde se usan anclas, es decir, tu seleccionas algo del menú y te
manda abajo en la misma página, o sea que no carga otra pagina, sino que es la misma.
Landing: no tiene puntos de fuga (enlaces para salir) solo es una pagina web sin nada: se
usa cuando se tiene poca información, por ejemplo, como portafolio para un freelance.
FOOTER: formulario de contacto, términos y condiciones y políticas de privacidad.
Backling: un enlace que se pone dentro de una página es como una estrategia de SEO.
Visual Studio Code: DESCARGAR Y PRACTICAR

Página “Sobre Mí”: redactar un título que atrape y escribir “Mi historia” es importante
hacerlo para acercarse un poco al cliente, es un storytelling.
- Evitar palabras vacías, ni escribir de manera muy técnica
Página de “Servicios”:
Tecnica AIDA: atención, interés, deseo, acción
- Captar atención del cliente por ejemplo con una pregunta disruptiva
- Generar deseo
- Invitar a la acción
técnica PAS: Problema, agitación, solución

- Planteo problema
- Genero la solución
- Invito a la acción
NOMBRE DEL SERVICIO: tiene que ser las keyworks de Google, como la gente lo
busca
DESCRIPCIÓN: hay que contar de manera objetiva lo que es y que cualidades tiene
- En la pagina web, el cliente no debe dar más de 3 clicks
- Debemos colocar características y beneficios del servicio
- Se debe incluir una llamada a la acción
- Se deben incluir las preguntas frecuentes
PAGINA DE CONTACTO:
- Titulo que enganche dentro del formulario de contacto
CAPA LEGAL:
- hay que tener en cuenta las políticas de privacidad
MAPS
- incluir ubicación
REDES SOCIALES: incluir
REDICCION A URL: cuando se llena el formulario es bueno acompañar el emsanje de
éxito de llenar el formulario de contacto, con un URL que rediria a algo de la pagina como
el newseller
TAREA:
tenéis que hacer un documento PDF en el que aparezcan:
- Dos sites cuya arquitectura web sea completa y bien estructurada.
- Dos sites cuya página de inicio tenga buen diseño
- Dos sites cuya página de servicios tenga buen diseño
- Dos sites cuya página de quienes somos tenga buen diseño
cada página irá con su foto y un párrafo justificando la elección

1. Crear un frame de desktop, Iphone, ipad 11
2. Seleccionar move
CLASE DE FIGMA
CLASE FIGMA
Entrega:
Archivo comprimido con 3 archivos:
- Una imagen
- Un archivo HTML: visual studio code (archivo index)
- Un archivo CSS: es para la parte visual del HTML
CSS: Cascade style sheet
CMS: Content Management System
<link href="style.css" rel="stylesheet" type="text/css"> : ESTO ES PARA ANCLAR EL
HTML
Css básico de moxila  BUSCAR

Arquitectura Web

Cargado por

Copyright:

Formatos disponibles

También podría gustarte

Arquitectura Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Arquitectura Web

Cargado por

Copyright:

Formatos disponibles

ARQUITECTURA WEB

Chrome – opera – moxila – microsoft

Tres lenguajes de programas:

24 de octubre del 2022

Codepen.io  crear cuenta

DEBE HABER UNA ETIQUETA DE ENTRADA UN CONTENIDO Y UNA

ANATOMÍA DE UN DOCUEMENTO HTML

ESTRUCTURA BASICA DE UNA PAGINA WEB EN LENGUAJE HTML:

Si tu imagen no tiene ALT los ordenadores de personas ciegas no pueden leerlo, y

Esta es la estructura de un enlace.

Referencia elementos html: REVISAR EN EL CAMPUS

26 de octubre del 2022

Visual Studio Code: DESCARGAR Y PRACTICAR

07 de noviembre del 2022

técnica PAS: Problema, agitación, solución

15 de noviembre del 2022

28 de noviembre del 2022

También podría gustarte