UNIDAD 2 Flashcards
Que es lo que los usuarios ven y lo que no ven en las paginas web
Lo que vemos: Navegador recibe HTML, CSS y Javascript del servidor y lo interpreta para crear la página que vemos.
Lo que no vemos: uso de bases de datos, lenguajes como PHP, ASP.Net, Java o Ruby en el servidor, para producir HTML y CSS.
HTML (cómo es, para qué sirve)
● HyperTextMarkupLanguage.
● Describe la estrucutra de la pagina.
● Utiliza elementos (etiqueta, nombre, atributo) que describen la información que
contienen.
CSS selector y precedencia
● Cascading Style Sheets.
● Controla el diseño de las paginas, la apariencia.
● Define reglas que dicen como se muestran los elementos. Formadas por selector
(elemento a aplicar al regla) y declaracion (como debe mostraste)
● Selectores mas usados:
✓ Universal: * {}
✓ Tipo: h1, h2, p, a… ✓ Clase: .class {}
✓ Atributo: p[attr]
✓ ID: #id {}
✓ Descendiente: p a {}
● Precedencia:
✓ Última regla: selectores son idénticos, último en aparecer toma precedencia.
✓ Especificidad: selector más específico que otro toma precedencia por sobre
el resto.
✓ Importante: !important luego de cualquier valor de propiedad indica que esa
regla debe ser considerada más importante que las otras que puedan aplicar al element.
CSS boxes
● Elementos de tipo block, tienen width y height.
● Tienen border, margin, p adding.
Explique DOM y AJAX
● DOM:
✓ Document Object Model.
✓ Convención independiente del lenguaje y plataforma que permite a los
programas y scripts acceder de forma dinámica y actualizar el contenido,
estructura y estilo de documentos HTML y XML.
● AJAX:
✓ Asynchronous JavaScript And XML.
✓ Técnica de desarrollo Web que permite crear sitios interactivos.
✓ Permite realizar cambios a las páginas de un sitio Web sin tener qye
recargarlas en su totalidad (aumenta interactividad, velocidad y usabilidad)
Cuales son los tipos de font, cual es la diferencia entre las font families
● Serif:
✓ detalles en los trazos principales de las letras conocidos como serifs.
✓ mas faciles de leer en fragmentos extensos de texto impreso.
● Sans-Serif:
✓ líneas rectas, diseño más limpio.
✓ texto pequeño más fácile de leer.
● Monospace:
✓ cada letra tiene el mismo ancho.
✓ utilizadas para representar código (mas facil de seguir).
Estrategias para desarrollar una página web
● Hay 2 modelos:
✓ Clasico:
■ Por cada petición de datos realizada por el usuario, el navegador Web necesita hacer un viaje de ida y vuelta al servidor para conseguir dicha información.
■ Cada interacción requiere de una recarga de la página.
✓ Ajax :
■ Por cada petición de datos realizada por el usuario, el navegador Web también necesita hacer un viaje de ida y vuelta al servidor para conseguir dicha información.
■ Cada interaccion no requiere recargar la pagina entera, solo la informacion solicitada.
■ Permite realizar tareas mientras se pide información.
Donde puede estar el codigo JavaScript
● En línea (in-line): dentro de una etiqueta HTML (por ejemplo, onclick o onmouseover). No es una práctica recomendada.
● Interna: dentro del documento HTML utilizando el par de etiquetas y ) dentro de los elementos o .
● Externa: en un archivo externo especificado en el atributo src de la etiqueta . Esta última tiene numerosas ventajas:
✓ Simplifica el documento HTML.
✓ Evita la repetición de código en diferentes archivos HTML.
✓ Permite que el navegador guarde en cache los archivos, haciendo que las
páginas se carguen más rápidas
Política de same origin y soluciones
● Restringe el contenido Web con el que Javascript puede interactuar.
● Restringe como un documento puede interactuar con un recurso de otro origen.
● Se dice que dos documentos tienen el mismo origen, si o solo sí las direcciones URL
a partir de las cuales fueron cargados tienen el mismo protocolo, nombre de host y
puerto.
● Soluciones:
✓ Cross-Domain Proxy: construir un proxy en el servidor Web para que se efectuen las solicitudes a traves de el en vez del servidor web
✓ Cross-Origin Resource Sharing (CORS)
✓ Usar patrón de On-Demand JavaScript (o JSONP): agregar mediante
JavaScript nuevos elementos en el DOM del sitio Web con atributos src generados de manera dinámica.
Para que sirve el z-index en css. Despues de esa me dijo como puedo hacer para tener solapamiento entre los elementos
● Permite especificar que elemento en bloque debe ser mostrada sobre otras.
● Para solapar elementos se puede posicionarlos relative o absolute y utilizar el
z-index.
Usabilidad de ajax (casos de uso)
● Validación en tiempo real de formularios (validar datos antes de enviarlos al servidor).
● Autocompletado.
● Carga bajo demanda.
● Controles de interfaz de usuario y efectos sofisticados.
● Refresco de información (actualizar informacion sin recargar la pagina completa).
● Envío parcial de información (enviar informacion sin tener que enviar todo el
contenido de la pagina).
● Mashups (mezclar contenido con por ejemplo google maps).
● SPAs (single page applications).
Explicar el Doctype
● Le indica al navegador que version de HTML se utilizara.
Explicar para qué sirve Vuetify (consistencia, etc)
Es un framework de UI construido sobre Vue que sirve para crear codigo simple, responsivo y consistente.
Describa caracteristicas principales del DOM level 1
● Avance significativo respecto de sus versiones anteriores.
● No sólo permite obtener un modelo exacto del HTML (o XML), sino que también
permite cambiar el documento en tiempo de ejecución.
● Elementos se representan como un árbol de objetos.
Diferencia entre display y visibility / css puede sacar elementos del dom?
● display: permite transformar un elemento de tipo en línea al tipo en bloque y viceversa, además puede remover un elemento de la página.
● visibility: permite ocultar el contenido de una caja dejando el espacio que esta ocuparía (puede ser hidden o visible).
● Visibility hidden oculta el elemento pero sigue ocupando lugar en el flow del documento, display none deja de ocupar espacio en el documento.
● CSS no puede quitar elementos del dom, solo javascript es capaz de hacerlo mediante remove().
