Prof. Víctor José Aquino y Miss Débora Santizo Morales

Transcripción

1 Colegio Salesiano Don Bosco de Guatemala Proyecto de la Segunda Unidad Diseño de una página web usando la estructura web HTML y CSS Primero Básico Secciones A, B, C, D y E Curso: Tecnologías de la información y comunicación TICS Prof. Víctor José Aquino y Miss Débora Santizo Morales

2 Prof. Víctor Aquino y Profa. Débora Santizo Colegio Salesiano Don Bo

3 Proyecto de Unidad II UNIDAD: I BÁSICO A, B, C, D y E Marco Teórico: a) CSS (Hoja de Estilos de Cascada): Se maneja conjuntamente con HTML y nos ayuda a definir mediante cierta sintaxis la apariencia y presentación de las páginas web por distintos medios los cuales ayudar a manipular la estética y la apariencia de las páginas web. Debe de tener en cuenta de que debe de manejar dos archivos para que usted pueda manejar dicho elemento. <link rel= stylesheet type= text/css href= stilo.css /> (Nos ayuda a enlazar html con css) (Recuerde que el nombre que va dentro de href es el nombre con el que guardamos Nuestro archivo css) b) Elementos que no debe de olvidar: La estructura de class <div id="nav"> </div> (este es un ejemplo) c) Estructura de class <div id= titulo > </div> d) Elementos nuevos en HTML5: 1. <header></header> 2. <section></section> 3. <article></article> 4. <footer></footer> 5. <aside></aside> e) Revise el MANUAL DE HTML Y CSS EN LA PAGINA DEL CURSO ASI COMO EL MATERIAL DE APOYO QUE SE DARÁ EN CLASE Y SU LIBRO DE TEXTO ES VITAL PARA ESTE PROCESO.

4 PROYECTO: 1. El proyecto consiste en la realización de una página web profesional debe de contener el uso de CSS (hoja de estilos de cascadas), así como la utilización de nuevos elementos en html5. Por favor la imagen de abajo. MODELO DE PAGINA WEB NO 1 (SOLO ES BASE NO QUIERE DECIR QUE SEA IGUAL) MODELO DE PAGINA WEB NO 2 (SOLO ES BASE NO QUIERE DECIR QUE SEA IGUAL)

5 MODELO DE PAGINA WEB NO 3 (SOLO ES BASE NO QUIERE DECIR QUE SEA IGUAL)

6 MODELO DE PAGINA WEB NO 4 (EL VISTO EN CLASE) (SOLO ES BASE NO QUIERE DECIR QUE SEA IGUAL)

7

8

9

10

11 2. En las 4 imágenes anteriores vemos modelos de páginas web, uno de estos modelos fue mostrado en clase (Página web de Cartas Mágicas). De esta forma debe de quedar su página. Recuerde que NO DEBE DE SER IGUAL. Además el tema es libre por lo que debe de implementar su creatividad total al momento de realizar su proyecto. 3. EL TEMA DE SU PÁGINA WEB ES LIBRE, PUEDE COLOCAR CUALQUIER TEMA DEPORTIVO, MUSICA, AFICIONES, HOBBIES, ETC SIEMPRE Y CUANDO DICHOS TEMAS NO ATENTEN CONTRA LA MORAL Y CONTRA LOS VALORES EN TODO SENTIDO 4. La creatividad es parte muy importante, pero también la funcionalidad de cada uno de los elementos a trabajar. Qué debo de hacer? 1. Crear una página web que sea similar a los modelos de páginas web anteriormente presentados. Acá se muestra un quinto modelo de página web el cual tiene la estructura web vista. El tema usted lo elige siempre y cuando no sea de algo inadecuado o de violencia. Le recomiendo que lo haga de un tema de algo que le apasione y que lo haga de una forma que al usuario que ingrese a su página le guste o le llame la atención al ver su sitio

12 Su página debe de contener lo siguiente: a) Un encabezado de página (abajo visualizamos este encabezado de la página). Usted debe de crear un encabezado para su página web con una imagen de acuerdo al tema, así como la decoración para el mismo. Debe aplicar diseño, estilo, creatividad b) Un menú de opciones: Como el visto en clases aplicando los elementos de CSS. Debe de ser creativo y aplicar el diseño y los elementos necesarios. c) Cada menú debe tener un submenú de opciones (mínimo 2 opciones), son 5 menús d) Luego colocar la parte principal del cuerpo de la página es decir dónde va a colocar la información de la página. Acá usa elementos html5: <section></section>, <article></article>. Recuerda de que acá va lo que es en sí LA PAGINA WEB COMPLETA por lo que al usar el section y article debe de esta el tema principal de una forma profesional y completa. USE DOS SECTION Y CADA UNO CON DOS ARTICLE. AQUÍ ES DONDE TU DEBES DE COLOCAR TODA LA INFORMACION. RECUERDA QUE LA INFORMACIÓN VARIA CONFORME LA CREATIVIDAD DE LOS MODELOS DE PÁGINAS DADOS, ASI TAMBIÉN EN CADA UNO DE LOS ARTICLES QUE CONFORMAN EL SECTION DEBERÁN IR AL MENOS DOS IMÁGENES CON DECORACIÓN DE CSS, ASI TAMBIÉN LA INFORMACIÓN DEBE SER REDACTADA Y CON TODO LOS ESTILOS DE CSS. (VER MODELO DE LA PAGINA DE CARTAS MAGICAS, Y MODELOS DE PAGINAS WEB QUE APARECEN EN LAS PAGINAS ANTERIORES) e) Dentro del SECTION puede colocar un footer secundario

13 e) Una barra lateral que contenga información adicional a la principal. (Acá use el elemento ASIDE, ya que este lo usamos para colocar información de la página pero algo que sea adicional, use DOS ASIDES uno posicionado a la izquierda y uno posicionado a la derecha), En uno de estos deberá tener la información complementaria, la publicidad DE REDES SOCIALES, EN EL OTRO DEBERÁ INFORMACIÓN COMPLEMENTARIA DE OTRO TIPO ASÍ COMO ELEMENTOS MULTIMEDIA MUSICA, VIDEOS Y ENLACES A YOUTUBE f) Al momento de realizar el menú de opciones al momento de darle clic debe de generar un enlace hacia una página web o una página local (recuerde usar hipervínculos). Al darle clic por medio de <a href= >.Debe llevar mínimo a una página secundaria LOCAL y las demás de INTERNET. (YouTube, etc. Vea el ejemplo de una página secundaria usando section, article y header, sea creativo)

14 En el menú por lo menos debe haber 1 página web local, cuando digo local me refiero a una página HECHA POR TI MISMO y las demás deben de conectar a las del internet LA INFORMACIÓN QUE COLOQUES EN TU PÁGINA DEBE DE SER AUTÉNTICA, HECHA CON TUS PALABRAS, SI LO COPIAS Y PEGAS, SE ANULA EL PROYECTO ES LA CRACIÓN PERSONALIZADA Y CREATIVA LO QUE LO HACE QUE SEA DISTINTO A CADA TRABAJO QUE SE PUEDA REALIZAR. g) Hasta la parte de abajo al final debe COLOCAR UN FOOTER CON LOS DERECHOS RESERVADOS O DE AUTOR COPYRIGHT CON LOS DATOS TUYOS YA QUE TU HICISTE LA PAGINA WEB. (Vea el ejemplo de footer al final de la página web) &COPYRIGHT DERECHOS RESERVADOS VICTOR JOSE AQUINO URRUTIA QUINTO BACHILLERATO A CLAVE 4 CODIGO 243 AÑO GUIA: JAVIER ALVEREZ h) En cada una de las esquinas DISEÑARAS DOS LOGOTIPOS CON CSS Y HTML ESTO RECUERDA QUE ES CON LA ETIQUETA DIV LA CUAL GENERA UNA CAJA QUE PUEDE CREAR ESTA PARTE que sea de forma circular, ovalada o rectangular (las medidas deben de ser para un logotipo adecuado). El primer logotipo debe de rotar 360 grados (función de rotación) y el segundo logotipo debe de ensancharse y reducirse (función translatey). Vea el ejemplo de abajo. Cada uno debe de ir en la esquina izquierda/superior y la esquina derecha/superior.

15 DONDE ESTA LA FLECHA ROJA ES DONDE VAN A IR LOS LOGOTIPOS, EN LA PARTE IZQUIERDA EL LOGOTIPO DE ROTACION A 360 GRADOS Y EL LOGOTIPO EN LA PARTE DERECHA VA A IR EL LOGOTIPO CON TRANSLATEY. SEA CREATIVO. i) En la barra lateral izquierda y derecha irá el elemento ASIDE, ahí usted colocará los elementos como información de Facebook, twitter, snapchat, kiwi, el uso de redes sociales e información adicional. Aparte de ello colocará elementos de audio como audio play en donde se podrán escuchar al menos dos canciones en las que pueda colocar un MENÚ DE REPRODUCCIÓN MUSICAL en las cuales pueda detener, pausar o reproducir una canción, ASI COMO TODOS LOS ELEMENTOS MULTIMEDIA QUE SE VEAN EN CADA UNA DE LAS CLASES. El elemento ASIDE esta donde está indicado con las flechas de color azul. Ahí se insertarán los elementos que le he mencionado. Vea el ejemplo

16 Acá va ASIDE Esto es ASIDE Los logotipos deben de ir en aside, asi como las canciones, asi como la información adicional decorado con css, RECUERDA AL MOMENTO DE DESCARGAR LOS LOGOTIPOS DE REDES SOCIALES COLOCAR EN HERRAMIENTAS DE IMÁGENES TIPO LOGOTIPO PARA QUE SE ADECUE AL TAMAÑO EN ESPECIFICO

17 METODO DE ENTREGA, FECHAS E INFORMACIÓN NO NEGOCIABLE IMPORTANTE PARTE TEÓRICA: SE DEBERÁ ENTREGAR MANUAL DE USUARIO Y MANUAL DE PROGRAMADOR EN LA MISMA FECHA DE ENTREGA DEL PROYECTO. EN CLASE SE DARÁ MÁS DETALLE AL RESPECTO. NO SE ACEPTARÁ PROYECTO SIN DICHOS MANUALES PARTE PRÁCTICA (REVISIÓN Y PROCESO DE VERIFICACIÓN DEL PROYECTO) SEMANA DEL 1 AL 5 DE MAYO DEL 2017 EN PERÍODO ORDINARIO DE CLASES, SE REVISARÁ EL PROYECTO PARA VER CÓMO VA, RESOLVER DUDAS, ETC. EN CADA CLASE DE LA UNIDAD, SE DARÁ UN TEMA DEL PROYECTO!! FECHA DE ENTREGA: SEMANA DEL 12 AL 21 DE MAYO DEL 2017 SEMANA PREVIA A LAS FIESTAS CONMEMORATIVAS DE MARÍA AUXILIADORA, POR MEDIO DE LA PLATAFORMA, POR FAVOR LEER EL MÉTODO DE ENTREGA MÉTODO DE ENTREGA: LA ÚNICA FORMA AUTORIZADA PARA ENTREGAR SU PROYECTO DIGITAL SERÁ POR MEDIO DE LA PLATAFORMA DE EDUCATICS CUYA PÁGINA, USUARIO Y CONTRASEÑA YA FUE ENTREGADA CON LISTADO EN CLASE. EN CLASE SE EXPLICARÁ COMO SUBIR SU ARCHIVO. SE SUBIRÁN ARCHIVOS DE HTML Y CSS COMO APOYO PARA HACER SU PÁGINA, OJO NO DEBE DE SER SU PROYECTO IGUAL A ESOS ARCHIVOS SOLO ES UNA GUIA HABRÁ UNA FECHA HABILITADA PARA SUBIR SU PROYECTO EN DICHA FECHA SE HABILITARÁ LA PLATAFORMA PARA QUE SUBA SU CARPETA COMPRIMIDA CON SU PROYECTO, DICHA FECHA ES INAMOVIBLE FECHA DE INICIO: VIERNES 12 DE MAYO HASTA EL DOMINGO 21 HASTA LAS 12:00 DE LA NOCHE, SI LO ENTREGA DESPUÉS DE ESA FECHA Y HORA NO PODRÁ YA QUE LA PLATAFORMA QUEDARÁ AUTOMÁTICAMENTE CERRADA

18 UNA VEZ ENVIADO NO PODRÁ VOLVERLO A ENVIAR YA QUE SE REGISTRA LA HORA Y FECHA DE ENTREGA POR FAVOR VERIFICAR QUE TODO VAYA CORRECTAMENTE HABILITADO COMO ES UNA PAGINA WEB LLEVA HTML, CSS, IMÁGENES, VIDEOS, MUSICA, PAGINAS LOCALES, ETC POR LO QUE DEBERÁ ENTREGARLO EN UNA CARPETA COMPRIMIDA EN ZIP Y TENER SU PROGRAMA WINRAR. SI NO SABE COMPRIMIR UNA CARPETA ACERQUESE A CUALQUIER DOCENTE DEL AREA DE TICS QUE CON GUSTO SE LE AYUDARÁ SI NO TIENE EL PROGRAMA PARA COMPRIMIR CARPETAS DESCARGUELO GRATUITAMENTE DE LA SIGUIENTE PAGINA EN SU MANUAL DE USUARIO DEBERÁ TENER IMPRESA LUEGO DE LA CARÁTULA O PORTADA LA RÚBRICA DE CALIFICACIÓN LA CUAL SE ADJUNTA EN ESTE MISMO DOCUMENTO. ESTO SERVIRÁ PARA CALIFICAR DICHO PROYECTO SINO NO SE LE CALICARÁ RÚBRICA DE CALIFICACIÓN (OBLIGATORIA IMPRESA) Criterios de Evaluación Excelente Bueno Debe mejorar Colocó todo lo solicitado de html y css, se nota su creatividad en su trabajo 3pts Coloco algunos elementos de html y css, falta creatividad 2pts Conecto html y css sin error alguno 3pts Coloco multimedia, imágenes asi como rotación y transformaciones 2pts Guardo sus archivos correctamente 2pts Conecto a medias o con algunos errores 2pts Se evidencia multimedia, pero con errores asi como transiciones y transformaciones 1pts Guardo con errores, no ubico bien sus archivos 1pts Casi no ejecutó nada de html y css 2pts No compilo casi nada solo código fuente 2pts Animo tu puedes. (Prof. Víctor Aquino)

19

20

21

22

23