MP9-Diseño de Interfaces web UF1. DAW Ilerna 22-23

Marca la respuesta más correcta: ¿Cuáles son los elementos de diseño principales a tener en cuenta en la percepción visual?. Color y percepción. Color, tipografía e iconos. El mapa de navegación. La cabecera.

Selecciona las respuestas correctas: ¿Qué puede tener una composición gráfica?. Espacios en blanco. Texto o imágenes. Debe intentar adaptarse a lo que se pretende transmitir. Solo debería estar formada por un único elemento. No debe tener espacios en blanco.

En informática, los entornos gráficos se basan en la numeración de la intensidad de tres colores, ¿Cuáles son?. Blanco, negro y amarillo. Rojo, verde y azul. Rojo, amarillo y verde. Verde, azul y blanco.

Relaciona cada color con su código correcto: #FF0000. #00FF00. #0000FF. #FFFF00.

Marca las respuestas correctas sobre la tipografía: Es la parte escrita, es decir, texto. Es importante tener diferentes tipos de fuentes en la página. Podemos estar limitados por distintos navegadores o sistemas operativos. El espacio en blanco no es importante en la tipografía.

Marca las respuestas correctas sobre los iconos: No es importante elegir bien los iconos. Con el uso de iconos ahorramos información textual. Son generalmente imágenes pequeñas cuyo objetivo es relacionar acciones en concreto. Insertando iconos, evitamos escribir gran cantidad de texto para explicar determinadas acciones. El uso de iconos nos perjudica a la hora de insertar el texto.

¿Qué es un CMS?. Ninguna de las respuestas es correcta. Un tipo de tipografía. Una plantilla de XML. Un gestor de contenidos.

Señala las respuestas correctas sobre la Interacción persona-ordenador: Cuando existe una buena comunicación entre ambos, el intercambio de información es más eficiente. La interfaz se tiene que realizar pensando en las necesidades del usuario. Se reducen los errores al existir una buena comunicación entre persona-ordenador. La interfaz se tiene que adaptar únicamente a las personas de un sector en concreto. Se consigue una mayor satisfacción por parte del usuario.

¿Para que sirve una guía de estilo?. Diseñar y programar los aspectos relacionados con una interfaz. Hacen que el lenguaje sea más eficaz y coherente. Permiten la integración de un mismo objetivo a todo el conjunto del equipo de trabajo. Definen las pautas junto con las normas de calidad que debe tener en cuenta una interfaz web para un determinado sitio web. Nos garantizará la coherencia del sitio.

De los siguientes programas, indica cuáles son gestores de contenido: Joomla. Drupal. Bootstrap. Sublime Text. WordPress. Prestashop. Notepad +.

Relaciona los siguientes conceptos, con el componente de la interfaz web al que corresponde: -Se pueden incorporar efectos dinámicos para ofrecer una mejor interacción con las diferentes opciones -Se pueden presentar en forma de menús. Pie de página. Cuerpo de página. Sistemas de navegación. Espacios en blanco. Cabecera.

Relaciona los siguientes conceptos, con el componente de la interfaz web al que corresponde: -Es fundamental para lograr que un diseño no sea sobrecargado -Define las zonas que no tendrán elementos gráficos. Pie de página. Cuerpo de página. Sistemas de navegación. Espacios en blanco. Cabecera.

Relaciona los siguientes conceptos, con el componente de la interfaz web al que corresponde: -Normalmente se sitúa el logotipo que identifica el sitio web con la empresa -Unifica todas las páginas Separa el borde superior de la parte central. Pie de página. Cuerpo de página. Sistemas de navegación. Espacios en blanco. Cabecera.

Los componentes de una interfaz web hacen referencia a todas las partes que forman parte de un sitio web. Relaciona cada componente de una interfaz web con su número correspondiente: Corresponde con el número 1. Header. Footer. Main column. Sidebar.

Los componentes de una interfaz web hacen referencia a todas las partes que forman parte de un sitio web. Relaciona cada componente de una interfaz web con su número correspondiente: Corresponde con el número 2. Header. Footer. Main column. Sidebar.

Los componentes de una interfaz web hacen referencia a todas las partes que forman parte de un sitio web. Relaciona cada componente de una interfaz web con su número correspondiente: Corresponde con el número 3. Header. Footer. Main column. Sidebar.

Los componentes de una interfaz web hacen referencia a todas las partes que forman parte de un sitio web. Relaciona cada componente de una interfaz web con su número correspondiente: Corresponde con el número 4. Header. Footer. Main column. Sidebar.

Los diferentes sitios web están formados por una serie de páginas escritas en algún tipo de lenguaje, conocidos como lenguaje de marcas. Señala cuál de los siguiente lenguajes corresponden a lenguajes de marca: HTML. Todas las opciones son correctas. XML. XHTML.

Herramienta que se utiliza para aquellos programas que tienen un interés general, es decir, para cualquier tipo de usuario. General. Diseño. Multimedia. Programación.

Herramienta utilizada para programas más específicos referentes al desarrollo de las distintas páginas web. General. Diseño. Multimedia. Programación.

Herramienta que se utilizará cuando sea necesario crear una serie de animaciones para un determinado sitio web. General. Diseño. Multimedia. Programación.

Al ser más específicos, estas herramientas van a ir estar dirigidas a los desarrolladores que van a crear páginas web. General. Diseño. Multimedia. Programación.

Herramientas que simplifican la creación, edición y comprobación de un determinado código CSS. Editores y validadores HTML. Eitores y validadores CSS. Multimedia. Programación.

Estos programas permiten la edición de código HTML. Editores y validadores HTML. Eitores y validadores CSS. Multimedia. Programación.

Según esta imagen, ¿a qué tipo de estructura de mapas de navegación hace referencia? Las páginas tienen una lectura secuencial, parecida a la de un libro. Reticular. Lineal. Jerárquica. Lineal Jerárquica.

Actualmente, ¿con qué etiqueta realizamos una parte de la maquetación en HTML?. <div>. <p>. <span>. <table>.

Según esta imagen, ¿a qué tipo de estructura de mapas de navegación hace referencia? Se suele utilizar en sitios que se encuentran relacionados entre ellos. Lineal jerárquica o Compuesta. Jerárquica. Reticular o No lineal. Lineal.

Según esta imagen, ¿a qué tipo de estructura de mapas de navegación hace referencia? Es la más utilizada y suele utilizarse cuando aparecen diferentes secciones que están bien diferenciadas. Lineal. Reticular o No lineal. Jerárquica. Lineal jerárquica o Compuesta.

Según este código css, ¿a qué reglas css corresponde el elemento "H1"? h1 {font-family: Verdana;}. Selector. Propiedad o atributo. Valor.

UF1: Según este código css, ¿a qué reglas css corresponde el elemento "Font-family"? h1 {font-family: Verdana;}. Selector. Propiedad o atributo. Valor.

UF1: Según este código css, ¿a qué reglas css corresponde el elemento "Verdata"? h1 {font-family: Verdana;}. Selector. Propiedad o atributo. Valor.

Para conseguir las letras "Ilerna Online" de color blanco: ¿Cuál de las siguientes opciones es correcta?. backgound-color: white;. background: white;. font: white;. color: white;.

Para comentar una línea en un archivo css, ¿cómo indicaremos los comentarios?. //. /* */. // ... //. ** ... **.

¿Con qué opción de linea de estilo css podemos conseguir el siguiente resultado?. p * a {Font-size: 50px}. p {font-size: 50px}. p a {font-size: 50px}. p enlace {font-size: 50px}.

Dado el siguiente código: Para modificar únicamente el color del texto del párrafo a color blanco, ¿qué selector utilizaremos?. h1 { color: white;}. * { color: white;}. p { color: white;}. h1 p { color: white;}.

¿Cuál de las siguientes propiedades se utiliza para hacer una letra cursiva?. font-family. font-style. font-variant. font-weight.

¿Con qué opción de linea de estilo css podemos conseguir el siguiente resultado?. p a {font-size: 50px}. div p {font-size: 50px}. p * a {Font-size: 50px}. p {font-size: 50px}.

Relaciona cada definición con la forma correspondiente de seleccionar un atributo: Selecciona los elementos que tienen ese mismo atributo, sin importar su valor. [atributo]. [atributo = valor]. [atributo ~= valor]. [atributo |= valor].

Relaciona cada definición con la forma correspondiente de seleccionar un atributo: Selecciona los elementos que tienen ese mismo atributo con el valor que se pasa. [atributo]. [atributo = valor]. [atributo ~= valor]. [atributo |= valor].

Relaciona cada definición con la forma correspondiente de seleccionar un atributo: Selecciona los elementos que tienen ese mismo atributo con al menos un valor igual al especificado. [atributo]. [atributo = valor]. [atributo ~= valor]. [atributo |= valor].

Relaciona cada definición con la forma correspondiente de seleccionar un atributo: Selecciona los elementos que tienen ese mismo atributo y la palabra debe comenzar por el valor que se pasa. [atributo]. [atributo = valor]. [atributo ~= valor]. [atributo |= valor].

UF1: Relaciona los elementos según las indicaciones del usuario: Los enlaces que nunca se visitan. :link. :visited. :hover. :active. :focus.

UF1: Relaciona los elementos según las indicaciones del usuario: Los enlaces que se han visitado una vez como mínimo. :link. :visited. :hover. :active. :focus.

UF1: Relaciona los elementos según las indicaciones del usuario: Los elementos indicados por el usuario, pero sin necesidad de ser activados. :link. :visited. :hover. :active. :focus.

UF1: Relaciona los elementos según las indicaciones del usuario: Los elementos que se activan. :link. :visited. :hover. :active. :focus.

UF1: Relaciona los elementos según las indicaciones del usuario: Los elementos que tiene el foco. :link. :visited. :hover. :active. :focus.

Relaciona cada uno de los estilos en línea basados en etiquetas y en clases con la opción que corresponda: a. color. 20px. h3. font-size.

Si queremos aplicar un texto de color rojo y un tamaño de letra de 30 px, ¿qué opción será la correcta?. p{color:red; font: 30px; }. p{color-font:red; font: 30px; }. p{color:red; font-size: 30px; }. p{background:red; font-size: 30px; }.

Relaciona los distintos estilos en línea basados en etiquetas y en clases con la opción que corresponda: Para referirnos a la primera línea de un texto. ::first-line. ::first-letter. ::before. ::after.

Relaciona los distintos estilos en línea basados en etiquetas y en clases con la opción que corresponda: Para referirnos a la letra de un texto. ::first-line. ::first-letter. ::before. ::after.

Relaciona los distintos estilos en línea basados en etiquetas y en clases con la opción que corresponda: Genera texto antes del contenido de un elemento. ::first-line. ::first-letter. ::before. ::after.

Relaciona los distintos estilos en línea basados en etiquetas y en clases con la opción que corresponda: Genera texto después del contenido de un elemento. ::first-line. ::first-letter. ::before. ::after.

Los ID nos ofrece la posibilidad de seleccionar una sola línea de una página completa. Verdadero. Falso.

Si queremos dar más prioridad, podemos hacerlo haciendo uso de la palabra reservada !interest. Verdadero. Falso.

La guía de estilo solo detalla la implementación de las clases de CSS. Verdadero. Falso.

¿Qué realiza el siguiente código?. Colorea el título en rojo. Subraya el texto de los párrafos. Una animación con jquery. Pone una imagen como fondo en el div.

¿Qué representan las siguientes sintaxis?. Son pseudo-clases. Ninguna de las respuestas es correcta. Son reglas descendentes. Es una sintaxis de jquery.

Indica las afirmaciones que son correctas: El enlace al mapa de sitio que suele ir colocado en el pie de todas las páginas. El enlace de contacto que suele ir ubicado en el encabezado de todas las páginas. El logo de la empresa que suele ir ubicado en el encabezado de todas las páginas. Los enlaces a las secciones principales del sitio que suelen ir ubicadas en el encabezado de todas las páginas.

¿Cómo se llama al documento en el que se definen las pautas junto con las normas de calidad que debe tener en cuenta una interfaz web para un determinado sitio web?. Guía de calidad. Guía de diseño. Normas de estilo. Guía de estilo.

Los enlaces que hemos visitado como mínimo una vez, ¿qué pseudo-clase se aplica?. :hover. :focus. :visited. :link.

¿Cuál de estos lenguajes son estándares que nos permiten asegurar la continuidad de un sitio web frente a posibles cambios de tecnología?. UML. XHTML. XML. HTML.

¿Qué error hay en el siguiente fragmento de CSS?. La propiedad backgound-repeat no existe en CSS. La propiedad no-repeat no existe en CSS. No está bien implementado el background-position. No hay errores en este código.

Si queremos hacer un diseño pensando en el usuario, tendremos en cuenta: Sus capacidades, aptitudes y expectativas. Sus características y experiencia previa en el uso de la web. Sus limitaciones físicas y/o ténicas. Su titulación y habilidades manuales.

¿Qué realiza este fragmento de código?. Todos los párrafos de la web comienzan por letra mayúscula. Todos los párrafos de la web aparecen subrayados. Todos los encabezados de la web empiezan por letra mayúscula. Todos los párrafos de una página web aparecen en cursiva.

Un párrafo tiene un tamaño de letra definido como 1.25em. Expresado como un porcentaje, ¿cuánto más grande será el tamaño de letra de este párrafo comparado con el resto de párrafos?. 25%. 125%. 50%. 100%.

¿Cómo se hace en CSS para que el símbolo de los elementos de una lista sea un cuadrado?. type: square. list-style-type: square. list-type: square. style-list: square.

En CSS, ¿qué pseudo clase se emplea para definir una propiedad cuando el cursor del ratón se sitúa sobre un elemento?. :active. :hover. :over. :on.

¿Cuál es la sintaxis correcta de CSS para que todos los elementos <p> aparezcan en negrita?. p {text-decoration:bold}. p {text-size:bold}. p {text-style:bold}. p {font-weight:bold}.

En CSS, ¿cómo se escribe un selector para que una regla se aplique a todos los párrafos que sean descendientes directos (hijos) de un elemento artículo (article)?. article p. article,p. article>p. article+p.

¿Cuál es la sintaxis correcta en CSS?. {body=color:black}. {body:color=black}. body {color:black}. body {color=black}.

En informática, los entornos gráficos se basan en la numeración de la intensidad de tres colores. ¿Cuáles son?. Rojo, verde y azul. Rojo, amarillo y verde. Verde, azul y blanco. Blanco, negro y amarillo.

¿Cuál de las siguientes opciones no pertenece a una propiedad de tipografía?. font-family. font-weight. font-style. font-low.

¿Qué es un CMS?. Un gestor de contenidos. Un tipo de tipografía. Un tipo de plantilla. Un lenguaje de programación.

¿Cuál de las siguientes opciones es un componente de la interfaz web fundamental para lograr que un diseño no esté sobrecargado y que define las zonas que no tendrán elementos gráficos?. Espacios en blanco. Cabecera. Pie de página. Cuerpo de página. Sistema de navegación.

¿Cuál de las siguientes opciones es un componente de la interfaz web donde se sitúa el logotipo que identifica el sitio web con la empresa, unifica todas las páginas y separa el borde superior de la parte central?. Cabecera. Cuerpo de página. Sistema de navegación. Pie de página. Espacios en blanco.

Como existen plantillas ya prediseñadas que podemos utilizar, no es necesario adaptarlas a nuestras necesidades. Verdadero. Falso.

¿Qué tipo de selector aplicarías para modificar el siguiente fragmento de código? #content { color: blue; }. Selector identificador. Selector clase. Selector etiqueta. Selector universal.

El selector a:hover se emplea para definir el estilo de: Cuando el ratón pasa por encima. El enlace visitado. El enlace activo. Los enlaces que no se han visitado.

Solamente existen validadores HTML para comprobar si la estructura del documento cumple con los estándares. Verdadero. Falso.