Act 06 - CSS para aplicaciones web y responsibo

Act 06 - CSS.pptx

1. CCS3 { < Es un lenguaje de diseño utilizado para describir la presentación de los elementos HTML. Es utilizado para establecer el color, el tamaño, la posición, la fuente, entre otras propiedades de los elementos en una página web. Es esencia para darle estilo y diseño a una página web. > [ Cascading Style Sheets ] CSS3 < Definicion > }

2. Cascading Style Sheets { Con CSS, los desarrolladores web pueden separar la estructura de una página web (definida con HTML) de su presentación visual. Esto permite que los diseños sean reutilizados y modificados fácilmente en varias páginas web, lo que agiliza el proceso de desarrollo y facilita el mantenimiento. CSS también permite la creación de diseños responsivos, adaptando el diseño de una página web a diferentes tamaños de pantalla, lo que permite una mejor experiencia de usuario en dispositivos móviles. Select the element that you want to copy. } ¿Que es .CSS? Historia.CSS

3. Tiene varios usos importantes en el desarrollo web: ¿Para qué sirve .CSS? Mejorar la accesibilidad Separar el contenido y el diseño Mejorar la velocidad de carga Crear diseños adaptativos

4. CSS fue desarrollado por el { World Wide Web Consortium (W3C) } Historia de .CSS < número limitado de propiedades y selectores CSS1 < S oporte para media queries , permitía adaptar la presentación de una página web CSS2 < nuevas características como la posibilidad de crear animaciones y transiciones CSS3 < Mejoras en la capacidad de seleccionar elementos, mejoras en el soporte para grids , mejoras en la capacidad de adaptar la presentación a dispositivo CSS4 /1998 /Act. /1996 /2012

5. ¿Cómo funciona .CSS? CSS funciona mediante la aplicación de reglas de estilo a los elementos de una página web. Estas reglas se escriben en un archivo CSS y se vinculan a una página HTML mediante un enlace en la cabecera de la página. ¿Cómo funciona .CSS?

6. ¿Cómo funciona .CSS? p { background -color : blue; } < Este código se puede incluir en un archivo externo con extensión . css y vincularlo en el HTML de la siguiente manera: > < head > < link rel = "stylesheet" type = "text/ css " href = “ css /estilos.css" > </ head > Aquí te dejo un ejemplo de código CSS que cambia el color de fondo de todos los párrafos en una página web a azul: ¿Cómo funciona .CSS?

7. ¿Cómo funciona .CSS? < head > < style > p { background-color : blue; } </ style > </ head > <También se puede incluir en el HTML directamente dentro de una etiqueta « style »:> ¿Cómo funciona .CSS?

8. Rol de CSS en un sitio web < separar la estructura de contenido de una página (definida en HTML) de su presentación visual presentación y diseño /01 < permite dar una apariencia consistente y profesional a todas las páginas del sitio web estilos visuales < la presentación de una página web a diferentes dispositivos y resoluciones de pantalla a través de media queries , permite adaptar /02 /03 4/9 7/10 6/10 ¿Cómo funciona .CSS?

9. Componentes de CSS < son los elementos HTML a los que se aplicarán las reglas CSS. Los selectores pueden ser basados en el nombre de la etiqueta, la clase, el ID, entre otros. Selectores /01 < S on las características visuales que se modificarán en los elementos seleccionados. Algunas propiedades comunes son color, tamaño de fuente, margen, padding , borde, entre otras. Propiedades /02 < son los valores asignados a las propiedades. Pueden ser valores numéricos, unidades de medida, nombres de colores, entre otros. Valores /03 < son las líneas que componen una regla CSS y consisten en una propiedad y un valor separados por dos puntos. Declaraciones /04 ¿Cómo funciona .CSS?

10. Componentes de CSS < son conjuntos de declaraciones que se aplican a los elementos seleccionados. Reglas /05 < son los archivos donde se guardan las reglas CSS y se vinculan en el HTML. Archivos /06 < es un componente que permite adaptar la presentación de una página web a diferentes dispositivos y resoluciones de pantalla. Media Queries /07 < son sistemas de diseño que ayudan a crear diseños más flexibles y adaptables. Grid yFlexbox /08 ¿Cómo funciona .CSS? < son lenguajes que proporcionan una sintaxis adicional a CSS para facilitar el desarrollo y mejorar la productividad de los desarrolladores. Lenguajes de preprocesamiento /09

11. Componentes de CSS < son líneas de código que no son interpretadas por el navegador y sirven para dejar notas o documentación dentro de un archivo CSS. Comentarios < son los valores numéricos que se asignan a las propiedades y pueden ser expresadas en diferentes unidades como pixels , ems , porcentajes, entre otras. Unidades de medida < es un componente que permite adaptar la presentación de una página web a diferentes dispositivos y resoluciones de pantalla. Pseudo-clases y pseudo-elementos < es el sistema que utiliza CSS para calcular el tamaño y la posición de los elementos en una página web. Box- model ¿Cómo funciona .CSS? < son herramientas que permiten identificar y solucionar problemas en el código CSS, tales como el inspector de elementos en los navegadores web. Herramientas de depuración

12. Ejemplos: selector { propiedad : valor; propiedad : valor; ... } h1 { color : blue; font-size : 36px ; text-align : center; }

13. Tecnologías para CSS < Es un sistema de diseño de cuadrícula que permite a los diseñadores crear diseños de cuadrícula complejos y adaptables. Grid < Es un sistema de diseño de caja flexible que permite a los diseñadores crear diseños flexibles y adaptables. Flexbox < Permite a los diseñadores y desarrolladores adaptar el diseño de una página a diferentes tamaños de pantalla y dispositivos. Media Queries : < Es un marco de diseño de código abierto que proporciona un conjunto de herramientas y componentes preconstruidos para ayudar a los diseñadores a crear diseños adaptables y responsivos. Bootstrap

14. ¿Qué son los selectores en CSS? < Los selectores en CSS son patrones utilizados para seleccionar elementos HTML específicos a los que se aplicarán estilos. < Los selectores pueden ser tan simples como seleccionar un elemento por su nombre, como un encabezado h1, o más complejos, como seleccionar elementos con un cierto atributo o valor. SELECTORES

15. Selectores de Elemento {CSS} SELECTORES p { font-size : 16px ; color : #333 ; } CSS < p >Este es un párrafo de ejemplo.</ p > < p >Este es otro párrafo de ejemplo.</ p > < Los selectores de elemento son los más simples y comunes en CSS. HTML

16. Selectores de clase {CSS} SELECTORES . alerta { background-color : red; color : white; padding : 10px ; } CSS < p class = "alerta" > Este es un mensaje de alerta. </ p > < Los selectores de clase se escriben con un punto delante del nombre de la clase. HTML

17. Selectores de ID {CSS} SELECTORES #titulo-principal { font-size : 24px ; font-weight : bold; color : #333 ; } CSS < h1 id = "titulo-principal" > Bienvenidos a mi sitio web </ h1 > < Los selectores de ID se escriben con un numeral delante del nombre del ID. HTML

18. Selectores de descendencia {CSS} SELECTORES div p { font-style : italic ; } CSS < div > < p >Este es un párrafo dentro de un div .</ p > </ div > < Los selectores de descendencia seleccionan elementos HTML que son descendientes de otro elemento HTML específico. Se escriben separando los selectores por un espacio. HTML

19. Selectores de hijo directo {CSS} SELECTORES ul > li { list-style : square ; } CSS < ul > < li >Elemento 1</ li > < li >Elemento 2</ li > < li >Elemento 3</ li > </ ul > < Los selectores de hijo directo seleccionan elementos HTML que son hijos directos de otro elemento HTML específico. Se escriben separando los selectores por un signo mayor que (>). HTML

20. Selectores de pseudoclase {CSS} SELECTORES a :hover { color : red; text-decoration : underline; } CSS < a href = "#" >Enlace de ejemplo</ a > < Son palabras clave que se agregan a un selector para seleccionar elementos HTML que se encuentran en un estado específico, como cuando el cursor del mouse se coloca sobre un enlace o cuando se selecciona un campo de formulario. Las pseudoclases se escriben después del selector, separadas por dos puntos (:). HTML

21. Agrupa selectores {CSS} SELECTORES h1 , h2 , h3 { font-family : Arial, sans-serif ; color : #333 ; } CSS < h1 >Título principal</ h1 > < h2 >Título secundario </ h2 > < h3 >Título terciario </ h3 > < Agrupa selectores similares para evitar la repetición innecesaria de estilos en tu código CSS. HTML

22. Utiliza selectores de cascada {CSS} SELECTORES nav ul li a { color : blue; } nav ul li a :hover { color : red; } CSS < nav > < ul > < li >< a href = "#" >Inicio</ a ></ li > < li >< a href = "#" >Acerca de</ a ></ li > < li >< a href = "#" >Contacto</ a ></ li > </ ul > </ nav > < Los selectores de cascada te permiten aplicar estilos a elementos específicos en función de su relación con otros elementos. Utiliza selectores de cascada para aplicar estilos a elementos específicos de manera más precisa. HTML

23. ¿Qué es el color en CSS3? < En el contexto del diseño web, el color es un atributo de estilo que se aplica a los elementos HTML para mejorar la apariencia, la legibilidad y la experiencia del usuario. < Por ejemplo, puedes aplicar un color de fondo a un elemento div y cambiar el color del texto dentro de ese div : div { background-color : lightblue ; color : darkblue ; } COLORES

24. Sistemas de colores: RGB, HSL y HEX < Es un modelo de color aditivo en el que los colores se crean mediante la combinación de diferentes intensidades de luz roja, verde y azul. Los valores de RGB van de 0 a 255 para cada componente de color. RGB (Red, Green, Blue): < Es un modelo de color que se basa en la percepción humana del color. El matiz ( Hue ) se representa en grados (0 a 360), la saturación ( Saturation ) en porcentaje (0% a 100%), y la luminosidad ( Lightness ) también en porcentaje (0% a 100%). HSL ( Hue , Saturation , Lightness ): color: rgb (255, 0, 0); color: hsl (120, 100%, 50%); COLORES

25. Sistemas de colores: RGB, HSL y HEX < Es un sistema de color que utiliza valores hexadecimales para representar los colores. Cada color se representa mediante una combinación de seis caracteres (0-9 y A-F) precedidos por un símbolo de hash (#). HEX (Hexadecimal): < En CSS3, se pueden especificar colores con opacidad variable utilizando las versiones “A” de los modelos de color RGB y HSL (RGBA y HSLA, respectivamente), donde la “A” representa la opacidad (alfa). Opacidad y transparencia en colores color: # 00 00 FF ; color: rgba (255, 0, 0, 0.5); color: hsla (120, 100%, 50%, 0.75); COLORES

26. Colores predefinidos y nombres de colores: COLORES

27. Sistemas de colores: RGB, HSL y HEX < En CSS, el color de texto se utiliza para establecer el color de texto de un elemento HTML. Puedes especificar el color de texto de un elemento utilizando la propiedad color. . example { color : red; } Color de texto < En CSS, el color de borde se utiliza para establecer el color de borde de un elemento HTML. Puedes especificar el color de borde de un elemento utilizando la propiedad border -color. . div { border -color : red; } Color de borde color: # 00 00 FF ; COLORES

28. ¿Qué son los gradientes? < Un gradiente es una representación visual de una transición gradual entre dos o más colores. En CSS3, los gradientes se utilizan principalmente como fondos de elementos, pero también se pueden aplicar a otras propiedades, como bordes y sombras. COLORES Gradientes

29. < Los gradientes lineales son transiciones de color a lo largo de una línea recta. Puedes controlar la dirección del gradiente y los colores que se utilizan en la transición. Gradientes lineales < Los gradientes radiales son transiciones de color que se irradian desde un punto central. Puedes controlar la forma, el tamaño y la posición del gradiente radial. Gradientes radiales background-image : radial-gradient( forma tamaño at posición , color-stop1, color-stop2, ...); COLORES Gradientes background-image: linear-gradient( dirección , color-stop1, color-stop2, ...); div { background-image : linear-gradient ( 90deg , red, yellow, green); } div { background-image : radial-gradient (circle at center, red, yellow, green); }

30. CSS Background < La propiedad background en CSS se utiliza para establecer el fondo de un elemento. Puede ser utilizada para establecer el color de fondo, establecer una imagen de fondo, establecer la posición de una imagen de fondo, establecer si una imagen de fondo se debe repetir o no, y establecer si una imagen de fondo se debe fijar o desplazarse con el contenido. La sintaxis básica de la propiedad de fondo es: background : valor1 valor2 valor3 valor4; element { background : green url ( 'image.jpg' ) no-repeat center center ; } CSS Background

31. Propiedades relacionadas Establece el color de fondo del elemento. background -color E stablece una imagen de fondo para el elemento. El valor debe ser una URL que apunta a la imagen. background-image Controla si la imagen de fondo se repite o no. Los valores posibles son repeat , repeat -x, repeat -y y no- repeat . background-repeat : Controla la posición de la imagen de fondo. Puede ser un valor en formato x y o un valor predefinido como center, top, bottom , left o right . background -position: CSS Background

32. Propiedades relacionadas Controla el tamaño de la imagen de fondo. Puede ser un tamaño fijo en pixels , un porcentaje, o valores como cover o contain . background-size : background Es una propiedad abreviada para establecer varios valores de fondo de una sola vez, como el color, la imagen, la posición de la imagen, si se repite la imagen o no. CSS Background

33. Sistemas de colores: RGB, HSL y HEX < Earth is where we all live on Earth 75% < Mercury is a small planet Mercury 25% < It’s the biggest planet Jupiter 90% < Mars is actually cold Mars 50% COLORES

34. Programming language {infographics} < It’s the second planet from the Sun Venus < Neptune is very far from Earth Neptune 25% 25% Place 1 Place 2 Saturn has several rings forbeginners.html workshop.css Programming Language

35. Programming language {infographics} < Jupiter is a gas giant and the biggest planet > Jupiter < Venus has a nice name and high temperatures > Venus < Mercury is the closest planet to the Sun > Mercury < Saturn is a gas giant and has several rings > Saturn Programming Language forbeginners.html workshop.css 5/6 2/6 3/6 6/6

36. Programming language {infographics} < This planet is a gas giant Jupiter < It’s the smallest planet Mercury < Earth is where we all live on Earth Programming Language forbeginners.html workshop.css

37. Programming language {infographics} Programming Language forbeginners.html workshop.css < Venus is the second planet from the Sun Venus < Jupiter is the biggest planet of them all Jupiter /01 /02 40% 60% Saturn is a gas giant and has several rings. It’s composed mostly of hydrogen and helium. It was named after the Roman god of wealth Saturn

38. Programming language {infographics} Programming Language forbeginners.html workshop.css < Earth is where we all live on Earth 75% < Mercury is a small planet Mercury 25% < It’s the biggest planet Jupiter 90% < Mars is actually cold Mars 50%

39. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s the smallest planet Mercury < Venus has a beautiful name Venus < Saturn is a gas giant Saturn < It’s far away from Earth Neptune /2000 /2022 /1900 /2020

40. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s the biggest planet Jupiter 25% < Despite being red, Mars is cold Mars 10% < Earth is where we all live on Earth 30% < Mercury is the smallest planet Mercury 35% Saturn has several rings

41. Programming language {infographics} Programming Language forbeginners.html workshop.css < Jupiter is the biggest planet of them all Jupiter 70% < Venus is the second planet from the Sun Venus < This planet is far away from our planet called Earth Neptune 45% 25%

42. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s the biggest planet Jupiter 15% < Mars is actually cold Mars 35% < Earth is where we all live on Earth 30% < Mercury is the smallest planet Mercury 20% Follow the link in the graph to modify its data and then paste the new one here. For more info, click here

43. Programming language {infographics} Programming Language forbeginners.html workshop.css 75% < It’s the smallest planet Mercury 90% < Venus has a beautiful name Venus 50% < Mars is actually cold Mars 25% < It’s the biggest planet Jupiter

44. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s the closest planet to the Sun Mercury /01 < Venus is the second planet from the Sun Venus /02 < Mars is actually a very cold place Mars /03 < It’s the biggest planet of them all Jupiter /04 < It’s composed of hydrogen and helium Saturn /05 < Neptune is far away from Earth Neptune /06

45. Programming language {infographics} Programming Language forbeginners.html workshop.css < Jupiter is the biggest planet Jupiter 50% < It’s the second planet from the Sun Venus < This planet is far away from Earth Neptune 75% 25%

46. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s composed mostly of hydrogen and helium Saturn < Venus is the second planet from the Sun Venus < Jupiter is the biggest planet of them all Jupiter 30% 70% 50%

47. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s the closest planet to the Sun Mercury < Venus is the second planet from the Sun Venus < Mars is actually a very cold place Mars < Neptune is far away from Earth Neptune

48. Programming language {infographics} Programming Language forbeginners.html workshop.css < Mercury is very small Mercury 50% < Venus has a beautiful name Venus 65% < Mars is a very cold place Mars 20% < Jupiter is a gas giant Jupiter 30% < Saturn has several rings Saturn 80% < Neptune is a very cold place Neptune 100%

49. Programming language {infographics} Programming Language forbeginners.html workshop.css < Jupiter is a gas giant and the biggest planet > Jupiter < Venus has a nice name and high temperatures > Venus < Mercury is the closest planet to the Sun > Mercury < Saturn is a gas giant and has several rings > Saturn

50. Programming language {infographics} Programming Language forbeginners.html workshop.css < Venus is the second planet from the Sun Venus /01 < Saturn is composed of hydrogen and helium Saturn /02 /html. /html. 50% 80%

51. Programming language {infographics} Programming Language forbeginners.html workshop.css < This planet has a very beautiful name Venus < Saturn is a gas giant and has rings Saturn < Mercury is the closest planet to the Sun Mercury < Despite being red, Mars is a cold place Mars

52. Programming language {infographics} Programming Language forbeginners.html workshop.css < It’s closest planet to the Sun < It’s the smallest planet of all < Mercury is very small < Mercury is a small planet Mercury < It’s the second planet from Sun < Venus has a toxic atmosphere < Venus has extreme temperatures < Venus is a very hot planet Venus /html. 50% /html. 90%

53. Programming language {infographics} Programming Language forbeginners.html workshop.css /01 < Mercury is a small planet Mercury < Venus has a beautiful name Venus < Saturn is a gas giant Saturn < It’s far away from Earth Neptune < We all live on Earth Earth < Mars is actually cold Mars /02

54. Programming language {infographics} Programming Language forbeginners.html workshop.css < Venus has a beautiful name and is the second planet from the Sun. It is terribly hot, even hotter than Mercury, and its atmosphere is toxic Conclusions < Mercury is very small Mercury 65% < Mars is a very cold place Mars 20% < Jupiter is a gas giant Jupiter 30%

55. Programming language {infographics} Programming Language forbeginners.html workshop.css < Mercury is a small planet Mercury < Venus has a beautiful name Venus < It’s composed of hydrogen Saturn < It’s far away from Earth Neptune

56. Programming language {infographics} Programming Language forbeginners.html workshop.css < Venus has a beautiful name Venus < It’s far away from Earth Neptune < Despite being red, it’s cold Mars /2020 /2021 /2022 80% 45% 50%

57. Programming language {infographics} Programming Language forbeginners.html workshop.css < Jupiter is the biggest planet Jupiter < It’s the second planet from the Sun Venus < This planet is far away from Earth Neptune 75% 60% 90%

58. Programming language {infographics} Programming Language forbeginners.html workshop.css < Saturn is a gas giant and has several rings. It’s composed mainly of hydrogen and helium. It was named after the Roman god of wealth and agriculture Saturn < Venus has a beautiful name and is the second planet from the Sun. It’s hot, even hotter than Mercury, and its atmosphere is toxic Venus 40% 60%

59. Programming language {infographics} Programming Language forbeginners.html workshop.css Mon Tue Wed Thu Fri Project 01 Project 02 Project 03 Project 04 Project 05 Project 01 Project 02 Project 03 Project 04 Project 05

60. Programming language {infographics} Programming Language forbeginners.html workshop.css December Mon Tue Wed Thu Fri Sat Sun 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Activity 1 Activity 2 Activity 3

61. Programming language {infographics} Programming Language forbeginners.html workshop.css < Mercury is the smallest planet of them all < Despite being red, Mars is a very cold planet < Saturn is a gas giant and has several rings Venus < Venus is the second planet from the Sun < Neptune is the farthest planet from the Sun < Jupiter is a gas giant and the biggest planet Mars

62. Programming language {infographics} Programming Language forbeginners.html workshop.css < Mercury is the smallest planet of them all < Despite being red, Mars is a very cold planet < Saturn is a gas giant and has several rings < Jupiter is the biggest planet of them all < Neptune is the farthest planet from the Sun < Venus is the second planet from the Sun

63. Instructions for use For more information about editing slides, please read our FAQs or visit our blog: https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school If you have a free account, in order to use this template, you must credit Slidesgo in your final presentation. Please refer to the next slide to read the instructions for premium users. As a Free user, you are allowed to: - Modify this template. - Use it for both personal and commercial projects. You are not allowed to: - Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content). - Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo. - Include Slidesgo Content in an online or offline database or file. - Offer Slidesgo templates (or modified versions of Slidesgo templates) for download. - Acquire the copyright of Slidesgo Content.

64. Instructions for use (premium users) As a Premium user, you can use this template without attributing Slidesgo . You are allowed to: Modify this template. Use it for both personal and commercial purposes. Share this template in an editable format with people who are not part of your team. You are not allowed to: Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template). Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in any other product or service that offers downloadable images, icons or presentations that may be subject to distribution or resale. Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this Template. Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an intellectual property registry or similar. For more information about editing slides, please read our FAQs or visit our blog: https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

65. Infographics You can add and edit some infographics to your presentation to present your data in a visual way. Choose your favourite infographic and insert it in your presentation using Ctrl C + Ctrl V or Cmd C + Cmd V in Mac. Select one of the parts and ungroup it by right-clicking and choosing “Ungroup”. Change the color by clicking on the paint bucket. Then resize the element by clicking and dragging one of the square-shaped points of its bounding box (the cursor should look like a double-headed arrow). Remember to hold Shift while dragging to keep the proportions. Group the elements again by selecting them, right-clicking and choosing “Group”. Repeat the steps above with the other parts and when you’re done editing, copy the end result and paste it into your presentation. Remember to choose the “ Keep source formatting ” option so that it keeps the design. For more info, please visit our blog .