SVG (ANIMACIONES), HTML5 :GRAFICOS

PRACTICA 016: GRAFICOS: SVG ANIMACIONES

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

  

ACTIVIDADES

 

1.- Agregar un logo

1.1.- Buscar una imagen en svg, cambiar su  tamaño a 50 por 50 y guardar en la carpeta img

1.2.- Agregar la imagen y un letrero al archivo libros_HRM.html (líneas sombreadas)

Nota:

-Mi imagen se llama libros001.svg, sustituir por el nombre de tu imagen.

-El valor href debe tener el nombre de tu archivo html

-Y el texto Libros HRM también cambiarlo

2.- Agregar estilos al logo

            2.1 Agregar estilo al letrero del logo (líneas sombreadas)

            2.2 Agregar estilo a la imagen del logo (líneas sombreadas)

Al ejecutar el archivo html desde el explorador quedaría asi:

3.- Crear un pacman con SVG

            3.1 Crear un nuevo article dentro de la section posición_2_1 (líneas sombreadas)

 

3.2.- Crear un pacman con 2 arcos y un circulo. El código ira entre las etiquetas SVG

Tomar como referencia la creación de arcos de la practica 013:

<circle cx="120" cy="80" r="4"  fill="red"></circle>

<path d="M 60,320 A 15,20 0 1,0 120,260" fill="none" stroke="RoyalBlue" stroke-width="3" />

 

        Pasos para crear los arcos con path:

4.- Al Ejecutar el archivo html, queda asi:

5.- Girar la imagen

Agrupar los trazos  y el circulo creado en una etiqueta   <g transform="rotate(50 200,100)"> 

 y transformar (la franja azul son 2 arcos y un circulo  que creaste)

Quedaría asi: Por ejemplo en las líneas azules: 

                      <g transform="rotate(50 50,50)">

      <path d="M 50,0 A 50,50 0 1,0 50,100  z" fill="gray" stroke="gray" stroke-width="3" />

      <path d="M 0,50 A 50,50 0 1,0 100,50 z" fill="gray" stroke="gray" stroke-width="3" />

      <circle cx="30" cy="20" r="8"  fill="red"></circle>

6.- Agregar eventos

6.1.- Crear el archivo mi_scriptLibros.js en la carpeta js

6.2 Declarar las variables a usar en el archivo mi_scriptLibros.js

6.3.- Agregar la función para desplazar (Agregar en las líneas azules los 2 arcos y el circulo)

Por ejemplo en las líneas azules:

result='<g transform="translate('+ x +','+ y +' ), rotate('+ rotar +' 50,50)">';

result+='<path d="M 50,0 A 50,50 0 1,0 50,100  z" fill="gray" stroke="gray" stroke-width="3" />';

result+='<path d="M 0,50 A 50,50 0 1,0 100,50 z" fill="gray" stroke="gray" stroke-width="3" />';

result+='<circle cx="30" cy="20" r="8"  fill="red"></circle>';

7.- Indicar en html el uso del java script , antes de cerrar el body. (línea sombreada)

 

SVG (BOTONES) HTML5:GRAFICOS

 PRACTICA 015: GRAFICOS: SVG HTML BOTONES

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

  

ACTIVIDADES

 1.- Agregar  nueva section en el archivo libros_HRM.html

2.- Agregar botones dentro de la section posición_2_0

3.- Buscar imágenes para los botones “Agregar”, “Imprimir”, “Continuar”, “Cancelar” y descargar en formato SVG:

Sugerencias:

https://material.io/resources/icons/?icon=label_important&style=baseline

https://simpleicons.org/

4.- Copiar el contenido de cada imagen SGV en el archivo libros_HRM.html

4.1 Abrir con un editor de texto la imagen SVG

4.2 Copiar todo el contenido del SVG dentro del botón Agregar

4.3 Cambiar de tamaño el SVG y poner su atributo class="icono_001"

4.4 Agregar a cada botón una  imagen SVG y poner su atributo class

Quedaría asi:

5.- Agregar estilos en el archivo mi_estiloLibros.css

5.1 Alinear la  nueva section con la section de abajo en forma horizontal (líneas sombreadas)

5.2 Agregar color a los iconos y color cuando se posicionan sobre el icono (líneas sombreadas)

5.3 Agregar estilo a los botones (líneas sombreadas)

    Quedaría así:

Al mover el mouse sobre los iconos cambiaran de color

6.- Agregar un nuevo botón en la misma section (lineas sombreadas)

7.- Buscar una nueva imagen SVG  para el botón Buscar

             7.1 Guardar la imagen en la carpeta img

7.2 Editar el archivo SVG para cambiar el tamaño y salvarlo

7.3 Agregar una imagen usando la imagen SVG(línea sombreada)

Quedaría asi:

SVG, HTML5 :GRAFICOS

 PRACTICA 014:  GRAFICOS:SVG

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de páginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

INTRODUCCION:

SVG: Scalable Vector Graphics, es un formato gráfico basado en XML para crear archivos vectoriales en 2D, su uso es por medio de etiquetas.

En esta practica se utiliza con html. con hojas de estilo en cascada(archivos .css)

ACTIVIDADES

1.- Agregar una nueva sección article en el archivo libros_HRM.html creado en la práctica anterior (líneas sombreadas)

2.- Agregar en el article creado, puntos en donde el valor de Y no cambia (lineas sombreadas)

3.- Agregar dos arcos a partir de los puntos creados (Líneas sombreadas)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

4.- Al probar con doble click sobre libros_HRM.html  quedará asi:

5.- Agregar nuevos puntos en donde X no cambia (líneas sombreadas)

6.- Agregar un arco a partir de los puntos creados (línea sombreada)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

7.- Agregar nuevos puntos en donde X e Y si cambian (líneas sombreadas)

8.- Al probar con doble click sobre libros_HRM.html quedaría asi:

9.- Agregar un estilo y un scrollbar a la sección que contiene los articulos en el archivo mi_estiloLibros.css (líneas sombreadas)

10.- Al probar con doble click sobre libros_HRM.html quedaría asi:

11.- Agregar arcos partir de los puntos creados (línea sombreada)

Nota: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

********************************************************************************

ANEXO I: Valores del arco(A) en una trayectoria(path)

Tomando en cuenta los dos puntos rojos:Divide el arco en arco grande y arco chico

********************************************************************

ANEXO II : EJERCICIO DE OBSERVACION: TRANSFORMANDO(translate,rotate, scale, skewX)

Nota: Los ejercicios se agregaran en un nuevo article     </article> 

dentro de la seccion  class="posicion_2_1" 

 

1.- Agregar un triangulo y su translación

    <article class=="posicion_2_1_4">

             <h3>OBSERVACION DE translate,rotate, scale, skewX </h3>

             <svg width="300" height="200"  viewBox="0 0 350 350" >

                  <path fill="red" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="translate(200,80)" fill="red" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

 

</article>

2.- Agregar en el article un triangulo y 3 rotaciones del mismo

              <svg  width="300px" height="200px" viewBox="0 0 350 410">

                  <path fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(25 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(50 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="rotate(75 10,215)" fill="yellow" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

3.- Agregar en el article un triangulo y su translación y rotacion

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                  <path fill="purple" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                  <path transform="translate(200,50),rotate(25)" fill="purple" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

4.- Agregar en el article un triangulo y su modificación en escala horizontal(%) y escala vertical(%)

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                  <path fill="gray" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                   <path transform="scale(0.4,1.3)" fill="gray" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

              </svg>

5.- Agregar en el article un triangulo y su sesgado horizontal

              <svg  width="300px" height="200px" viewBox="0 0 350 350">

                                 <path fill="brown" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                                 <g transform="skewX(30)">  <!--Zesga del eje x -->

                                                  <path fill="brown" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

                                  </g>

              </svg> 

Quedaría así:

Nota:

El método matrix es una combinación de traslación, escalado y sesgado. Tiene seis parámetros dentro del paréntesis.

transform="matrix(a,b,c,d,e,f)"

 

----------------------------------------------------0------0--------------------------------

------------------------------------------------000-----000------------------------------

GRAFICOS, HTML5

 

PRACTICA 013:  GRAFICOS:HTML

Ing. Honoria Reyes Macedo 

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

 

 

ACTIVIDADES

 

 * El tema a escoger será por cada alumno

 

1.- Paso 1. Crear un archivo libros_HRM.html en una carpeta de trabajo

(En la carpeta de trabajo crear 3 carpetas tambien: css,img, js)

               

1.1 Utilizar las siguientes etiquetas para definir las secciones o cajas:

section, aside, article, figcaption, figure, footer, header, hgroup, nav.

En html quedaria asi:

2.- Crear un archivo mi_estiloLibros.css  (cascading style sheets) en una carpeta llamada “css” dentro de la carpeta de trabajo, para separar los estilos de la estructura html.

 .

 2.1 En el archivo mi_estiloLibros.css: Agregar el borde que nos permitirá ver la posición de cada etiqueta (Al final se la pueden quitar)

2.2 Agregar las siguientes línea al archivo libros_HRM.html (Para indicar el uso de los estilos)

dentro de la etiqueta  <head> 

 

                             <link rel="stylesheet" href="css/mi_estiloLibros.css" />

 

2.3 Al probar libros_HRM.html (Con doble click) àen el navegador se mostrara asi:

 

Cada alumno tendra su propia estructura

2.4 Poner el nombre de clase a cada sección en libros_HRM.html

2.5 Agregar contenido en algunas secciones  (Líneas sombreadas)

 

3.- Agregar estilos

3.1 Alinear segmentos de la misma fila en mi_estiloLibros.css

3.2 Alinear el menu en el archivo mi_estiloLibros.css

4.- Agregar imagenes SVG dentro de article en el archivo libros_HRM.html

Al final quedaría asi:

******************************************************************

ANEXO I : EJERCICIO DE OBSERVACION CON 2 IMAGENES

Nota: Los ejercicios se agregaran en un nuevo article     </article> 

dentro de la seccion  class="posicion_2_1" 

1.- Agregar dos triángulos (Cada triangulo inicia con su propio espacio svg)

<article class="posicion_2_1_2"> 

  <h3>002  PRACTICA OBSERVACION</h3>

<svg width="240px" height="300px" > <path fill="orange" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/></svg>

<svg width="240px" height="300px" > <path fill="orange" d=" M 10,100 210,100 110,273 z" stroke="purple" stroke-width="3"/></svg>

</article>

2.- Agregar en el article dos triángulos(Con un mismo espacio svg). 

<svg width="240px" height="300px" >

         <path fill="orange" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/>

         <path  fill="orange" d=" M 10,100 210,100 110,273 z" stroke="purple" stroke-width="3"/>

</svg>

 

3.- Agregar en el article  dos triángulos (Con un mismo path) 

<svg width="240px" height="300px" >   

<path fill="orange" d="M 10,215 210,215 110, 42 z M 10,100 210,100 110,273 z" stroke="purple" stroke-width="3"/>

</svg>

4.- Agregar en el article  dos triángulos (Con un mismo polygon) 

              <svg>     <polygon  points="125,10 175,130 75,130 100,10 190,100 75,130" style="fill:#6ab150;stroke:#003300;stroke-width:3"></polygon> </svg>

 

5.- Agregar en el article  dos triángulos (Con un mismo polygon con una regla de llenado)

  <svg>     <polygon fill-rule="evenodd"  points="125,10 175,130 75,130 100,10 190,100 75,130" style="fill:#6ab150;stroke:#003300;stroke-width:3"></polygon> </svg>

Al final quedaría asi:

            6.- Agregar en el article  un circulo con borde grueso y dividido en cortes de 8,3,2 8,3,2 8,3,2:

 

<svg>     <circle cx="125" cy="75" r="40" stroke="black" stroke-width="15" fill="#6ab150" stroke-dasharray="8,3,2"></circle> </svg> 

---------------------------------0---0----------------------------------------------------

-----------------------------000--00----------------------------------------------------