Reporte de Mi Autobiografia

Subsecretaria de Educación Media Superior.
Unidad de Educación Media Superior Tecnológica

Agropecuaria y Ciencias del Mar
Oficina administrativa de la UEMSTA y CM en el Estado de Puebla.
“Centro de Bachillerato Tecnológico
Agropecuario N° 184”
Módulo III: “Gestiona Información de Manera Remota”.

Submodulo I: “Gestiona Información Mediante el uso
de Software en Línea”.
“REPORTE DE EVIDENCIAS”
MCE. Blanca Bravo Martínez
Yocelin García Guzmán
4° semestre Grupo: “B” Técnico en Ofimática

Acatlán De Osorio, Pue.
COMPETENCIAS GENÉRICAS
4.5 maneja las tecnologías de la información y la comunicación para obtener información y expresar
ideas
8.2 aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva
8.3 Asume una actitud positiva y congruente con los conocimientos y habilidades
COMPETENCIAS DISCIPLINARIAS BÁSICAS

C9 analiza y compara el origen desarrollo y diversidad de los sistemas y medios de comunicación
C12 utilizar las tecnologías de la información y comunicación para investigar resolver problemas
Reproducir materia y transmitir información
COMPETENCIAS DE PRODUCTIVIDAD Y EMPLEABILIDAD

AP3 registrar y revisar información para asegurar que sea correcta
EP8 actuar responsablemente de acuerdo con las normas y disposiciones definitivas en un espacio dado
AD4 utilizar los conocimientos en el trabajo diario
PO3 Define sistemas y esquemas de trabajo.
INDICE
Contenido
COMPETENCIAS GENÉRICAS ............................................................................................................... 2
COMPETENCIAS DISCIPLINARIAS BÁSICAS ........................................................................................ 2
COMPETENCIAS DE PRODUCTIVIDAD Y EMPLEABILIDAD ................................................................. 2
INDICE ............................................................................................................................................... 3
OBJETIVO ......................................................................................................................................... 5
MI AUTOBIOGRAFIA.HTML ................................................................................................................. 6
CODIGO DE HTML ........................................................................................................................... 6
Pantalla................................................................................................................................................ 8
FAMILIA.HTML..................................................................................................................................... 9
CODIGO DE HTML ........................................................................................................................... 9
Pantalla.............................................................................................................................................. 11
PASATIEMPO2.HTML......................................................................................................................... 12
CODIGO DE HTML ......................................................................................................................... 12
Pantallla ............................................................................................................................................. 14
CODIGO CSS....................................................................................................................................... 15
MISESTILOS4.CSS .......................................................................................................................... 15
PASATIEMPO.HTML ........................................................................................................................... 19
CODIGO DE HTML ......................................................................................................................... 19
Pantallla ............................................................................................................................................. 21
CODIGO CSS....................................................................................................................................... 22
MISESTILOS2.CSS .......................................................................................................................... 22
JAVA SCRIPT....................................................................................................................................... 26
LINK O ENLACE DE SCRIPT PARA HTML........................................................................................ 26
PAGINA REVISADA ............................................................................................................................. 27
HTML ............................................................................................................................................ 27
CSS............................................................................................................................................... 28
........................................................................................................................................................... 28
........................................................................................................................................................... 28
........................................................................................................................................................... 29
........................................................................................................................................................... 29
CONCLUSION ..................................................................................................................................... 30
OBJETIVO
Es dar a conocer los códigos que se utilizaron para realizar nuestra página web. Ya
que fue un procedimiento amplio al que se aplicó, así como tener en práctica todo
lo realizado.
En esta práctica utilizamos muchos comandos así como el nuevo archivo que es
Java Script, esta fue una s de los más recientes códigos que se le aplico a nuestra
página.
Los alternativos que se utilizaron fueron

HTML
Css
Js
Estos nos ayudaran a tener nuestra página con una estructura muy buena.
MI AUTOBIOGRAFIA.HTML
CODIGO DE HTML
<! DOCTYPE HTML>


<HTML LANG="ES">
<HEAD>
<TITLE>Autobiografía
</TITLE>
<link rel="stylesheet" href= "misestilos4.css" >
<SCRIPT SRC="micodigo.js"></script>
</HEAD>
<BODY TEXT="#000000" >

<div id="agrupar">
<header id="cabecera">
<HGROUP><CENTER><font size="+5"><marquee> Mi
Autobiografia.</marquee></font></CENTER></HGROUP>
</header>
<nav id="menu">
<UL>
<LI> <A HREF="Familia.HTML"> Mi familia </A></LI>
<LI> <A HREF="Pasatiempo.HTML">Pasatienpos: Tecuanes</A></LI>
<LI> <A HREF="Pasatiempo2.HTML">Folklor</A></LI>
<LI><A HREF="amigos.HTML">Amigos</A></LI>
</UL>
</nav>
<aside id= "section" >

<b>
<P ALIGN=JUSTIFY>
Mi nombre es Yocelin García Guzmán, nací el 1 de febrero del año 2001, en la
ciudad de Acatlán de Osorio. Actualmente estudio en la escuela "Centro de
Bachillerato Tecnológico Agropecuario. </P>
<BR>
<center>
<figure>
<img src="PicsArt_02-20-08.06.16.JPG" WIDTH=250 HEIGHT=250 ALT>
</figure>
<BR> <BR>
</b>
</section>
<aside id="columna">
<left>
<figure>
<img src="15515743_187776061686899_141981606_o.jpg" WIDTH=160
HEIGHT=200 ALT>
</figure>
<center>
Malecon. veracruz 9/12/16
</center>
<figure>
<img src="18721545_1864230737171241_39291617_o.jpg" WIDTH=200
HEIGHT=150 ALT>
</figure>
<figure>
<img src="PicsArt_05-02-02.20.25.jpg" WIDTH=200 HEIGHT=130 ALT>
</figure>
</aside>
<center>
<footer id="pie">Derechos Reservados © Yocelin Garcia .</footer></div>
</BODY>
</HTML>
Pantalla
FAMILIA.HTML
CODIGO DE HTML
<!DOCTYPE>

<HTML LANG="ES">
<HEAD>
<TITLE>FOLKLOR
</TITLE>
</HEAD>
<BODY TEXT="#000000">
<div id="agrupar">
<HGROUP><CENTER><H1> PASATIEMPOS</H1></CENTER></HGROUP>
</header>
<nav id="menu">
<UL>
<LI> <A HREF="autobiografia.HTML">Regresar a el inicio.</A></LI>
</UL>
</nav>
<UL>
<H3><LI>Folklor </LI></H3>
<P ALIGN=JUSTIFY>
Cuando tenia 15 años me integre a la "Compañia Folklorica de Acatlan" ya que el
folklor me gusta mucho, porque es una tradicion muy padre. en la actualidad bailo
tecunes y folklor y son la actividades mas bonitas que hay y que puedo harcer
todaod los dias
</P><BR>
<figure>
<CENTER>
<img src="15128811_10210824268787803_1540456466522543172_o.JPG"
WIDTH=400 HEIGHT=300 ALT >
</CENTER>
</figure>
<video src="compañia folklorica.mp4" width="500" height="500" controls> </video>
</section>
<figure>
<img src="Screenshot_20180415-011810.PNG" WIDTH=200 HEIGHT=180 ALT >
</figure>
<figure>
<img src="Screenshot_20180415-124013.PNG" WIDTH=200 HEIGHT=180 ALT >
</figure>
<figure>
<img src="PicsArt_02-23-01.34.43.jpg" WIDTH=200 HEIGHT=180 ALT >
</figure>
<figure>
<img src="14907265_2141121892780064_1856723457098603353_n.jpg"
</figure>
<figure>
<img src="IMG-20180225-WA0000.jpg" WIDTH=200 HEIGHT=180 ALT >
</figure>
<figure>
<img src="14918925_10210638460462711_8613600414759773376_o.jpg"
</figure>
</aside>
<center>
<footer id="pie">Derechos Reservados ©Yocelin Garcia .</footer></div>
</BODY>
</HTML>
Pantallla
CODIGO CSS
MISESTILOS4.CSS
/*Yocelin garcia guzman*/
* { margin: 5px; padding: 5px;}
h1 { font: bold 20px verdana, san-serif; }
header, seccion, footer, aside, nev, article, figure, figcaption, hgroup{ display:
block; }
body { text-align: center; }
#agrupar { width: auto; margin: 15px auto; text-align: left;

outline: 4px dashed #ff66cc;
outline-offset: 100px;}
#cabecera {
text-shadow: #ffEB3B 2px 2px 10px; inset;
-mo2-box-shadow: #ffEB3B 5px 5px 10px inset;
-webkit-box-shadow: #ffEB3B 5px 5px 10px inset;
box-shadow: #ffEB3B 5px 5px 10px inset;
background:#ff0000 ;
border: 2px solid #;
padding: 20px;
-moz-border-radius: 20px;
-webkit-border-raius: 20px;
border-radius: 20px;
border-radius: 20px; background:-webkit-radial-gradient(center, circle, #ff0066,
#0000cc, #cc00cc, #2196f3);
background:-ms-radial-gradient(center, circle, #ff0066, #0000cc, #cc00cc,
#2196f3);
background:radial-gradient(center, circle, #ff0066, #0000cc, #cc00cc, #2196f3 );
border:29px;
-moz-border-image:url("b.jpg")29 stretch;
-webkit-border-image:url("b.jpg")29 stretch;
border-image:url("b.jpg")29 stretch;}
#menu {
background: #00ff00 ;
border: 3px solid #00cc33;
PADDING: 5PX 15PX;
background:-webkit-radial-gradient(center, circle, #00cccc, #ffff99);
background:-ms-radial-gradient(center, circle, #00cccc, #ffff99);
background:radial-gradient(center, circle, #00cccc, #ffff99 );}
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;}
#seccion {
-moz-box-shadow: #cc0000 5px 5px 10px ;
-webkit-box-shadow: #cc0000 5px 5px 10px ;
-ms-box-shadow: #cc0000 5px 5px 10px ;
box-shadow: #0000ff 5px 5px 10px ;
text-shadow: #cc0000 5px 5px 10px ;
background: #ffff00 ;
border: 3px solid #CC0000;
padding: 20px;
float: left;
width: 69%;
margin-bottom: 20 px;
-webkit-border-radius: 20px;
background:-webkit-radial-gradient(center, circle, #66ff66, #9966cc, #66ffff );
background:-ms-radial-gradient(center, circle, #66ff66, #9966cc, #66ffff );
background:radial-gradient(center, circle, #66ff66, #9966cc, #66ffff ) ; }
#columna {
float: left;
width: 23%;
padding: 2px;
border: 3px solid #ff0000;
background: #2196f3 ;
border-radius: 20px; background:-webkit-radial-gradient(center, circle, #00cccc,
#ffff99);
background:-ms-radial-gradient(center, circle, #00cccc, #ffff99);
background:radial-gradient(center, circle, #00cccc, #ffff99); }
#pie {
clear: both;
text-align: center;
padding: 20px;
padding: 20px;
float: left;
width: 95%;
border-radius: 20px; background:-webkit-radial-gradient(center, circle, #ffee58,
#ffff00, #ff0066);
background:-ms-radial-gradient(center, circle, #ffee58, #ffff00, #ff0066);
background:radial-gradient(center, circle, #ffee58, #ffff00, #ff0066 ); }
PASATIEMPO.HTML
CODIGO DE HTML
<!DOCTYPE HTML>
<!--Esta pagina web fue realizada por Yocelin Garcia Guzman y es una pagina
<HTML LANG="ES">
<HEAD>
<TITLE> Pasatiempos
</TITLE>
</HEAD>
<BODY TEXT="#000000">
<div id="agrupar">
<HGROUP><CENTER> <font size=+2 face=Castellar> <marquee>"Pasatiempos"
</marquee> </font> </CENTER></HGROUP>
</header>
<nav id="menu">
<UL>
<LI> <A HREF="amigos.HTML">Amigos.</A></LI>
<LI><A HREF="autobiografia.HTML">Regresar a el inicio.</A></LI>
<LI><A HREF="pasatiempo2.HTML">Folklor.</A></LI>
</UL>
</nav>
<H2>Tecuanes</H2>
<BR>
<P align=justify>
<FONT size =+1 face= "arial" color= "000000"> Un 8 de Octubre del año 2014,
empeze a bailar en una danza de tecunes en la danza "Anima Ñuu Tesaá" ya que
en ella baile 1 año y 6 meses ya que despues me cambie a otra danza que es en
la que actualmente bailo la danza de Tecuanes "Raices del Pueblo"</font>
<BR>
<H2> <B> Danza de Tecuenes "Anima Ñuu Tesaá" <B> </H2>

<BR>
<CENTER>
<figure>
<img src="IMG-20180221-WA0002.jpg" WIDTH=300 HEIGHT=280 ALT>
</figure>
<P align=left>
<H2> <B> Danza de Tecuenes "Raices del Pueblo"<B> </H2> </p>
<BR>
<figure>
<img src="23131866_10214073350612818_8818337632765971910_n
.jpg" WIDTH=200 HEIGHT=300 ALT>
</figure>
</section>
<LEFT>
<figure>
<img src="27292831_402042186887658_2123668207_n.jpg" WIDTH=200
HEIGHT=180 ALT>
</figure>
Basilica de Guadalupe.Ciudad de Mexico 17/12/17
<figure>
<img src="Screenshot_20180312-225220.png" WIDTH=190
HEIGHT=200 ALT>
</figure>
Programa de tecuanes Reices del pueblo. Plaza Hidalgo
<figure>
<img src="received_442660352825841.jpeg" WIDTH=190
HEIGHT=200 ALT>
</figure>
Velorio del Dr. Zito Vera Marquez
<figure>
<img src="15590990_10211117374235256_7611017221031886410_o
.jpg" WIDTH=200 HEIGHT=180 ALT>
</figure>
Basilica de Guadalupe. Ciudad de Mexico. 18/12/16
</aside>
<center>
<footer id="pie">Derechos Reservados © Yocelin Garcia.</footer></div>
</BODY>
</HTML>
Pantallla
CODIGO CSS
MISESTILOS2.CSS
/*Yocelin garcia guzman*/

* { margin: 5px; padding: 5px;}
header, seccion, footer, aside, nev, article, figure, figcaption, hgroup{ display:
block; }
body { text-align: center; }
#agrupar {
width: auto; margin: 15px auto; text-align: left;
outline: 4px dashed #ff66cc;
outline-offset: 100px;}
#cabecera {
text-shadow: #ffEB3B 2px 2px 10px; inset;
-mo2-box-shadow: #ffEB3B 5px 5px 10px inset;
-webkit-box-shadow: #ffEB3B 5px 5px 10px inset;
box-shadow: #ffEB3B 5px 5px 10px inset;
background:#ff0000 ;
border: 2px solid #;
padding: 20px;
#ffff00, #33ff00, #2196f3);
background:-ms-radial-gradient(center, circle, #ff0066, #ffff00, #33ff00, #2196f3);
background:radial-gradient(center, circle, #ff0066, #ffff00, #33ff00, #2196f3 );
border:29px;
-moz-border-image:url("27292831_402042186887658_2123668207_n.jpg")29
stretch;
-webkit-border-image:url("27292831_402042186887658_2123668207_n.jpg")29
stretch;
border-image:url("27292831_402042186887658_2123668207_n.jpg") 9 stretch;}
#menu {
background: #00ff00 ;
border: 3px solid #00cc33;
PADDING: 5PX 15PX;
background:-webkit-radial-gradient(center, circle, #ffa726, #ffee58, #ec407a,
#adb6ac);
background:-ms-radial-gradient(center, circle, #ffa726, #ffee58, #ec407a,
#adb6ac);
background:radial-gradient(center, circle, #ffa726, #ffee58, #ec407a, #adb6ac); }
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;}
#seccion {
/*este cambia el fondo del texto y la caja la sombra del texto*/
padding: 20px;
float: left;
width: 69%;
-webkit-border-radius: 20px;
background:-webkit-radial-gradient(center, circle, #ffff00, #66ff00, );
background:-ms-radial-gradient(center, circle, #ffff00, #66ff00, );
background:radial-gradient(center, circle, #ffff00, #66ff00, ) ;
}
#columna {
float: left;
width: 23%;
padding: 2px;
border: 3px solid #ff0000;
background: #2196f3 ;

#ffff00, #33ff00, #2196f3);
background:-ms-radial-gradient(center, circle, #ff0066, #ffff00, #33ff00, #2196f3);
background:radial-gradient(center, circle, #ff0066, #ffff00, #33ff00, #2196f3 ); }
#pie {
clear: both;
text-align: center;
padding: 20px;
padding: 20px;
float: left;
width: 95%;
border-radius: 20px; background:-webkit-radial-gradient(center, circle, #ffee58,
#ffff00, #ff0066);
background:-ms-radial-gradient(center, circle, #ffee58, #ffff00, #ff0066);
background:radial-gradient(center, circle, #ffee58, #ffff00, #ff0066 ); }
JAVA SCRIPT
function mostraralerta()
{
alert('hizo clic!');
}
function hacerclic()
{
document.querySelector("#agrupar p:first-child")
onclick=mostraralerta;
}
window.onload=hacerclic;
LINK O ENLACE DE SCRIPT PARA HTML

PAGINA REVISADA
HTML
CSS
CONCLUSION
En este semestre hemos aprendido muchas cosas, las cuales nos servirán en un
periodo a futuro, ya que lo aprendido son prácticas de cómo realizar una página
web, ya que hacer una de ellas no es fácil de hacer, es por eso que aprendimos a
realizar una estructura, agregar información, imágenes, música y videos del tema
hablado, y editar fuente HTML. Así como aplicar estilos y diseños con los códigos
de CSS.
También utilizamos el JAVA SCRIPT en donde agregamos el “Hacer clic” esto con
JS.
A mi punto de vista esta es una las teorías y practicas muy importante e interesantes
que nos servirá a un largo plazo.

Reporte de Mi Autobiografia

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Reporte de Mi Autobiografia

Diunggah oleh

Hak Cipta:

Format Tersedia

Subsecretaria de Educación Media Superior.

Unidad de Educación Media Superior Tecnológica

Módulo III: “Gestiona Información de Manera Remota”.

Yocelin García Guzmán

4° semestre Grupo: “B” Técnico en Ofimática

COMPETENCIAS DISCIPLINARIAS BÁSICAS

COMPETENCIAS DE PRODUCTIVIDAD Y EMPLEABILIDAD

Los alternativos que se utilizaron fueron

<! DOCTYPE HTML>

<BODY TEXT="#000000" >

<aside id= "section" >

#agrupar { width: auto; margin: 15px auto; text-align: left;

<H2> <B> Danza de Tecuenes "Anima Ñuu Tesaá" <B> </H2>

/Yocelin garcia guzman/

border-radius: 20px; background:-webkit-radial-gradient(center, circle, #ff0066,

LINK O ENLACE DE SCRIPT PARA HTML

Anda mungkin juga menyukai