Diseño y Desarrollo Web: Estándares y Arquitecturas

Enviado por Chuletator online y clasificado en Informática y Telecomunicaciones

Escrito el en español con un tamaño de 47,01 KB

Usuarios de Internet:


9/10 españoles son usuarios de Internet / WEB Estática O TRAD/

Que es?


es un conj d pag
HTML entrelazadas de alguna forma entre si y k contienen ref a otros elementos dependientes: ficheros d imgs, sonido, video, hojas de estilo, scripts.
características son informatvas con descrips d una empresa, person etc/ están contruidas basicmente con txt, imgs y enlaces/ son muy económicas d desarrollar/ no se usan bases d datos/ no exist elemntos programdos/ se usa el lenguaje html para estruct y contenido./ se usa tmb hojas estilo css para el disño.
ventajas WE muy portables, funcionan en cualquier servidor/ se cargan rápidamente/ max desempeño y funcionalidad/ facilitan en posicionamiento en Google/ costo d alojamiento muy barato/ pocos requerimientos técnicos xra su desarrolo/ no precisa d instalcion ni config d sw espcializado inconvenientes del usuario (WE)
usuario no puede interactuar con contenido, no hay interacción/ no c puede personalizar la info k se muestra y tmpc hacer búsquedas de contenido/ el usuario no puede selecionar/ordenar/modificar contenidos ni diseño d pag web/ no c usan funcionalidades con base d datos, foros, chats... 

Inconvenientes de webmaster(WE)

al admin web o webmaster es único encargado d acceder al servidor web xra modifcar content./ debe conocer lenguaje html y css/ el proces de actualización es largo, tedioso y manual. / cambiar un solo elemento en web estática requiere reconstruir y recargar en el servidor toda la pag o a vecs incluso un grupo de pag web. 

Comunicación cliente-serví WE o arquitectura básica

 Ante una petición de una página por parte de un usuario, el servidor que aloja la web se limitará a buscarla y, si la encuentra, la remitirla al ordenador peticionario con el resto de elementos referenciados. Una vez recibidos, el navegador del solicitante se encargará de interpretar (presentar visualmente) el código HTML.. Por tanto, existe una correspondencia entre los archivos o páginas HTML que se encuentran en el servidor y los que recibe e interpreta el cliente.

WEB Dinámica
 que es?
conj d datos almacenados en una base de datos (BD) y un conj d prog conocidos como pag actvias (en lenguj PHP, ASPX, JSP..) k constituyen la interfaz xra k usuarios del sitio manipulen la info. La web dinámica es la web 2.0.

Generador web dinámica

Servidor-> base d datos--> navegador Dif entre 1.0 y 2.0
La diferencia radica en que la web 1.0 era una web de consulta mientras que la web 2.0, la web de hoy, es una web participativa, que cambio la manera en que la información circula  por la red, permitiendo que los usuarios hicieran parte de esta

.Características generales d WD:

se puede contruir n cualkier tipo d web: w.Empresarial, blog, correo, app online../ requieren d infraestructura de archivos y bases d datos en el servidor/ el sitio web cambia en función del usuario k accede a el/ el proces d actualización es sencillo/ uso de lengujes de prog (cliente-serví) caract client-serví WD: 1)cliente:
La prog en el lado del cliente s ejecut en propio nav de usuario / 2)servidr:
la prog en el lado del serví se ejcuta en serví dnd se aloja la pag web y el result se envía al nav del client la prog es indepe entre client-serví/ comunicación client-serví WD o arquitectura básica WD un usuario teclea una dirección o pulsa un enlace en su navegador, con lo que se solicita una página activa. El servidor web recibe la petición y, tras cargar la página activa, el procesador del lenguaje apropiado pasa a interpretar las instrucciones que contiene. Estas últimas, de forma simplificada, se ocupan, en un primer momento, de seleccionar los datos de la BD según la petición recibida (para lo cual tendrá que comunicarse con el SGBD, 


en el lenguaje que éste proponga) y, a continuación, ubicar los datos recuperados para la composición o maquetación final de todo el código HTML que se enviará al usuario.

Arquitectura II WD

Todo este proceso anterior hace que se diga comúnmente que las páginas HTML que recibe al final el navegador solicitante se generan ‘sobre la marcha’, es decir, en el instante de la petición./ Siguiendo a De Miguel (1993: 56), diremos que un SGBD es una compleja aplicación informática ideada para que múltiples usuarios, de forma concurrente, puedan “describir, recuperar y manipular bases de datos, asegurando en todo momento la integridad, confidencialidad y seguridad.” Es decir, un SGBD es, a día de hoy, la infraestructura necesaria para el sostén de la web 2.0, que se caracteriza, como todos sabemos, por la creación, actualización y mantenimiento de sus contenidos de forma flexible y cooperativa. Esta edición compartida de datos no le resulta ajena a un traductor que haya trabajado con memorias de traducción en red, donde cualquiera de los miembros del equipo que están conectados a dicha memoria en línea, puede, a la vez que los otros, introducir o modificar en ella segmentos bilingües (unidades de traducción), así como ver ‘en tiempo real’ las aportaciones que están realizando sus compañeros. Como ya se sabe, una memoria de este tipo es una base de datos3 que, naturalmente, estará gestionada por un SGBD arquitectura III  importante(esquema con torre en medio verde cn nombre serví de app a la izuquierda or portátil con nombre ordenador web y al otro lado un cilindro con nombre base de datos) Si analizamos la secuencia de acciones: (1 en petición) El usuario solicita una página web que inicialmente será la home del portal . En otras llamadas posteriores las solicitudes vendrán en función de las acciones del usuario, por ejemplo ciclando en algún punto del menú del portal.(2 <html> <code></html>) La solicitud llega al servidor web a través de una página de script, en este caso desarrollada con lenguaje ASP. (3 en el verde servidor d app) El servidor transfiere la página al interprete, en este caso ASP. Recordemos que también podría haber sido una página en PHP.(4part izquirda consulta) (5part derecha consulta) La página ASP contiene instrucciones para acceder a la base de datos del portal y extraer los registros que “construirán virtualmente” el código HTML de la página. (6part arriba derech controlador d bse d dtos) (7 juego de registros part izquir) (8 part izqui servidor de app arriba ) Se entregan los datos al interprete ASP para construir “virtualmente” la página en código legible para el navegador. (9 encima prt dercha respuesta) El servidor web transfiere al navegador del usuario la página “construida” para su visualización.
ventajas WD posibilidades infinitas xra el disño d una pag web/ facilida xra añadir contenidos y modificarlos/ diseño web responsive xra adaptar a qualquier resolución/ interacción del usuario con el contén o diseño d la pag/ proceso d actualizaion muy sencillo, sin nned d entrar en servidor./ funcionalidades como bases de datos, foros app webs, content dinámica.
inconvenientes de WD gran requerimiento tecnco xra su alojamiento/ costes de alojamiento mayores en servidores de pago/ mayor coste de desarrollo/mayor tiempo xra servir la pag al cliente/ el admin tiene k know los lenguajes d prog y/o saber gestionar sistema web estática vs dinámica. cual elegir?

a) Por un lado, es recomendable optar por una página estática si:
1.- Lo único que quieres es tener presencia en Internet. 2.-Las secciones de tu página no van a sufrir grandes cambios. 3.- Es de contenido fijo y con pocos apartados.
b) Una web dinámica es mejor en el caso de: 1. Querer actualizarla y añadir contenidos de manera constante. 2.- Necesitas incluir noticias, crear y guardar la base de datos de tus clientes. 3-Tu objetivo es interactuar con los visitantes.


Web estática vs dinámica. Cual escoger si...?



a) Por un lado, es recomendable optar por una página estática si:
1.- Lo único que quieres es tener presencia en Internet. 2.-Las secciones de tu página no van a sufrir grandes cambios. 3.- Es de contenido fijo y con pocos apartados.
b) Una web dinámica es mejor en el caso de: 1. Querer actualizarla y añadir contenidos de manera constante. 2.- Necesitas incluir noticias, crear y guardar la base de datos de tus clientes. 3-Tu objetivo es interactuar con los visitantes.

Cual elegir?

web con actualizaciones frecuente/ web con nuevo content (diario/semanal/mensual) --> blog)/ magnitud d la actualización del content/ velocidad d la carga d la pag un poco lento/ content multimedia + atractivo/ posibles errorea de cod o plugins incmpatbles. 
arquitctura mixta k es?
web con ficheros html reales en el serví web, pero k parte de su contenido es generad por código script (asp, php, jsp, etc) 

Como funciona?

(esquema con tabla verde en lado derecho que dice servidor de app) (1 lado iz d petición) el usuario solicita una pag web ubicada en el serví/ (2 con <html><code></html>) el serví localiza la pag y la envía al interprte xra k complete su content dinámica.(3debajo tabla verde servidor app) (4 arriba parte iz) una vez completa la pag, la new pag virtual contendrá código legible pra nav/ (5 en respuesta) el serví web tranfiere al nav del usuario la pag contruida para su visualización. 

Resumen

1 web estática


Pag web con txt, imgs, enlaces/ NO se usan bases de datos/ facils de desaroollar, economcs y rápidas d consultar/existe físicamente en el servidor/ las crea y edita un webmaster, ya que para un usuario es difícil/ web dinámica es la web 2.0/ los usuarios son prosumidores/ los webmaster son especialistas/ uso de lenguajes de prog/ servidor con softare especifico/ l web s construye única para cada usuario o petición web dinámica vs estática actualmnt la immensa mayoría d pag web son dinámicas/ las webs dinámicas las pueden actualizar los prosumidores/ las webs estáticas son para que no cambie en el tiempo(actulmnt todo cambia y los usuarios need nueva info).

Estructura de la web dinámica

:

Definiciones


Modelo de comunicación

Vincula a varios dispositivos a través d 1 red. Cliente hace peticiones/ el serví envía la respuesta/ la red por la que van los datos/cliente:
quien inicia solicitudes o peticiones, tiene un papel activo en la comunicación/ espera y recibe las respuestas del serví/ se puede conectar a varios servidores a la vez/ Interactúa directmente con usuarios finales mediant una interaz graf d usuario (GUI). 

Servidores:

son ordendores k ejecutan prog que atienden las peticiones de otros prog: los clientes/ espera a que lleguen solicitudes d los clients/ tiene un papel pasivo en comunicación/ recibe una solicitud, la procesa y luego envía respuesta a cliente./ acepta conexiones de muchos clientes(num max d peticiones, limitado)
arquitectura de redes es el diseño de una red d comunicaciones/ se especifican los componentes físicos d una red, su org funcional y config, sus procedimientos y principios de operaciones, así como los formatos d los datos usados en su funcionamiento topologiaa de redes:
 1) bus. El k parece 4drado/ 2) estrella. Pizza cortada con circulo centro/3) anillo. Circulo tlkual/ 4) árbol. Pirámide/ 5) malla.Pentágono unido x lineas en forma esterlla casi/ 6) doble anillo. Circulo pero dos lineas/ 7) mixta. Hay ciruclo, bus, pirámide redes LAN y WAN: 
LAN: local área network. Red de medio abasto que need in ISP x interconetar nodes de la xarxa (abast max interconexio d nodes d varis edificis / WAN: wide are network. Red de alto abasto. Interconecta ciudaddes i países entersi. Need varis ISP ej Internet 


protocoles de comunicaciones el model TCP/ip (protcol de control de transmisión/protcol d Internet) es un protcol d red desarollado en década 1970/ este describe un conj d guias generales d operación xra permitir k un equipo pueda comunicarse en una red/ este tmb provee conectividad d exterma a extremo especificando como los datos deberían ser formateados, direcccionados, transmitidos, enrutados y recibidos x el destinatario. 

Arquitectura cliente-serví Antecendentes

La arquitec client/serví es resultaod d integración d dos culturas  años 80. 

Mainframe

capacidd de almacenimiento, integridad y acceso a info/ computador facilidad d uso -cult d pc- bajo costo, presentación atract -aspecto ludic- y una amplia ofert en prodcts y app def d IBM es tecno k proporcina al usuario final el acces transparente a las app, datos, servicios d computo o cualkier otro recursp dl grupo d trabajo y/o a través d la org en multipls platofrmas/ el modelo soporta un medio ambiete distribuido en el cual los requerimientos d servicio hecho x estacions d trabjo intelgentes o clinets resultan en un trab realizados x otros comutadores llamados servidores. 
ventajas ibm permite reuso d los componentes, muy modulable y flexible/ uso eficiente del hardware/ facilita la integración entre dif sistemas y share info permitinedo x ej k las maquinas puedan ser usass medinre una interfaz + amigable para usuario/ al fvorecer el uso d la intefaz d graf interactivas los sistms construidos najo esto tienen mayor interacion con usuario/ las estructura modular facilita d mas la integración d news tecno y el crecimiento d la infraestructura computacional favoreciendo así la estabilidad de lsa sol.
desventajas need d have un admin d serví. Requiere conocimiento xra k un serví sea reparado. La seguridad need tenr portcols d seguridad xra acces d usuarios y peticiones remotas. Coste elevado d hardware y software. Requiere habilidad xra que un serví sea reparado /// estructura de una app las app de software tiene 3 funcionales fundamentales. Administración d los dtos./lógica de la app -procesos./ lógica de la presentación -interfaz de usuario. 
filosoia arquite client-serví repartir el tratamiento de la info y los datos x todo el sistm info xra mejorar el rendimieto del sistm global d info/ provee separación de funciones CLIENTE frontent consumidor de servicions/ SERVIDOR backend proovedor de servicios división de funciones arquic clien-serví client. 
ofrece en GUI grafic user interace/ servidr gestiona el acces a los dtos y realiza funcones d control y seguridd related con las peticiones decliente. 

características arquitec cleint-serví
mucha flexi -según need del prduct o servcio/ mayor segurdd -definible en cad srvicio-/cmas redimiento -tareas k comparten-/ escalable indepe -cambios transparentes xra usuarios finales/ interrelación enter hardware y software posee una infraestructur poderosa - el acces a los recurso d red no muestra la coplejidad d los dif tipos de formatos d dtos y d los products/ el procesamiento se divide en dif capas. 
funciones del cliente arquitec client-serví admintrar la interfaz d usuario/ aceptar datos de usuario/ procesar la log de la app/ genrear las solcitudes xra la BD/ transmitr las solicitudes de la BD al serví/ recibir los results del serví/ dar formato a los results/ captura y validación d los datos d entrada funciones del serví aceptar las solicitdes sorbe BD de los cleintes/ procesar las solicutdes sobre BD/ dar format a los result y transmitir a ceinte/llavera a cabo verifacion de integrdidd/ mantener los datos generales de la BD/ prpocionar control de acces concurrente/ llevar a cabo la recup/ optimizar el procesamiento d consult/actualización ejemplos arquit clien-serví navegar en un web funcona basándose en un cleinte web o nav y un serví coo apache nginx o litespeed/ protocl ftp se usa 1 cleinte d ftp como filezilla xra conectar a un serví fTP como puré-ftpd, proftpd,,,


sshh o secure shell manejo de los serví d forma remota, la info esta ecriptada/ juegos red existen cliente k permiten a jugadores online jugar desde sus casas conctandose serví de juegos remotos. 
sistema dns domain number system. Se usa xra asociar las direcciones de ip a un nombre k sea fácil de reconocr x los usuarios/ servidor de correo clients de correo consult el correo al serví d correo remot, tnato desd mobil o compu de escritorio o laptop. 
arquitec clint-serví arquitec  multicapa tiene 3 capas d components: un component front-end k es responsable d proporcionar la log d presentaicon/ un coponente back-end k proporc acces a servicios dedicados tals com un serví d bases d datos/ un componente k hce las funciones d capa intermediaria (middl tier) k permit a usuario share y control la log d negocio medinte su aislamiento de la app real. 

DOStipos de web dinámica

1)
dinámica de serví o backend los contents k estas viendo s generan especial xra ti. El serví no esta mostrando una pag html k alguien creo. Esta s creo pa ti y contiene elemtns únicos pa ti 2)
de nav o front-end sign k la pag k estas viendo no es estática sino k tiene interaciones así k cuando pulses boon tal vez s carga dinamicamnt + info y se añade a pag k estas viendo. O tmb al pulsar en un img quizá se haga grande xra ocupar toda la ventana del nav.

NORMAS y
estándares Estándar?
? Conj d reglas normalizadas k describen los rquesitos k deben cumplir los productos,servicios.. 
obj establecer un mecanismo base xra permitir k distintos elemtns hardware o software k lo usen, sean compatible entre si. El obj d esto es hacer las cosas mas fáciles, definiedno características d obj y sistemas k se usan cotidianamente. 

Tres condiciones del estándar:

1) simplificación. Reducir los modelos quedándose con los mas needs./ 2) unificación. Permitir intercambio a nivel internacional/ 3) especificación. Evitar errores d identificación empleando lenguaje claro y preciso. 

Tipos de estándares

1)

Estándar d iure o de ley

Generados x cómite cn status legal y están avalados x el apoyo d gobierno o institución xra producir estándares / 2) estándar de facto o de hecho:
Nacen a partir d products d la inductria k tienen un gran exit en el mercado o a partir de desarrollos hechos x grupos de investigación d unís y k tiene gran difusión. No participa ninguna org de estandarización. // mayoría son consorcios priv con inters comunes sin lucro. Aceptan a cualquiera k pueda aderirse y suelen solicitar contribuciones a publco. Su fuerza c sustenta x num d participantes. A veces sus miembros + competentes representan los intereases de algún país. 
estand facto vs iure algunos estand d facto se convierten en de iure o x amplia aceptación los d iure s consideran d facto. //estándar de iure-ansí
1

)ansí sparc

Estándar d diseño abstracto xra un sistema d gestión d bsaes d datos (SGBD-DBMS)/ ansí-c lenguaje de prog C//estándar d facto IEEE
IEEE es Intitucion de Ingeneria Eléctrica y Electrónica.. Asociaicon mundial de ingenieros dedicada a la normalización y desarrollo en áreas técnicas. Fundada x Thomas Alva Edison, Alexander Graham Bell, Franklin Leonard Pope y otros. Los estandades d ieee afectan a amplia gama de insdustrias. Potendia y enegia, biomedicina y salud, teno d info...
Estandard de facto W3C org indepe y neutral, desarrolla estándares relacionador con la web/ sus recomendaciones son ref xra consrtuir una web accesible interoperable y eficiente.
consorcio world wide web W3C comunidad internacional dnd orgs miembro, el personl a tiempo complet y publico en general work jnto xra desaroolar estándares web/ liderado x tim berners lee y director ejecitvo o ceo jeffrey jaffe.

GUERRA DE LOS NAV

INICIOS entre los años 1995 y 2010. Explorer se instalaba x defecto en sistema operativo windows. Los nav no eran compatibles con los estándares web./


Competición ENTER EMPRESAS Había conflicto en la web entre los fabricantes d nav. (netscape vs Microsoft). Para competir entre ellos en cada nav c añadieron new elements (en cod html) y new formas de manipular doc web. Esto creo caos entre diseñadores y programadores xk no podían hacer pag web compatbles cn los nav CAOS EN DESARROLLO WEB la incompatibilidad de los nav con lso estándares crearía una fragentacion importante en web y no solo una. Se preveían 2 grandes prob. Aumento del cost de creación d situos web (tenían k hacer 2)/ riesgo d k ciertos usuarios no pudieran acceder al content o servicios ofrecidos x la web. 

web standr projct
en el 98 un grupo de activistas web glenn davis, George olsen y jeffrey zeldman -después c unió Aarón gustafson- empezaron co los diseñadores de nav xra convencerlos. El obj d WaSP era lograr k los fabricantes de nav admitieran los estándares establecidos x el world wide web consortium. En 2000 la guerra termino. WASP cambio su obj. Algunos miembros continuaron trabajdno con los proyectores d nav xra mejorar su compatibilidad con lso estand. Otros bgin a work en estrecha colabroacion con fabricntes d software como maccromedia xra mejors calidd del código cerado eiens como dreamweaver. Otros deucaron diseñadore y desarolladors web sorbe la importancia de usar estandres. 

ventajas de uso estand
generales ayuda a simplificar el código fuente/reducción del tiempo de desarrollo y mantenimiento/ hacer la web + accesible/ permitir la compatibilidad y validación hacia atrás/ ayudar a mantener un mejor SEO/ crear un grupo de conocimiento común. 

Ventajas uso están software o ordenadores

cumplir con lso estand web da mayor visibilidad a las pag en las búsquedas de la red/ facilita al software en ervidores (server-side) y cliente (client-side) entender la estructura de su doc, a parte añade funcionalidades como un motor de búsqueda a su propio sitio es mas fácil y da mejore result. Los estándares están escritos para que los navegadores antiguos todavía puedan entender la estructura básica de sus documentos/ Si no pueden entender los elementos o funcionalidades más nuevas y atractivas para los estándares, podrán igualmente visualizar el contenido de su sitio / Los documentos que cumplen con estándares web pueden ser fácilmente convertidos a otros formatos/ Esto permite un uso más versátil de la información dentro de los documentos de la Web/ Se facilita una migración a nuevos sistemas (tanto de hardware como de software) incluyendo aparatos como televisores y lectores portátiles/ La accesibilidad es una idea importante detrás de muchos estándares web, especialmente en HTML/ La web es usada por personas con capacidades diferentes, con acceso a navegadores diversos o uso de tecnología asistencial (navegadores de voz, de texto, braille..) 
ventajas uso estand para pers es un paso d gran importancia para hacer una sola web/asegurara que todos los nav tanto viejs como nuevos, como especiales permitan la visualización e interacción./ si no c siguen los estand hay porcentaje d población k no podraaccedes a web.

Componentes de la web:


desarrolladores usuarios-content:-->desarrolladores herramientas de autor/ herramientas de evaluación //usuarios tecno asistiva o accesble/ nav y reproductores éxito en los estand web: compatiblidad correcta un doc k se publuco en Internet funcona en dif: nav/ plataformas y dispositivos presentes y futuros. 
la trinidad de los estand web los tres componentes: estructura con html/ la presentación con css3/ comportamienot js o javascript validación del cod web que hace? Permte saber si la web es compatible con todso los nav dispo y platform/ complir con los estand de los lenjuages d prog es una muy buena prct/ la validación del cod correcta ayuda en la optimizcion y mantenimiento de un cod fuente.


DISEÑO


RESPONSIVE: Expansión Internet (problemática)


Cadia billones de person c conectan a Internet con disposit. Y la conectividad se expandió a otrs como coche, equipos de gym...
uso masivo d móvil xra Internet en año 2020 se estima k 31 mil millones d dispo se conecten a Internet con 4mil millones d person. K usan/ dispos con muchas resoluciones de pant.

OBJ W3C one web:

principal obj es iniciaiva one web, hacer solo una web, sin fragmentación d contenidos, unificar el content para distintos dispositivos móviles, nav, operador, proveedores de content...

Análisis de propuesta de sol

en 2010 ethan marcotte creo y difundió esta técnica a partir d una serie de artcl. En a list part. Describió los concept teóricos y practcos fundamentales xra realizar un diseño web siguiendo las ideas d responsive web diseng desarollo de ideas RWDethan creo pag web simple k simulaba el content de una revista k no existía con un diseño sencillo de dos column contruido en una quadricula fluida y con muchas img flexibles.Era un diseño flex que se adaptaba bien, pero tenia prob para visualiazr en resoluciones extremas en pant peke y pant panorámica.En 2011 lo mas novedoso era el disño con floats conclusión de diseño flexible este funciona bien en un contexto centrado en el escritorio para el que fue diseñado pero no esta optimizado para extenderse mucho más allá (en vista de pant pekes o extragrand) 
idea ser elástico en lugar d adapt el diseño de una pag a una resolución se puede integrar a la resol del disposotivo xk no c sabe com son pant del futur. Diseñar una visualización optima incorporando tecno basadas en estand web para hacerlos no solo mas felx sino más adapt a los medios k los generan. Es decir Diseño web responsivo.

diseño web responsivo la idea principal de est tecn no es hacer un diseño para cada dispositvo. Sino que la pag web tiene que tener la capacidad d adaptse a cada dispositivo, creando una sol única. Sin k el usuario se de cuenta, haciendo k la usabilidad de la app sea realmente cómoda para el usuario proporcionando una buena experiencia de usuario.
usabilidad es la propiedd k tiene un det sistema xra k sea favil de uar o de utilizar y de aprender. 
experiencia de usuario útil, usable, valioso, deseable, creíble y accesible. Experiencia d usuario UX atiende a todos los factors tanto interno como externos del usuario y del sistema internos como externos del user y del sistema interactvo k causen alguna sensación a quien este usando un sistema interactivo concreto en un det context de uso.

RWD

Diseño web responsivo y tiene como obj tener solo una vers en html y css k cubra todas las resolucions de pantalla. Ajustar los elementos d una web para adaprtarlo a la resolución d pant del dispositvo. 
características RWD ccs media-queries/ grids fluidos/ elementos fluidos/ posibles modificaciones en la disposición del contenido. 
caracteriscas RWD css media-queries característica es la nueva especificación de css3/ permite aplica esilos condicionalmente teniendo en cuenta los parámetros de la pantalla (la resol del dispositivo) 
características RWD grids fluidos especificar en el código layouts definids en porcentajes que se ajusten a los anchos de la pantalla.
formula obj/ context0 = resultado -> width:6.25%;/* 60/960= 0.0625*/ características RWD elemntos fluidos elementos fluidos dentro de estos layouts (grids layouts) como son las fuentes, las img o elementos multimedia.
características RWD mod en dispo del content cambio en la visualización de las zonas del content sin cambiar el código fuente html. 
miscelánea Google y rwd Google detallo su preferencia por los sitios desarollados con responsive web design. Porque? Con mismo cod html bajo msima url se accede a pag con distintas resoluciones de pantalla . Interactuar con html facilita la indexación de pag en buscador.  


Diseño responsivo:


Evolución del diseño web:

para desarrollar una web según un diseño propuesto y de forma corrcta en todos los nav y dispo, los diseñadores web debían usar "hacks"css, propiedades floats, macros, bibliotecas, javascript en css, y otros trucos hasta 2018. En 2021 con css grid layout y flexbox es posible crear sitios web exactamente de la manera que se diseñan. 

Tipos de diseño web (6)

una interfaz puede crearse usando dif técnicas: 
1) diseño fijo (diseño con tamaño fijo) este es el mas usado en interne, el d. Es inalterable sea cual sea el dispositivo de visualicion, se usan medidas absolutas como pixeles para def los elementos web, no es un diseño adaptable, surgió con la web/ 2) d. Elástico (d con unidades "em") definen dimensiones de la web con unidades relativas, el "em" es unidad d tipogrfia que mide exactaente el ancho de la letra "M" mayus de una tipograf, em no mide los mismo siempre, no es un disño adaptable, el diseñador web usa em pra fijar anchos d diseño web y del resto del content /3) d. Liquido o fluido (d con %), surgió a los 200 como alternativa a las tablas html, los tamaños s definen en %, no permite controlar el diseño -este varia constantmnt según tamaño disposit y no se puede ajust un diseño correct xra tdos los tamaños- perjudica la user experience, tiende a ocupar todo el ancho de la pant sea cual sea el taaño de sta, se adatpa a la ventana del dispositiv, tiende a ocupar todo el ancho de la pant sea cual sea el tamaño de esta, se adapt a la vent del dispositivo/4) d. Web responsivo o adaptable (d. Que se adapta al dispositvo) surgió en 2010 xra adapt web a variedd d dispos, se basa en media query, elemntos fluidos y diseño en grid, el diseño se transform en función del tipo d dispo o del ancho dl nav web k lo visualiza y las img y las fuentes se adapt, coherencia entre dispositivos, se usan css grdis layoout y flexbox/código @media (min width: 1201px) / @media (min width: 701px) and (max-width:1200px)/@media (max width: 700px)

Entre disño web responsivo:

única plantilla fluye en dist resoluciones de pant. Aquí ethan marcotte 2010 introdujo el diseño respon definieoc sus caracteriticas en blog a list apart- usa diseño único y la ubicación de los elementos web camia de entre la resolución de pantalla d pc a dispositvo móvil-/ diseño web adaptable:
Varias plantills optimizadas y únicas xra cada clase d dispositivo. Aquí Aarón gustafson introduj en 2011 est usa disños fijos distintos para múltiples tamañs de pant. Es habitual x ej desaroolar 6 disños xra los seis anchos de pantalla mas comunes: 320, 480, 760, 960, 1200, 1600px/ El diseño en general es adaptativo incluyen las consultas d medís css d disño responsivo y tmb agregan mejoras basdas en java para cambiar el marcado htl del sitio según las capaciades del dispo. Este proceso se conoce como mejora progresiva.

Dif entre responsivo y adaptativo en diseño

responsivo

:


el diseño aquí lo decide la ventana del nav del visirante del sitio adaptativo:
en un disño adaptable se determina el backend no por el cliente o nav. El diño produce plantillas únicas para cada clase de dispo. El serví detecta factores como el tipo de d dispo y el sistema operativo xra enviar el diseñ correct/ en tiempo de carga  adaptativo:
se cargan + rápido, se debe a que solo tranfiere los activos necesaios epeficcos de cada dispo. 

En dificultad

Responsivo:


sol requieren un diseño y pot ser mes fácil d implementr, pero te mes aencio add al css y org d su sitio xra garantizar k sea completamnte funcional en tdos los tamañs de pant adaptativo:
son mas dificles d construir xk need dif disños para dif dispo.
en flexibilidad responsivo:
Requiere menos mantenimiento, estos sitios son suficientemnt flexibos para funcionar bien x si mismos de forma predetermnada incluso si hay un nuevo dispo o tamaño d pant en mercado-


Adaptable


Es considerado menos felxible poque un nuevo dispo con nuevo tamaño de pantall podría romper su diseño. Los tamños de pant cambian simpre y son muy var. Need mantenimiento ocasional. 
optimización de los buscadores googel recomiendo y recompensa a los sitios k usan diseño adaptable. Un sitio wb optimzad xra dispo movils ocuapa un lugar mas alto en las pag de rsultados de los mtores de busquda. 

Pros contras d.Web responsivo: pros:

experiencia transparente- menos tareas de mantenimiento- mas econom- mejora la eficiencia de rastreo y indexación- mas amigable con los motores de búsqueda contras carga d pag mas lenta y dificultad xra integrar anuncios-
pros contras d.Web adaptativo: pros muy orientado a cada usuario/dispositvo- tiempos d carga mas rápidos- optimizado para la publi- sitio wb existente reutilizable contras trabajo intensivo para crear- mas difícil d mantener- costoso cuando usar el diseño responsivo es perf xra pequeñas y medianas empresas k necesitan actualizar sus sitios existentes o empresas k need built un sitio completamente new. Se recomienda el d.Responsivo xra las industrias basadas n servicios xk s componen principalmnt d txt e imgs, aperte es económico, x lo k puede tener un sitio hermoso y completamente funcional a un precio razonable. 

Cuando usar el d.Adaptable:

es mejor xra sitios web complejos existentes k requieren una versión móvil, c recomienda el diseño adaptable xra sitios k dependen d la velocidad, el diseño adaptable es ideal xra una experiencia altamente específica k puede adaptar a ubicación, la velocidad d conexión y personalizando el contenido, el diseño adaptable s perfecto xra aquellos k need más control sobre cómo c entrega su sitio a dif users en dif dispo. 
5) d. Flexible (d def dentro de unos margenes predefinidos) usa propiedades css min-width(dfine el mínimo tamaño k un elemento puede tener)/ max-width (define el max anchi de un elemnto) xra k las anchuras d los blokes puedan adaptarse dentro de unos minims y maxmos /6) d. Intrinsico (uso d elemntos css de forma decuada) este enfok no es exactmnt nuevo, se trat d usar habiliddes existente y el conocimiento d css existente d una manera dif.- la belleza d este disño es combinar dif unidades y experimetnar con técnicas xra obtenr lo mejor xra su content. Este fue defnido x Jen Simmons en 2018 se basa en el uso de los elementos css d forma adecuada manteniendo el código limpio, min y mas eficiente.

Características intrinsic web(6)


1)mezclar elemtns fluidos y fijos a la vez-->es posible usar img fijas o fludas a la vez- con prpoiedd d css object-fit (indica como redimensionar un elemto según su contenedor)es posible cambiar el tmaño d img en vertical y horiontal sin distorsionar la relación d aspecto- confg la img xra k se ajuste al obj- medidad vh y vw (son medida relativas al viewport)/
2)cuatro medidas flexile disponibles - uso de cssgrid layout presnet nuevas maneras d como el disño deeb ajustarse al contxt intriseco d una pg web- hay 4 tipos de mdidas para org elementos a) fijo mdidas fijas px puladas b) minmax (min-max) meddia fluida d min a max hasta fijo c) auto hace fluir elementos d) fr nuevas meddas de fraciones xra disño fluido/
3)diseños verdaderamente bidimensionales/ css grid permite disñar elemtns bidimensial con clumnas i filas flexibles (prop height width),  s puede psicionar elementos en cualquir lado de pag d forma fácil y flex- y se puede añador espacions en blanco d forma snecilla
4) contxt anidados- con IWD posible tner contxt anidados a) flow solo en blokes, para ser ofrecer un contxt d formato, need usar clarflex- b)flexbox. Contxt d formato adecuado c) cuadricula. Contxt d format d)multicolumna /
5) expandir y contraer contenidousar iwd facilita contraer y expandir el content d una web: a) aplastar y crecer p.Ej img fluid b)ajustar y redistribuir p.Ej txt 


c) agregary eliminar espacion en blancd
6) no usar siempre mediaquery/ cuando diseño web requiere css no siempre son need it las media query. Es posible usar una comb d varias herramientas y tecno para lograr un disño instrinseco. 

Técnicas de disño web


;

Que es?


conj de procedimientos o recurs k se usan xra desarollar un sitio web. Es importne k i como se visualizaran los elemnt d la pag web en cada dispo (mobile firts) / el propósito del contenido, condiciona el diseño de la web (content first)/ empezar con un sitio w básico y progresivament mejorar la interacción (mejor progresiva)/ como mostrar el diseño según preferneias del usuario (dark mode)

Mobile first

Técnica k concentra inicialmnte el disño de la pag xra dispositvos movils y posteriormente xr otras resoluciones como tablets portátiles y pant d pc./ mejora la expereicia d usuario UX d los usuarios k visitan una web desd mobil. 
objtivo propósito del mobile first es desaroolar una sol web optima xra dispo móviles y solo después, basándose en la estrategia d mejora prog. Dichas pag web son optimizadas xra todo tipo d pantallas d ordendores y portátiles.
si diseñamos para móvil existen dif entre patrón d uso d pc y mobil / valor princ d una web es el msmo indepedinte del dispo con el que se acceda/ kien no tiene pc quiere realizar las msmas acciones k co el móvil/ se debe cenrar la atnecion del usuario en las acciones importantes/ la interfaz móvil ha d ser clara y minimalista Experiencia del usuario con el móvil one eyeball and one thumb(el entorno de uso tan distraído hace que la mayoría d los users de dispo móviles se involucren en uso con una sola man con breves periodos de atención parcial)
localización en need optimizar la interacción en cada dispo/ los users esperan satisfacer su need de velocidad en el disño y si no, se van a otra web que si lo haga/ tbm kieren encontrar servicios cercanos a donde se encuetran ubicados. 
tiempo los users tiene preferencias sobre que momento del dia hacer una tarea y con que dispositvo realizarla. 

Limitaciones con el móvil

Pantallas pekes (poco espacio)-Dar prioridad a k mostrar en pantalla-/ Conexión lenta/limitada- Obliga a optimizer l rendimiento xra cargar rápidamente los datos-/Atención dl usuario parcial/breve o en breves espacios de tiempo-La ubicación y el tiempo de uso del usuario, actúan como limitaciones en el proceso de diseño móvil porque le obligan a pensar de forma diferente en cómo de cómo la gente utilizará sus productos a lo largo del día.
microfuncionalidades móvil detenccion de lcalizacion/ orientación del dispo/ posibilidad de uso del acelerómetro/ toque de la pantalla con manipulación directa. Ademas dispone d: dirección (brújula)/giroscopio 360ºdmov/ audio entrada y salida/ video e img captura y entrad d cámara/ cámaras duales frontal trasera/ conexxiones de disposiovos a través bluetooth/ proximidd cercanía del dispo a obj fiscos/luz ambiental conocimiento del entorno de luz/oscuridad...

Que hace los user de móvil:

editar/crear (cmbio urgentemicrotarea)- comprobar/estado -repetición ../ buscar encontrar-// explorar jugar...

Como interactuar con pantalla:

orientación del dispo. El modo horizontal -uso en situaciones k requiere aprochar la pantalla/ sostener el telf en foma hoizontal permet disponer teclado mas grande y una mayor supericie para pulsar las teclas, permitiendo escribir + cómodamente. 

Consideraciones generales

1)

Jerarquía visual

En pantalla móvil, el usuario solo verá una columna. Como organizar la información?

2)Funciones touch

La interacción en un móvil es con el dedo. Tener en cuenta al pensar el tamaño de lo botones y elementos clicables.
3)Grandes gráficos. No usar imágenes grandes para no distraer al usuario, mejor usar contenido 4)Efectos hover.
En los móviles, no existen los efectos de ”pasar por encima” de un elemento para crear un efecto visual


Consideraciones generales


al pensar en limitaciones de los dispo moiles podemos concnetrarnos en las funcionalidades clave de neustra web y asegurarsnos de que sera universalmente funcional sin importar los dispo.
Mobile first. Mobile friendly disño optimizado para oviles. Comprovacion que tu pag si los es. 
ventajs c puede accede a su contenido fácil/ el contnt es responsivo y fácil de leer/ cuenta con tiempos cortos de carga/ los enlaces son visiles y se puede hacer clic en ellos. 
características cuando pag es mobile friendly usa software pco común para dispo móviles flash ej/ el tipo de ltra es peque e ilegible/ los enlaces están demasiado cerca o se ven uno encima de otro/ el contnt es muy grand para la pant. 

Mobile first importa el contenido

la calidad del content es tmb un criterio fundamenta xra garantizarle al usuario una experiecna móvil optima/ pag web xra dispo móviles con un contnt conciso y fácil de leer son muy valoradas por los motrs de busquda/ buena estrcutrua web y el rápido despliege de lso dos results de busueda así como algunos elementos interactivos y una buena estrcutura de enlaces./ txt img gráficos tmb son importantes para cualquier wb. Los txt deben estar bien estructurados xra ser mas cortos y que cuenten a la vez con titlos y subtitl. Las img y videos deben cargar fácilmente y contar con la calidad suficiente para ser visualizados en dispo móviles con pantallas de alta deficion. 

Content first


:

técnica que implica el suo de content xra definir el diseño y los elementos en un diseño. Prioriza un mensaje centrar y de marca en vez de la estética del disño/ todos los usuarios obtienen un conj completo de contnt: exactmnt el mismo content cuando es apropiado y alternaivas equivlente cuando no lo es.
elimina restriccione a diseño empezar con palabra en una página/ tratar d encajar el contnt en un disño ya terinado/ no caer en el prob de escriti tu contnt según limitaciones/ tener en cuenta la audiencia conocer los gustos, idioma, frustacione.. Pemite crear contenido adecuado a los usuarios web/ una vez conoces esto empieza a crear content centrado en satisface sus need/ k halne y rsuelva frstracioens...

Tono de voz

saber con el que te dirges a la audiencia. (propsito: sber k quereos conseguir al comunicarnos con los usuarios/ tipo de tono: saber el tono al usar para enganxhar a los usuarios/ carácter: k tendrán los menjs del contenido) 
lenguaje cercano a los users (usar txt fáciles de leer xra k la web sea mas accesble/fácil al user- usar frases cortas y lenjuage sencillo/ evitar uso mchos num o denominacions mates/ no uso metáforas o comparaciones k puedan ser confusas/ acuñar un único mensje x cada frase/ ser claro conciso y directo/ margenes amplios) 

Progresive enchanced:

mejora progresiva: crea una pag w con html incialmente y luego se añade la hoja d estilos css y la funcionalidad en java/ permite k cada user tenga acceso al contnt y a la funcionalid básica de un web usando cualquir nav y conexión a Internet. 
proceso html->html+css-> html+css+java dark mode
:
Es un esquea de color k usa txt icnos y otrso elemtnos de la interfaz de usuario d colores claros sobre fondo oscuro. 

Que hce?

mejora la legibilidad del txt/ mejor contrast/ reduce la fatiga visual/ ahorra bat./dark mode implementar el modo oscuro puede mejorar la ux, la usabilidad y la accesibilidad de tu sitio web. 

Entradas relacionadas: