Examen de Kant - WordPress.com
Desarrollo de sitios Web con HTML5, CSS3, jQuery y Responsive Web Design. ● Lección 1. Creando tu primera página Web en HTML5. ○ ¿Qué es HTML5 y CSS3? ○ Términos comunes utilizados en HTML. ■ Elementos. ■ Etiquetas. ■ Atributos. ○ Estructura de un documento en HTML. ■ Elementos abiertos. ■ Validación de código. ○ Términos comunes utilizados en CSS. ■ Selectores. ■ Propiedades. ■ Valores. ○ Trabajando con selectores. ■ Selectores de tipo. ■ Selectores de clase. ■ Selectores ID. ■ Selectores adicionales. ○ Implementación de hojas de estilo en cascada (CSS). ■ Otras opciones para incluir código CSS. ■ Uso de hojas de estilo reset. ● Pruebas y compatibilidad en navegadores. ● Lección 2. Introducción al lenguaje HTML. ○ Semántica general. ○ Elementos <div> y <span>. ■ Elementos de bloque y en línea. ■ ¿Cómo agregar comentarios en HTML y CSS? ○ Uso e implementación de elementos basados en texto. ■ Encabezados (elementos <h1> <h6>). ■ Párrafos (elemento <p>). ■ Texto en negrita (elemento <strong>). ■ Texto en itálica (elemento <em>). ○ Estructura base para documentos en HTML5. ■ ○ El encabezado de la página (elemento <header>). ● Diferencias entre el uso de elementos <header>, <head>, <h1> <h6>. ■ Área de navegación (elemento <nav>). ■ Artículos (elemento <article>). ■ Secciones (elemento <section>). ■ ¿Cuándo utilizar los elementos <article>, <section> o <div>? ■ Barras laterales (elemento <aside>). ■ Pie de página (elemento <footer>). ■ Codificación de caracteres especiales. Vínculos o anclas (elemento <a>). ■ Uso de vínculos como elementos de bloque. ■ Rutas relativas y absolutas. ■ Vínculos a direcciones de correo electrónico. ■ Enlaces en una nueva ventana. ■ Enlaces a diferentes secciones en la misma página. ● Lección 3. Introducción al uso de hojas de estilo en cascada (CSS). ○ ¿Cómo funcionan las hojas de estilo en cascada? ■ Propiedades en cascada. ○ Cálculo de especificidad. ■ Puntos de especificidad. ○ Selectores combinados. ■ Espaciado entre selectores. ■ Especificidad en selectores combinados. ○ Implementación de estilos con múltiples clases. ○ Valores comunes en propiedades CSS. ■ Colores. ■ Palabras clave en nombres para uso de colores. ■ Colores en valor hexadecimal. ■ Colores en formatos RGB y RGBa. ■ Colores en formatos HSL y HSLa. ■ Longitud (length). ● Longitud absoluta. ○ Uso e implementación de unidades en píxeles. ● Longitud relativa. ○ Uso e implementación de valores porcentuales. ○ Uso e implementación de valores en unidades “em”. ● Lección 4. El modelo de cajas. ○ ¿Cómo se despliegan los elementos de una página Web en el navegador? ■ La propiedad “display”. ○ ¿Qué es el modelo de cajas? ○ Trabajando con el modelo de cajas. ■ Ancho y alto (propiedades “width” y “height”). ● Ancho (propiedad “width”). ● Alto (propiedad “height”). ○ Dimensionamiento de elementos en línea. ■ Márgenes y espacio interno (propiedades “margin” y “padding”). ● ● ● ● ○ Márgenes (propiedad “margin”). Espacio interno (propiedad “padding”). Márgenes y espacio interno en elementos en línea. Sintaxis utilizada en declaraciones de margen y espacio interno. ○ Aplicación de color en márgenes y espacio interno. ■ Bordes. ● Tamaños de línea individuales en bordes. ● Bordes redondeados (propiedad “borderradius”). ■ Uso e implementación de la propiedad “boxsizing”. ● Valor “contentbox”. ● Valor “paddingbox”. ● Valor “borderbox”. ● Elección del tamaño de caja adecuado. Herramientas para desarrollo Web. ● Lección 5. Posicionamiento de contenido. ○ Posicionamiento a través de elementos flotantes (propiedad “float”). ■ Ruptura de flotación y uso de contenedores para elementos flotantes. ● Ruptura de flotación (propiedad “clear”). ● Contenedores para elementos flotantes. ○ Posicionamiento con elementos en línea. ■ Eliminación de espacios en blanco entre elementos en línea. ○ Generación de estructuras reutilizables (layouts). ○ Elementos con posicionamiento único. ■ Posicionamiento relativo. ■ Posicionamiento absoluto. ● Lección 6. Tipografía. ○ Diferencia entre tipo de letra (typeface) y fuente (font). ○ Agregando color al texto. ○ Propiedades para el manejo de fuentes. ■ Familia (propiedad “fontfamily”). ■ Tamaño (propiedad “fontsize”). ■ Estilo (propiedad “fontstyle”). ■ Variación (propiedad “fontvariant”). ■ Grosor (propiedad “fontweight”). ■ Espacio entre líneas (propiedad “lineheight”). ■ La propiedad simplificada “font”. ○ Aplicación de propiedades en elementos basados en texto. ■ Alineación (propiedad “textalign”). ■ Decoración (propiedad “textdecoration”). ■ Sangrado (propiedad “textindent”). ■ Sombreado de texto (propiedad “textshadow”). ● Sombreado de elementos de bloque (propiedad “boxshadow”). ■ Transformación (propiedad “texttransform”). ■ Espaciado entre letras (propiedad “letterspacing”). ■ Espaciado entre palabras (propiedad “wordspacing”). ○ Uso e implementación de fuentes seguras para Web (Websafe fonts). ○ ○ Incorporación de fuentes en proyectos Web. Inclusión de menciones y citas. ■ El elemento <cite>. ■ El elemento <q>. ● Uso del atributo “cite” en elementos <q>. ■ El elemento <blockquote>. ● Uso del atributo “cite” en elementos <blockquote>. ● Lección 7. Colores, degradados e imágenes de fondo. ○ Colores de fondo (propiedad “backgroundcolor”). ■ ¿Cómo incluir un color de fondo transparente? ○ Imágenes de fondo (propiedad “backgroundimage”). ■ Repetición en imágenes de fondo (propiedad “backgroundrepeat”). ■ Posicionamiento de imágenes de fondo (propiedad “backgroundposition”). ■ La propiedad simplificada “background”. ○ Uso e implementación de colores de fondo degradados. ■ El uso de prefijos en navegadores para colores degradados. ■ Degradados de tipo lineal. ● Orientación en degradados lineales. ■ Degradados de tipo radial. ● Herramientas en línea para la generación de degradados. ■ Implementación de etapas de color (color stops). ○ Uso e implementación de múltiples imágenes de fondo. ○ Nuevas propiedades CSS3 para uso de colores, degradados e imágenes de fondo. ■ La propiedad “backgroundsize”. ● Uso de valores “cover” y “contain” en la propiedad “backgroundsize”. ■ Las propiedades “backgroundclip” y “backgroundorigin”. ● Lección 8. Listas. ○ Listas no ordenadas (elemento <ul>). ○ Listas ordenadas (elemento <ol>). ■ El atributo “start”. ■ El atributo “reversed”. ■ El atributo “value”. ○ Listas de definición (elemento <dl>). ○ Listas anidadas. ○ Aplicación de estilos a elementos en listas. ■ Uso de la propiedad “liststyletype”. ■ Uso de imágenes como viñetas en elementos de tipo lista. ■ Posicionamiento de viñetas (propiedad “liststyleposition”). ■ La propiedad simplificada “liststyle”. ○ Despliegue horizontal de elementos en una lista. ■ Despliegue de elementos de lista (uso de la propiedad “display”). ■ Flotación de elementos de lista (uso de la propiedad “float”). ■ ¿Cómo generar una barra de navegación utilizando elementos de lista? ● Lección 9. Uso e implementación de recursos multimedia. ○ Integración y manejo de imágenes (elemento <img>). ■ ■ ■ ○ ○ ○ ○ Formatos de imagen soportados en los navegadores más utilizados en el mercado. Dimensionamiento de imágenes. Posicionamiento de imágenes. ● Posicionamiento en línea. ● Posicionamiento en bloque. ● Flotación de imágenes. ○ ¿Utilizar elementos de tipo imagen o imágenes de fondo? Integración y manejo de archivos de tipo audio. ■ Atributos utilizados en el elemento <audio>. ■ Implementación y sintaxis de la etiqueta <audio>. Integración y manejo de video. ■ Personalización de controles para audio y video. ■ Uso de imágenes para vista previa en videos (atributo “poster”). ■ Implementación y sintaxis de la etiqueta <video>. ■ Formatos de audio y video en HTML5. Uso de marcos (elemento <iframe>). ■ Uso del atributo “seamless”. Los elementos <figure> y <figcaption>. ■ Uso e implementación del elemento <figure>. ■ Uso e implementación del elemento <figcaption>. ● Lección 10. Formularios. ○ Integración de formularios. ○ Campos y áreas de texto. ■ Uso y manejo de campos de entrada (elemento <input>). ● Selección de color (elemento tipo “color”). ● Introducción de direcciones de correo electrónico (elemento tipo “email”). ● Rangos (elemento tipo “range”). ● Hora (elemento tipo “time”). ● Fecha (elemento tipo “date”). ● Mes (elemento tipo “month”). ● Búsqueda (elemento tipo “search”). ● URL (elemento tipo “url”). ● Fecha y hora (elemento tipo “datetime”). ● Valores numéricos (elemento tipo “number”). ● Teléfono (elemento tipo “tel”). ● Semana (elemento tipo “week”). ■ Uso y manejo de áreas de texto (elemento <textarea>). ○ Elementos de selección múltiple y menús. ■ Radio buttons (elementos de tipo “radio”). ■ Check boxes (elementos de tipo “checkbox”). ■ Listas desplegables (elementos <select> y <option>). ■ Elementos de selección múltiple. ○ Botones. ■ Elemento de entrada de tipo “submit”. ■ Botón de tipo “submit”. ○ Otros elementos para la entrada de datos. ■ Valores ocultos (elemento tipo “hidden”). ○ ○ ■ Campo para selección de archivos (elemento tipo “file”). Distribución de elementos en formularios. ■ Etiquetas (elemento <label>). ● Etiquetas con campos de entrada anidados. ■ Contenedores de campos (elemento <fieldset>). ■ Leyendas (elemento <legend>). Atributos para formularios y campos de entrada. ■ Campo inactivo o inhabilitado (atributo “disabled”). ■ Texto de posición (atributo “placeholder”). ■ Campo requerido (atributo “required”). ■ Atributos adicionales en formularios. ● Formatos de archivo aceptados en un formulario (atributo “accept”). ● Procesamiento de datos recopilados (atributo “action”). ● Validación no requerida (atributo “novalidate”). ● Elementos de sólo lectura (atributo “readonly”). ● Autocompletado (atributo “autocomplete”). ● Codificación de datos a enviar (atributo “enctype”). ● Despliegue de respuesta en el envío de datos en una nueva ventana o pestaña (atributo “target”). ● Valor mínimo aceptado en campos de tipo numérico o de fecha (atributo “min”). ● Enfoque automático (atributo “autofocus”). ● Método a utilizar para la recepción de datos (atributo “method”). ● Valor máximo aceptado en campos de tipo numérico o de fecha (atributo “max”). ● Patrones para el establecimiento de caracteres aceptados por un campo en un formulario (atributo “pattern”). ● Establecimiento de intervalos para campos de tipo numérico (number), rango (range), fecha (date), fechahora (datetime), fechahora local (datetimelocal), mes (month), hora (time) y semana (week). Atributo “step”. ● Lección 11. Tabulación y organización de datos en tablas. ○ Uso y creación de tablas. ■ El elemento <table>. ■ Filas (elemento <tr>). ■ Celdas o datos (elemento <td>). ■ Encabezado de tabla (elemento <th>). ○ Estructura de una tabla. ■ Título de tabla (elemento <caption>). ■ Cabeza, cuerpo y pie de tabla (elementos <thead>, <tbody> y <tfoot>). ■ ¿Cómo combinar celdas? ○ Bordes en tablas. ■ Modelo aplicado al borde (propiedad “bordercollapse”). ■ Espacio entre bordes (propiedad “borderspacing”). ■ Bordes en filas. ○ Aplicación de estilos a tablas. ○ Alineación de texto en tablas. ● Lección 12. Uso de mejores prácticas. ○ Mejores prácticas para la codificación en HTML. ■ Codificación de acuerdo a estándares. ■ Uso de elementos semánticos. ■ Determinar la estructura adecuada en un documento. ■ Mantener el código organizado. ■ Uso práctico y adecuado de clases y ID’s. ■ Indicar texto alternativo en imágenes (atributo “alt”). ■ Separar el contenido de las hojas de estilo. ■ Evitar el uso excesivo de elementos <div>. ■ Factorización constante de código. ○ Mejores prácticas en hojas de estilo en cascada (CSS). ■ Organización de código a través de comentarios. ■ Generación de código CSS sin olvidar saltos de líneas y tabulaciones. ■ Uso apropiado en nombres de clase. ■ Selectores eficientes. ■ Implementación de clases específicas cuando sea necesario. ■ Uso de propiedades simplificadas y sus correspondientes valores. ■ Uso simplificado de código en hexadecimal para valores de color. ■ Sintaxis para valores en cero. ■ Organización y agrupación de prefijos para compatibilidad entre navegadores. ■ Estilos reutilizables. ○ Recursos adicionales.
© Copyright 2024