FLEXSLIDER HTML5

 PRACTICA 020: HTML: FLEXSLIDER

Ing. Honoria Reyes Macedo 

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

Java Script

 

ACTIVIDADES

1.- Paso 3. Agregar flexslider para el desplazamiento de las imágenes :

               1.1 Bajar los archivos (desde http://www.woothemes.com/flexslider/ )                     

En la carpeta css  copiar: el archivo flexslider.css y la carpeta fonts

En la carpeta js  copiar: los archivos jquery.flexslider.js y jquery.flexslider-min.js

 

1.2 Bajar los archivos (desde https://jquery.com/ )                     
                     Nota: Al seleccionar download les mostrara código en el navegador, con mouse derecho seleccionar “Guardar como”

En la carpeta js  copiar el archivo  jquery-3.5.1.min.js

 

Quedaria asi la  carpeta css y js:

2.- Copiar 4 imágenes referentes al producto que se ofrece en una nueva carpeta img_galeria

3.- En el archivo libros_HRM.html  agregar el link al archivo flexslider.css (línea sombreada)

4.- En el archivo libros_HRM.html agregar el script a los archivos bajados

    <script src="js/jquery-3.5.1.min.js">  // Para utilizar jquery-1.11.1.min.js en forma local  </script>

    <script> !window.jQuery && document.write("<script src='js/jquery-3.5.1.min.js'><\/script>");</script>

    <script src="js/jquery.flexslider-min.js"></script>

    <script type="text/javascript" > $(window).on("load",function() { $(".flexslider").flexslider(); });</script>

5.- En el archivo libros_HRM.html agregar la lista de imágenes a mostrar: (lineas sombreadas)

    Nota: sustituir el nombra de cada imagen por las imágenes copiadas en img_galeria

6.- En el archivo mi_estiloLibros.css agregar estilo a las etiquetas agregadas

Al ejecutar el archivo html quedaría asi:

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

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

CANVAS (ARCOS), HTML5 :GRAFICOS

 PRACTICA 019: GRAFICOS: CANVAS ARCOS

Ing. Honoria Reyes Macedo 

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

Java Script

 

ACTIVIDADES

1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (líneas sombreadas)

2.- Crear el archivo rebote.js en la carpeta js

Al ejecutar el erchivo html quedaría así:

3.- Llenar el circulo con arcos: Copiar del punto 2 desde la fila 17 a la 26 para cada arco

            3.1.- Modificar el valor de translate (ctx.translate(120,120))

            Los arcos deberán cumplir diferentes combinaciones de angulos de inicio y angulo final. 

Ejemplo:

4.- Agregar animación  (línea sombreada)

5.- Agregar desplazamiento.- Cambiar los valores de x e y para reubicar los arcos

Probar el html. Observar el cuadro que se limpia cada ejecución

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

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

CANVAS (EVENTOS), HTML5 :GRAFICOS

 PRACTICA 018: GRAFICOS: CANVAS EVENTOS

Ing. Honoria Reyes Macedo 

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

Java Script

INTRODUCCION

En esta practica se creara una figura con canvas, incrementando el numero de figuras como respuesta al evento onclick() de los botones "Agregar" y "Cancelar" de la pantalla.

 

ACTIVIDADES

 1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (líneas sombreadas)

2.- Crear el archivo agregar.js en la carpeta js

                2.1 Agregar el siguiente código  con 3 funciones en el archivo creado

3.- Agregar antes de cerrar la etiqueta </body> la siguiente linea:

<script src="js/agregar.js"></script>

4.- Agregar los eventos onclick() a los botones  “Agregar” y “Cancelar”  (líneas sombreadas)

5.- Ejecutar el archivo html para probar los botones “Agregar” y “Cancelar”

6.- Agregar la siguiente función al final del archivo agregar.js

7.- Ejecutar el archivo html para probar

8.- Hacer pruebas sin restaurar el estado original

            Nota: comentariar la línea

            canvas.restore();    

 

Quedaria asi:

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

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

CANVAS, HTML5:GRAFICOS

 PRACTICA 017: GRAFICOS: CANVAS EN HTML

Ing. Honoria Reyes Macedo 

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

Java Script

 

  

ACTIVIDADES

 1.- En el archivo libros_HRM.html

            1.1 Agregar un canvas en un nuevo article (lineas sombreadas)

2.-  Crear un archivo en java script: miscanvas.js y agregar el siguiente código

3.- Agregar antes de cerrar la etiqueta </body> la siguiente linea:

<script src="js/miscanvas.js"></script>

 

4.- Ejecutar el archivo html para probar

5.- Dibujar una pelota

      5.1.-Agregar una función al final del archivo miscanvas.js

                5.2.-Agregar antes de cerrar el if la llamada a la nueva función 

(Enviar datos de x, y , radio):

            drawBall(canvas,10,10,30);

6.- Agregar el texto dentro del if

        6.1: Antes de llamar a la funcion anterior copiar:

//Dibujar circulos

canvas.fillStyle ="#FFA500";    //Establece el color

canvas.beginPath(); //Empieza nueva figura

canvas.arc(110,80,90,0,Math.PI *2,true);    //Genera un arco o un circulo con centro en 110,25, con radio 15. u angulo desde 0 a 360 grados

canvas.fill();    //Como usa fill ya no usa canvas.closePath();

canvas.fillStyle ="#00FFFF";

canvas.beginPath(); //Empieza nueva figura

canvas.arc(300,80,90,0,Math.PI *2,true); //Genera un arco o un circulo en 135,25 con radio 20

canvas.fill();

    6.2.- Cambiar los grados de giro

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)