100% encontró este documento útil (1 voto)
247 vistas28 páginasProgramador Web Full Stack 11 - Diseño Web Responsive
Diseño Web
Cargado por
Aharon Alexander Aguas NavarroDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
100% encontró este documento útil (1 voto)
247 vistas28 páginasProgramador Web Full Stack 11 - Diseño Web Responsive
Diseño Web
Cargado por
Aharon Alexander Aguas NavarroDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
/ 28
Saeed curso visuaty practico 44
DLT TacodkeMmacolan<=Lake ms backend
Diseno web
responsive
Interfaz de usuario \ Media Queries \ Media Types \ Viewport \ NMP Server
body {
background: white;
}
@media screen and (min-width: 480px) {
body {
background: gray;
+
@media screen and (min-width: HERRAMIENTAS
Pelole) ae PARA EL
DESARROLLADOR
background: green,
}
git Mjquev (BES S5FF curso Visual Y PRACTICO
Reh
WEB Full Stack
oY Tated ICM icedsnecice| backend
Direccion Edioial ——_Atancién a eetr,
Miguel Lodertremer —_suseripeionasy ventas
aie usershop@redusers com
rs 454011) 4110-8700
Nv +52-58-8821-9560
Publicidad
[email protected]
Produecion grafiea — *54/011/41108700
Gustavo De Matteo
Fernando jam
‘ator
Fernando Luna
tinue Argenta Cp Von vw ch ste SA. Pe 9108 io Bare a el 44714506 96408 er Dec
‘altplnas Si NP sSie Pea 1:2) SSM, Ben Awe 5801 4806-0114 Mea DF kre itacaSA dC, hte? Ieee ache Pada
a Gt, 351068 Mein lr Cosi sks de ptirs Ibes iss SA CV
‘Gr 58D Cl Gras ei, Detepacon WTADALD Ds eal
(ono Tel 5128-3670. ane Cebu Skea SA, fF Para E35 pa 2a ee Lr StT 1290 rem 21 ray Ea SAL, Prey 102,
engi e230 +0765 Veal Der bi Caan Bookman
9. San A, cn a, as 6012-40-48,
Go veal racics Sie Ten, st wz; Fox oa S16 w Novore do 1880, 1890, CTSOBE, Gund Auipona do Bucs Aves. Arr Fata Wain
mgt © WANA. 255-85 Ts cos enact pb rapes nen par in mato.emel pas pep oe
(sacar re sume esa ara iy cle crac eta deacon yo ain els nics yas es Ee,
nano pct at aa ns ean pnb Mss ab eee Se, UE le TP SERS ON on EN nn SRS.
(ase 225 ya, un aa, Ac,
oa
Poe
011-4110-8700 | USERSHOP.REDUSERS.COM
TE SRE the tsk coo]
{ Disefio web
responsive
BD Interfaz de usuario
HIE] Mecia Queries
GB Media Types
HIE Viewport
HII Herramientas complementarias
CONTENIDO
ADICIONAL ONLINE
Codigo fuente,
elementos graficos utilizados
en los ejemplos y otros contenidos
adicionales se pueden descargar en
redusers.com/u/programadorweb Interfaz de usuario
| aQUE ES EL DISENO WEB RESPONSIVO?
Enel naci
el diseio de las paginas web estaba
estrictamente orientado, en una pri
instancia, a un modelo institucional y, on una
segunda instancia, a un modelo comercial.
Y dado que la popularidad de los telétonos
‘méviles ain no era tan masiva como lo es
hoy, casi nadie pensaba en esos tiempos
‘en moldear un modelo web que pud
ido desde los t
nto de la red internet comer
Con la popularizacién del GPRS (Genera\
Packet Radio Service), comenzé a darse forma
al modelo de webs orientadas a teléfonos
méviles. En esa instancia, se pensaba todavia
en el desarrollo de una web orientad
las computadoras de escritorio, y otra,
para teléfonos celulares.
2 ol segundo lustro d
del 90, la Megada del smartphone Nokia
Comm
la web. Entonces nacié el modela que luego
devino en herramientas orientadas al disefio
web responsivo.
Conocemos como interfaz de usuario al conjunto de
herramientas (imagenes, objetosgrificos, objetos
de texto, eteétera) que conforman una aplicaclé,y
representan la informacién y las posibles acciones por
definir sobre ella. La interfaz de usuario es clave entre
Ja computadora y el ser humane, ya que, gracias a esta,
el hombre puede interactuar de forma efectiva o con
dificultad con una computadora
Dado que la interfaz de usuario es fundamental para
Ia interaccién hombre-maquina la era informatica fue
puliendo, con el tiempo, las mejoras notables para que
las personas redujeran el tiempo de interaccibn con una
computadors, haciendo las interfaces ms productivas.
En su version monocromatica y a color, la serie
Communicator de Nokia abrié la cabeza de muchos
teendlogos, que pensaron en una web futura
orientada a teléfonos moviles.
El nacimiento de la Web también adopto esta filosofia y, si
bien la www crecié en grificas y multimedia, con el pasar
de los afios adopté firmemente un modelo para que poder
Interactuar con el humano lo mas dgilmente posible.
El tercer paso en la cadena humano-maquina se
dio cuando la Web tuvo que comenzar a adaptarse
alos teléfonos méviles. Estos diltimos, de pantalla
reducida, debfan exprimir al maximo las capacidades
de simplificacién de contenido para que las personas,
tuvieran una experiencia de usuario efectiva y ala vez
concisa, Esta simplificacién también buscaba cubrir otro
factor importante: la velocidad de la transferencia de
datos a través del mecanismo GPRS 0 2G.
REDUSERS Ei PROGRAMADOR WEB Full Stack a 2G 3G 356
AMC
GPRS EDGE HARQ
MIMO.
“Aunque las redes méviles son muy prometedoras en.
‘cuanto a velocidades de transferencia de datos, sila
filosofia futura de los teléfonos méviles mantione la
linea actual en cuanto a tamafo de los dispositivos se
reflere, las mejoras en las velocidades de las redes no
interferirén para nada en el uso 0 no de sitios méviles
rresponsivos. Solo podrn mejorar en los smartphones
Ja calidad de los gréticos y animaciones, y el despliegue
de contenido multimedia,
Por eso, el disefo web responsivo llegé para quedarse
‘al menos hasta una préxima evolucién notoria de los
sistemas computacionales y de sus interfaces graficas.
Adentrémonos a continuacidn en las caracteristicas mis
populares que hacen que una web responsiva sea eficaz
en el momento de ejecutarse en miltiples pantallas de
diferentes tamafos y resoluciones.
x GPRS 0 2G
Se conoce como GPRS al servicio general de paqu
4G 5G
ei
OFDM
Amagen
Evolucion de las
redes moviles en la
telefonia celul
Usualmente, las redes de datos de
telefonia antiguas no son dadas
de baja. Pasan a formar parte de
servicios corporativos, como lo son
la telemetria 0 el sensado remoto.
3s de radio (General Packet Radio Services). Este se cred
‘en a década del 80, como una extensién del sistema global de comunicaciones méviles. Con el tiempo nacié el
2G, que bas6 su filosofia en el modelo GPRS y adopts este nombre para indicar que era la evolucién del sistema
Clase 11 B¥ Disefio web responsivo Media queries
CSS introdujo a partir de su versi6n 3, el soporte de
Media Queries. Este tiene una utilidad propia, que
permite definir diferentes estilas CSS para ser aplicados
dentro de un mismo documento HTML. Si utilizamos un
estilo
para los elementos cuando son utilizados
simplemente como un hipervinculo dentro de un texto,
podemos definir otro estilo CSS diferente para el mismo
elemento cuando este es utilizado para aplicar
hipervinculos dentro de, por ejemplo, elementas de lista
Armemos un ejemplo a continuacién. Para ello,
creamos un nuevo documento html con su estructura
bbasica. Luego de creado el documento HTML,
agregamos en el apartado el tag CSS dentro de , el siguiente cédigo:
x AJUSTAR CONTENIDO A LA PLATAFORMA
Si bien hemos repasado una opcién para detectar a plataforma desde JavaScript, y ahora estamos repasando una
‘opcién para hacer lo misma desde CSS, mostrar el contenido correcto no serétarea sencilla. Lo ideal para obrar de
lamanera més acertada es siempre combinar el poder que nos entrega Javascript através de a lectura de User-
‘Agent, con GMedia query de CSS. De esta manera aumentamos le posbildad de acertar correctamente en qué
plataforma se esta cargando nuestro documento HTML, para asi visualizar el achive CSS més apropiado para esta,
REDUSERS Ei PROGRAMADOR WEB Full Stack a
Comprendiends Media Query agregamos una lista desordenada simple. EstaA continuacisoacuts visualizaréaacute; algunos elementos a modo de prueba:
Roadmap 2017 - 2022
- Finalmente cursar licenciatura en tecnologéiacuteja educativac/1i>
ahora crearemcs una misma lista que contenga Giacute;tems con hipervsiacute:nculos:
ails para consultas sobre carreras ‘mailto:infotanalistadesistemas.con”>Email Institucisoacute:n Analista de sistemas- Principal
- Contacto
‘Yaccon el meni desarrallado, ereamas el titulo y el parrafo
principal que contendra nuestro documento HTML:
, junto ala declaracién de clases o divs. -imagen ( content:url(‘logo_redusers.png’); 2 En este bloque declaramos simplemente una clase Hamada imagen y, dentro de esta, utilizamos la propiedad contenturl para cargar una imagen. Repetimos nuevamente este blogue de cédigo CSS dentro del apartado alcanzado por @media screen, TD femmes omeanioes © 0 [0 tr00 Hosni aay Hpe m9 rpcadoa de cron, usERS—ZQ) Probando el comportamiento de @media screen Como pana som gues (cdr de Spr de anc, my comin en lifnae mdi) el mea ater se onmiete enment nen ele el cote cmb de clae mages Laimagen agregada anuestro documento debe lucir similar | DEVICE.JS Esta herramionta construida on JS aloj 2n su interior una pequeta biblioteca que simplifica la escritu condicional de CSS. Devices detecta y aiade clases especificas que nosotros le definimos previamente, de acuerdo al sistema operativo que carga nuestro documento HTML. Device,js detecta el $0, también discrimina si ipo es una tablet, un Smartphone o un desktop, y la orientacion dela pantalla en el momento de cargar nuestra Clase 11 B¥ Disefio web responsivo ‘cambiando por supuesto la imagen declarada Por una més pequetia o de menor resoluelén. Por ‘iltimo, agregamos el siguiente cédigo dentro dey sin ing class="inagen” src="logo _redusers.png"> Para este iltimo cédigo, no importa qué imagen definamos en el atributo src, ya que esta se manipula directamente desde os bloques de cédigo CSS. Con la variedad de dispositivos, abundan Los tamajios de pantalla Por ello es bueno pensar un disefio sobrio, que cubra la diversidad de resoluciones existentes enel mercado. Ejecutemos finalmente el cédigo para visualizar el resultado, redimensionando por supuesto el documento HTML. Este deber4 ser similar al de la Imagen 11. Laimportancia de la optimizacion fin In era de Adobe Flash abundaron Ia animnacin, el contenido multimedia, los colores por doquieren las imagenes y los textos. Pero esta misma época incluy6 cosas negativas en esta plataforma, como las conexiones Tentas las precargas de contenido que, muchas veces, sevolvian eternas La llegada de HTMLS cambi6 por completo la consigna de carga de webs, puso, junto ala sobriedad y Ia simpleza de las paginas web actuales, contenido que se cargan casi al mismo tiempo que presionamos enter, clic, o tap, para acceder a sitio web, Lo bueno de la era multiplataforma es que debemos adaptar el contenido a conexiones lentas como suelen ser la mayoria de ls servicios de datos de compafias méviles, para que este contenido se cargue casi en tiempo real Hoy, el tiempo y la paciencia de ls internautas es east REDUSERS Ei PROGRAMADOR WEB Full Stack Proce! Probando el comportamiento de @media screen soe ge arco me eh aera pee ete werent eer epee reese eter ween ‘muy comin on tlfonor moe), ens neal converte eo RedUSERS {imagen cambiara, tal ‘como vemos en esta imagen. niulo por lo que cualquier sitio web que demore mas de 405 segundos en cargar sera un sitio web al que muy pocas valveran, x | BROWSERJS Otralibreria JavaScript que nos permite dotectar las propiedades del navegador, SO, y el tipo de pantalla | usuario utiliza al visitar nuestro dominio es browsers. Es y del navegador, como también la resolucién de pantalla y qué tipo de dispositivo es el que invocé nuestra pagina. Dotectada toda esta variables estos datos, para que podamos ‘manipularlos de la manera més préctica que nos parezea. Podemos descargar esta herramienta desde la web ofic iormaci Viewport ‘Alo largo de esta dltima década, en la evolucién de desarrollo web hemos visto que muchos sitios han cambiado sustancialmente la forma de mostrar su contenido, mas alla de integrar las capacidades que media type y media query prestan. Sin caer en el uso y la dependencia de CSS para adaptar el contenido de las pantallas al dispositive de eseritorio o mévil que invoca una web, la etiqueta viewport llegé al ecosistema web para permitirle a los desarrolladores poder controlar el tamaiio y la escala de la vista de contenido. Para ahondar mejor en esta meta etiqueta, sabiendo ‘que hasta ahora no conforma parte de ningin esténdar web, veamos a continuacién un ejemplo de ella y qué elementos la complementan. Viewport basico Veamos a continuacién cma se compone la declaraciin dela etiqueta meta viewport: El componente mas importante dentro de la etiqueta viewport pasa por la propiedad content. Esta aloja una serie de subpropiedades y valores que se eneargan de ajustar todo el contenido de un documento HTML, ‘las dimensiones mas acordes con la pantalla donde se visualiza dicho documento. Ahora veremos qué parémetros podemos modificar dentro de la propiedad content de viewport, para que comience a notarse diferencia en el comportamiento de una web. Por defecto, en el bloque de cédigo anterior, especificamos que el valor de width debe ser igual al de la pantalla del dispositive. DB Mincssevenr © 9G [terre € 71) wongeseverpan x Comprendiendo Viewport + Exuos pores Aevum tain gen pt el ane aca © [0 esi rie =dUSERS Una ‘etiqueta viewport que cespecifica el ancho de pantalla igual al dispositive que carga la pagina, Clase 11 B¥ Disefio web responsivo Width La propiedad width es una de las mas controladas a través de los atributos que contiene Ia etiqueta viewport. Modificar esta propiedad permitiré controlar el tamaiio de visualizacién de los contenidos web en pantalla Elaboremos a continuacién un nuevo documento web, donde especificaremos {a exiqueta viewport dentro det ‘enceberado HTML:
Manejo de Viewport Yen el cuerpo de la pagina, agregamos ‘un c6tgo similar al siguiente.Comprendiende ViewpoztVisualicenos 1a misma en los siguientes dipositives:
calable=no"> ta ptaacute;gina agregamos 1a etiqueta Viewport, y probamos nuevamente su- Computadoras de escritorio
Dejamos tambiseacute:n 1a imagen para evaluar su comportamiento.
Comprendiendo Viewport 9A esta pkaacutespina agregamos la etiqueta Viewport, y probanos nuevamente su comportamiento modificando el valor det atributo width:
peeVisualicemos La misma en los siguientes dipositivos: Viewport con ta ae integracién de la 1 y ub propiedad = 2
Esto equivale a que una pagina web puede cargarse en un navegador weba solo el 10% del tam la pagina, hasta diez veces ampliado el tamaio real de dicha pagina web. Si bien esto puede ser exagerado, no debemos dejar pasar por alto la posibilidad que alguien con vision dlisminuida utilice un dispositive mévil y acceda realde a nuestro sitio web. Minimun-scale Un complemento de intial-scale dentro dela declaraciin de Viewport es minimun-scale. Su implementacién también se realiza dentro del atributo content, definido en el meta tag correspondiente a Viewport. ath, scale=0.5, initial-scale=1.0”> Podemos especiticarlo para definir cudl sera la escala minima (referente a zoom) soportada por el documento HTML. El valor més bajo que se puede establecer en minimun-seale es 02. Clase 11 B¥ Disefio web responsivo minimun-scale=0.1 Maximun-scale De a misma manera que utilizamos minimunscale para detinir el tamatiominimo de zoom que se puede aplicar sobre la pagina web, podemos aprovechar maximun scale para definirel limite hasta el que se pod evar el zoom del documento HTML, scal En este bloque de cddigo de ejemplo, vemos que la escala minima de zoom ser de 07, y la escala maxima seré de 4 veces el tamafio normal del documento HTML. Comprendiendo Viewport Dona hs bimge pe a acerca USERS initial-scale=1.0 User-scalable Por dltimo, nos queda conocer el atributo user- scalable de la propiedad content. Esta define por sto por no siel usuario tiene el poder de aplicar zoom-in 0 zoom-out sabre una pagina web, desde un dispositivo movil. WL usuario no podra escalar 1a pantalla desde un dispositive mévil Elatributo user-scalable solo acepta dos pardmetros: yes no, Puede obviarse su inclusién dentro del tag viewport, Comprendienda Viewport USERS Aeesta pagina agregamos la etique| Amagen 6, probamos nuevamente su compor| modificando el valor del atributo | Representacion de Viewport con Visualicemos la misma en los sig scale y smaximun-scale, dipositivos maximun-scale=2.0 initial-scale=1.0 REDUSERS Ei PROGRAMADOR WEB Full Stack yesto dejar que el usuario aplique, libremente, zoom sobre el documento HTML. content=""idth=device-width, initial~ scalable=yes”> //#1 usuario puede escalar 1a pantalla I Aibremente, desde un dispositive mévil., Pruebas reales de Viewport Para poder probar de manera fectiva todas las variantes posibles que se aplican através de Viewport, necesitaremos testea estas en un dlspositivo m6vl yasea tablet o Smartphone, o utilizar un emulador de dispositivos miles yno através de lax herramientas del programadar de nuestro navegador web. 1 problema de esta iltima herramienta esque las caracterfstcas Istadas hasta aqul, que complementan Ialabor de Viewport, son completamente ignoradas por las hertaatentas del prograniador, ya que el control tie zoom del navegador web no ped toear como i Aispositivo real al motor webkit ol que utliceros. scale=1.0, u Diferencia entre pixeles La diferencia entre pixeles a diversidad de pantallas existentes en el mundo Mobile, se han vuelto un verdadero desafio para los desarrolladores. Los primeros Smartphones manejaban resol de pantalla que oscilaban muy poco entre si: 320x640, 480x640, ecttera Esto no presentaba un mayar problema para la adaptacion de webs mévils ala necesidad del mercado, pero, con el correr del tempo, en esta dltima década de revolucién mévil las pantallas de los dispositivos mméviles han alcanzado resoluciones realmente notables (hasta 4K en algunos smartphones de alta gama). Por ello, ebemas tener presente que, para nuestros desarrollos web méviles, serd mas que til recurrir a herramientas, como el emulador oficial de Android, ¢ instalaren este el emulador con la pantalla més pequeta que hay en Androl y el emulador con la pantalla mévil mas grande que exist. Esto nos sarantizard que nuestros proyectos web se comporten deforma efectiva tanto en la plataforma mis bisica como también en ta plataforma mévil ms comple. jen detectar correctamente la plataforma y goner imteraccién sean para el usuario lo mas ame {que estan completamente preparados para resolver, de una manera préctiet visualizacién de contenido. En nuestra préxima clase, conoceremos y ahondaremos informacién sobre la plataforma Bootstrap, un framework ‘en HTML, para que este tenga compatibili ‘desarrollado por los creadores de Twitter, que nos permite ge contenido basico Clase 11 B¥ Disefio web responsivo Herramientas _ complementarias Estamos avanzando a paso firme alo largo de este curso ysenel punto actual donde nos encontramos parados, necesitamos desplegar herramientas adicionales, de las que hasta ahora hemos prescindido. Entre estas herramientas, nos encontramos con un servidor web personal y las herramientas para el desarrollador. ‘Veamos a continuacién que alternativas tenemos en estos terrenos y emo sacar provecho de ellas en las préximas clases, donde si vamos a necesitar ambas de forma activa. Web server Hasta ahora habiamos prescindido de un servidor ‘web, pero, para resolver correctamente algunas de las pruebas de esta clase y de las préximas, convendra tener instalado un servidor web local. Dentro de los cientos ‘de opciones disponibles para descargar servidores ‘web locales, contamos condos de las mas importantes {que cumplimentan gran parte de ls tecnologias que veremos a lo largo de este curso, Una de las opciones & [NMP Server, un complemento multiservicios que incluye el motor web Nginx, e! motor de base de datos MySQL, PHP-CGI, y un panel de inicio parcial o total de servicios, REDUSERS Ei PROGRAMADOR WEB Full Stack ‘ademas de configuracién centralizada de las opciones: ims importantes de cualquiera de estos complementos, Instalacion Para instalar este set de herramientas para servidores web, debemos accedera la pagina oficial del proyecto: https: //sourceforge.net/projects/nmpservery, al optamos por descarga la versin para nuestro sistema operativo y, por tiltimo, ejecutamos el instalador, y seguimos los pasos que este nos va indicando en pantalla, Puesta en marcha Una vezinstalado, NMP Server crea una serie de suibearpetas dentro dela carpta de instalaién, donde aloja entre otras cosas la aplicacién de administracién dasarviian yy as abearpetaccarreapO RATE PHP y MySQl, entre otras Si ejecutamos el archivo nmp.exe (en su version para Windows), podremos ver el servidor, e iniciar y detener los servicios asciados, sgn nuestra necesided detener los servicios asociades al conjunto de tecnologias qu integra NMP Server. Prueba de funcionamiento oo de NMP Server Probemos el correcto funcionamiento de este servidor web y conozcamos sus principales caracteristicas. 1. Iniciar NMP Server [ED NMP server Nginx: Running MySQL: Not Running. PHP-CGI: Not Running. HTML-Root: Clase 11 EI Disefio web responsivo 3. Visualizar documentos HTML copiados Nos queda, desde el navegador ob, iniciar una nueva ‘ventana y cargar on esta la URL do nuastra servi ‘web, Usualmente cuando sjacutamos contenido local, odemos hacerlo invocando la URL hto:/ocaihost? rnombredelarchive, html, 0 http:/127.00.{archive. html. r Finalmente, para poder acceder al servidor web dentro de la misma red donde ‘os encontramas desde, or ‘ejemplo, un teléfono movil, utge ons eapectico par Ia coneitin: | solo debemosaveriqur la P ‘ue tone asignada nuestra, uti a epecitice porn tn consi. compitedors.Siestamos enWincows, abrinos tna ventana dela inea de comandos y escribimos en ‘est incontig sida de Enter. sarcrs de taal f : ‘Acontiouacibn nos star la Se direccién IP del equipo. Esta sla que debemos uiizar pare acceder desde un smartphone, una tablet u otra computadora.. laptador de Ethernet Ethernet: laptador de LAN inalinbrica faptader de Ethernet Conexién de red Bluetooth: REDUSERS El PROGRAMADOR WEB Full Stack oe Herramientas para el desarrollador oo Tanto Google Chrome como Firefox y Edge incluyen junto asu navegador las herramientas para el desarrollador. Apartir de estas, los programadores podemos verificar decenas de funciones que se ejecutan mientras visualizamos un sitio web. Veamos, a continuacién, las principales funcionalidades que encontramos dentro de las herramientas para el desarrollador y como sacarles provecho. Origenes Red (Consola de comandos Linea de tempo Vontena de clementos Perfiles Bed id ee Condiciones de lared Sonsores Dispostivosremotas BH Clase 11 EI Disefio web responsivo Imagen 18. Elinspector de objetos ecionando Ia aj detextos de bisqueda «do la pagina principal de Firefox, Ventana de elementos: através de a ventana de elementos, ppodemos visualizar todo el contenido del documento en ‘euestin, recorror sus alamantos HTML, y ver sus propivdades fen genera. Esto es itil para apreciar los elementas HTML, CSS © JavaScript, pero no parainspeccionar, por ejemplo, rutinas de codigo eserites en PHP o Asp.NET, ya que estas itimas se ‘compilanen el servidory devuelven al navegador de cliente solo codigo basado en la tres tecnolagias principales que ccanforman un documenta HTML. Consola de comandos:. través de esta funcionalidad, accedemos a une consola que acepta el ingreso de Inspector:el inspector de objetos habilita ‘una funcion para que, através del mouse, ppodamos solaccionar cualquiora de los diferantes slementas que companen el documento HTML, y conocer asi sus atributos, propiedades, ID y clases asociadas. De esta manera, ante cualquier problema de funcionalidad, podamos rastrear, por ojempl, siesta bien escrito el llamado a una funcionalided JavaScript, 0 ver sila clase CSS aplicada es la corrects 0 no, ont otras cosas, ‘comandos y dewuelve resultados de informacién que esté ‘lgjada en cualquier documento HTML o derivados, que ‘componen el sitio web que estamos analizendo. ‘Una funcionaidad muy utiizada es lade istar mensajes de depuracién escritos on funciones o bloques de cédigo JavaScript. Mas allé de esto, le consola de comandos Ccontiene un set de instrucciones pradefinidas, que nos ‘permite averiguar mucha més informacién de lo basico. eames a continuacion un |istada dees principales funciones que podemos ejecutar ena lines de comandos: desta console: Ean Despliega y permite manipularregistros de appcache. Lista, agrega nuevos y elimina puntos de interrupetén puestos dentro del cigo. Haco un listado en formato LOG do las llamadas do funciones ala consola, Genera una conexién con un servidor determinado, para luego enviar el resto de coman- dos que eseribamos contra dicho servidr, console Permit abrir, cerrar ylimpiar el contenido de la console context Pormite sumar un profilo determinado a los préximos comandos que ejecutemos (por ejemplo: un pardmetro). cookie Lista, elimina y define as cookies referantes al sitio que estamos inspeccionando. bg Lista los comandos para controlar el depurador de la consola, disconnect Desconacta la consola del servidor remato. edit Ecita uno de los recursos cargados junto con el documenta HTML actual, export. Permite export I pagina hacia un formato o archivo por defini extensions Lista todas las extensionas instsladas en Google Chrame, REDUSERS BJ PROGRAMADOR WEB Full Stack Bo folder help highlight inject inspect, jsb listen media Pagemod paintflashing pref profiler resize restart screenshot unlisten ‘Abre un directorio de archivos del sistema utiizando una sintaxis de ubicacion, ‘Muestra la lista de comandos disponibles para ejecutar en esta consola, Resalta todos los nodos coincidentes con un selector determinado. Permiteinyectar una librera, como JQuery, en el documento HTML. Permite examinar un nodo dentro del inspector de objetos. ‘Visualizael contenido de un archivo JS. ‘Activa la depuracién remota, Emule el media type en el documento HML activo, Reeemplaza y elimina atributos y métodos en el documento active. Activa odesactiva la funcionalidad de seleccisn de contenido, Define, reestablace y despliaga preferencias, Inicia 0 detiene la funcién profiing, y abreo cierra el médulo Profiler. CControla la vista del contenido dentro del diseio responsivo, Reinicia e] navegador web. CCaptura la pantalla actual y la quarda en un archivo de imager Desactva a funcién de depuracién remota. ‘Tabla 02. Lista de comandos més usuales por ejecutar en la consola de herramientas del desarrollador. Clase 11 BI Disefio web responsivo = aie TON aE RedUSERS payers! iat ose co TVA a iPad, Chrome para Android, o Edge para Windows 10 Las herramientas: de red sobre el documento HTML, como por ejemplo navegador que carga nuestro documento HTML. ‘Sensores:la opcién de sensoresincorpora,@nuestras hherramientes de desarrollo, le opcién de poder emar ‘algunos sensores basics includos enos dspositvos ‘moviles, como geolocalzacion ola orientacin del equipo. ‘Asi podremos verifcar aplicaciones que utilicen ‘por ejemplos geolocalizacién, predeterminendo {a funcionalidad a través de alguna de las opciones disponibles en el combo Box, oingresando de forma ‘manual attudy longitud dentro de los campos ‘correspondientes. i necesitamos conocer el RedUSERS ee : ‘comportamiento del sensor Compass inciuido en un ‘mayen 22. ‘equipo y ver cémo responden los ejes Alfa, Beta y las herramient Gamma, podemos recurrr a mover la imagen visualizada del desarroliador, ‘en pantalla tal como siagitésemos wn teléfono es posible inteligonte. Asi podremos ver los valoras que desplioga ‘emular los sensores ‘cada uno de los ojes, y eventualmente conocer el de goolocalizacion yla ‘comportamiento de la aplicacién. Si no encontréramos bbrijula del dispositive. disponible el teléfono movil virtual, podriamos seleccionar ‘algunas de as posiciones predeterminadas, cargadas en ‘el combo Box Orientation REDUSERS EJ PROGRAMADOR WEB Full Stack BE Alternancia entre desktop y mobile Realicemos a continuacién una prueba basica de cémo evaluar el comportamiento de una pagina web, en un navegador web de escritorio y en un navegador web ‘mavil, emulando para este iltimo caso la presencia de uun dispositivo portétil desde el mismo navegador, Para ello, carguemos un sitio web que sabemos tiene una versién para eseritorio y otra versién para dispositivos :m6viles, Por ejemplo: wwwatserslife.com. Yaconelsitioweb cargado, invocamos las herramientas pare el deserrollador. Desde Google Chrome, names simplemente FT2 0 re worw.usersife. =i Mend principal/Mas herramientas/ www redusers.com son los portales de tienen la capacidad de adaptar su contenido @ es apostvos movies, cl desarrollador de Chrome o nuestro ‘navegador wob Herramientas para desarrolladores. ‘So activaré a continuacién el panel correspondiente a esta funcionalidad. Ubicamos entonces el apartado Network conditions, donde ros concentraramos en el user-agent. Siesta tiled opcién Select automaticaly, la destidamosy, seguido.s esto, desplagamos el combo Box Soleccionamos por timo alguna opcién de dispositive ‘mévil, como Chrome para Android, o similar. Finalmente podemos visualizar contenido del sitio adaptado ala pantalla dol dispositivo ‘mévil seleccianado, sin necesidad de mostrarla ‘emulacin de interfaz del Aispositvo, como hicimos en otros ejercicios alo largo doesta clase. el sitio web adaptado para méviles. Sino se carga automaticamente, presionemos el botén refrescar(F5) del navegador web. Clase 11 B¥ Disefio web responsivo EN LA PROXIMA CLASE.. USERS Wie practico 42. (2355 curso visuat ¥ prActico eh WEB Full Stack Porque desde cero, y sin ningun conocimiento previo, este curso te ensefiaa disefar un simple sitio que luego transformaremos en uno dinamico, interactivo y responsivo, conociendo y aprovechando las tiltimas tecnologias de desarrollo. Porque alo largo de 24 fasciculos, repletos de ejemplos, ejercicios y explicaciones visuales, aprenderas tanto los lenguajes y tecnologias frontend como backend: HTML, CSS, JavaScript, PHP, MySQL, JQuery y mas. {Son varios cursos en uno solo! Porque actualmente el perfil FULL STACK es uno de los mas demandados en el mercado laboral Te ensefaremos a darles vida a tus propios proyectos, generar un portfolio y a dar tus primeros pasos laborales como desarrollador. —_ L@,@) BS Explicaciones Gules Ejercicios practicos pasoa paso visuales eintegradores @P@, Serviciode profesores en linea [email protected] Clases anteriores Puede adquirirlas escribiendo a [email protected] usershop.redusers.com Desarrollo frontend y backend Le Ne) LSA GMI Ecosistema web GB HTMLS EI Css3 HEI Diserio Ul con CSS IE Introduccién a JavaScript GIG JavaScript orientado a objetos Integracién de HTMLS y JavaScript 1G Formularios web HEI Multimedia y APIs CSS Avanzado MIMI Diserio web responsive Sitios multiplataforma con Bootstrap PHP MysaL PHP y MySQL Webs dinémicas con Ajax y PHP Buenas précticas: analisis, tests y optimizacion HIG Fundamentos del ecosistema mobile Jquerymobile: la web mévil BGI Funcionalidades extendidas en mobile web Potenciando la faceta full stack EI Webapps y plataformas amigables BEI Versionando el desarrollo: GIT y Github Salida laboral TO wninical-scale. > “4 Dejanos tanbikeacutesn la imagen para evaluar su conportamiento.
También podría gustarte
- Computadoras de escritorio
