Scribd
Cargar
0 vistas4 páginas

Sitios WEB

El documento aborda las plataformas de visualización de sitios web, destacando el uso de dispositivos como smartphones, tablets y PCs. Se explican las diferencias entre diseño web responsivo y adaptativo, así como los tamaños de visualización comunes. Además, se presentan definiciones básicas de lenguajes de programación web como HTML5, CSS y JavaScript, junto con formatos de imagen utilizados en la web.

Cargado por

n7gost
Derechos 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, TXT o lee en línea desde Scribd
0 vistas4 páginas

Sitios WEB

El documento aborda las plataformas de visualización de sitios web, destacando el uso de dispositivos como smartphones, tablets y PCs. Se explican las diferencias entre diseño web responsivo y adaptativo, así como los tamaños de visualización comunes. Además, se presentan definiciones básicas de lenguajes de programación web como HTML5, CSS y JavaScript, junto con formatos de imagen utilizados en la web.

Cargado por

n7gost
Derechos 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, TXT o lee en línea desde Scribd
Está en la página 1/ 4

Plataformas de Visualización

Las plataformas comúnmente utilizadas para la visualización de sitios web, varía según
sea la manera de acceso del internauta, ya que, se ha expandido el auge del internet
desde sus inicios en 1969(1) hasta las llamadas plataformas una innovación y exploración
del mundo tecnológico.

Las visualizaciones son realizadas desde un smartphone mayormente, más sin embargo
existen dos variantes tablets y PC de escritorio o laptops. (2)

Tamaños de Visualización

Existen dos variantes en cuanto al


tamaño de visualizaciones que
dependen de si es adaptable o
1280x1024
responsivo. Los tamaños comunes o
1366x768
estandar se asocian a un diametro
de 1024x768, más sin embargo
existen otros:(3)
1024x768 1920x1080
800x600 1280x800

1024x620
Diferencias (Responsive vs Adaptive)
Diseño Web Responsive

En el responsivo permite que las páginas de la web se


ajusten automáticamente al sistema operativo y el
diseño de cualquier navegador, adaptándose al
dispositivo ya sea un PC de sobremesa, un portátil, un
móvil o un tablet.

Características
Diseño Web Adaptive
- Es adaptable a cualquier plano de visualización,
ya que reestructura cada elemento de la página web Con el adaptable se crean un conjunto de plantillas
para optimizar y usar la totalidad del especio de de diseño predefinidos basados en diferentes
manera beneficiosa. tamaños de pantalla de dispositivos es decir se
- El diseño está basado en la adaptación según muestra el diseño “adaptado” al dispositivo.
la pantalla del dispositivo donde se visualice la
página web. Características
- Usa un solo diseño que es capaz de adaptarse
a cualquier tamaño de pantalla. - Usa un tamaño fijo y prestablecido para cada
- Se basa en tamaños de proporción medidos en dispositivo.
porcentajes, en vez de valores valorados en píxeles. - Emplea diferentes diseño variados para una
- Usa media query (que permite la adaptación del mayor calidad de navegación del internauta.
contenido del dispositivo de visualización) y diferentes - Uos valores en píxeles se mantiene fijos.
hojas de estilos (CSS) para cada medida. - Es simplificado, trabaja con pocos códigos.
- Es flexible a cualquier resolución. - Al trabajar con valores fijos no se adaptan a
- Requiere de mayor tiempo de respuesta, cargas cualquier resolución.
o descargas de documentos, bytes y objetos - El tiempo de respuesta, carga de documento,
descargados.(4) bytes y objetos descargados en menor.(4)
Definiciones Básicas Formatos de imagen

HTML5: es la quinta generación del lenguaje básico JPG


de programación, sirve para conectar las - Mantiene el modo RGB original de la imagen.
referencias del software a medida que se va creando - Soporta un tamaño máximo de 65.535 píxeles.
la página web, básicamente define la estructura - Admite 24 bits con una profundidad de
estándar y genera un código para determinar el 16.700.000 colores.
contenido de la página.(5) - Algoritmo de compresión (con pérdida) que
soporta altas tasas de empaquetado (1/20 y más).
CSS: es un lenguaje que rige las reglas del estilo - Reduce el tamaño del mapa de bits en un
(diseño visual de la página web) que se aplican al 50-75%.
contenido de la estructura base junto con el código - Decodificación progresiva. (9)
determinante (HTML). (6)
PNG
Java Script: dicta el lenguaje de secuencias de - Mantiene la transparencia de canal de las
comandos para crear un contenido actualizado de imágenes.
dinámicamente y a su vez controlar lo que es la - Admite de 16-48 bits.
multimedia, animar imágenes y a su vez todo lo - Ofrece una comprensión un algoritmo de
demás para implementar funciones complejas en toda compresión de datos sin pérdidas.
la página web. (7) - Mantiene l código de color de la imagen original
RGB.
Wireframe: es un plano de pantalla o esquema de - Almacena el número de canales que tenga la
página que esquematiza la representación visual de imagen.
la estructura de la página web, ordenando el - Conserva los mecanismos de corrección de
contenido, incluyendo elementos de interfaz y sistemas errores para garantizar la integridad del archivo. (10)
de navegación. (8)
Referencias
Definiciones Básicas
1. https://es.wikipedia.org/wiki/Historia_de_Internet#:~:text=%E
2%80%8BLos%20inicios%20de%20Internet,1969%20y%20se%20lla
m%C3%B3%20ARPANET.
GIFF
- Admite 24 bits en una paleta de color de 256 2. https://prezi.com/erqraxmjgfjn/plataformas-utilizadas-hoy-en
con una profundidad de 16.800.000. -dia-para-la-visualizacion-de-s/
- Mantiene transparencias hasta cierto modo. 3. https://blog.g4marketingonline.com/diseno-web-adaptable-
- Soporta 8 bits por píxel en cada imagen. y-responsive-diferencias
- Compresión con pérdidas de baja calidad.
- Con capacidad para almacenar animaciones en 4. https://woko.agency/blog/diseno-web-responsive-y-adapta
bucle de 5-10 segundos. tivo-diferencias/#:~:text=El%20dise%C3%B1o%20web%20respon
sive%20y,dispositivo%20para%20asegurar%20su%20visualizaci%
- Retiene 60 cuadros aproximados en animaciones. C3%B3n.&text=La%20principal%20diferencia%20es%20que%20el
(11) %20dise%C3%B1o%20responsive%20se%20adapta%20literalmen
te.
SVG
- Es fácil de escalar sin perder resolución por su 5. https://openwebinars.net/blog/que-es-html5/
capacidad vectorial.
- Se basa en un leguaje extensible (XML). 6. https://openwebinars.net/blog/que-es-css3/
- Formado por etiquetas escritos por un texto plano. 7. https://developer.mozilla.org/es/docs/Learn/Jav
- Permite una definición mayor en tamaños aScript/First_steps/Qu%C3%A9_es_JavaScript
reducidos.
- Es capaz de soportar estilos CSS en sus capas. 8. https://es.wikipedia.org/wiki/Website_wireframe
- Incluye dentro de sus capas tipografías con
9. https://www.ecured.cu/JPEG#Caracter.C3.ADstic
trazados bajo el formato TrueType y Tipo 1. (12) as_del_formato

10. https://redgrafica.com/el-formato-png154/

11. https://rockcontent.com/es/blog/que-son-los-gifs/

12. https://fp.uoc.fje.edu/blog/que-es-el-formato-de-imagen
es-svg-y-para-que-sirve/

También podría gustarte