top of page

Diseño de Páginas Web SM2

Site Local

Situación didáctica

Hoja de Firmas

Crear en el escritorio una carpeta llamada SITE, deberá contener una imagen de fondo que descargarás y guardarás dentro de la carpeta, llamada fondo.jpg 

http://www.svcmscentral.com/SVcommon/images/fondos/gris-oscuro/10.jpg

Crear 5 cubos de los siguientes colores en Paint con una resolución de 150 x 150 pixeles de color Rojo, amarillo, verde, rosa y azul. Guardar dentro de la carpeta.

Situación didáctica 23/07/2018

Gadgets

Revisar los siguientes Links e integrar el código del Gadget a la Página correspondiente 

Páginas

Roja

https://www.voki.com/site/create

Amarilla

https://es.cooltext.com/

Verde

https://countingdownto.com/es

Rosa

 

Azul https://app.chatra.io/

Muestra al visitante un mensaje (alerta) al entrar a tu sitio web

<BODY onLoad="alert('Bienvenido a mi Página Web. Disfruta el contenido');" onUnLoad="confirm('Gracias por tu visita, espero que no sea la última');">

Marquesina Centrada

<center> <div class="n"><p> <b><font color="#000000" face="georgia" size="4"><marquee width="400" scrollamount="5" bgcolor="#FFFFFF">Aquí tu texto</marquee> </font></b></p><center>

Botón ir arriba

</script></div><div class="n"><div class="n"> <a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>

Líbrarse de los copiones. No dejar seleccionar el texto y bloquear “Click Der” y “Ctrl”

</script></div><div class="n"><div class="n"> <a href="#" title="Ir arriba"><img alt="Ir arriba" border="0" src="http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png" style=position:fixed;bottom:0;right:0;/></a> </div>

Muestra al visitante un mensaje (alerta) al entrar a tu sitio web

Marquesina de mensaje en la pestaña

<SCRIPT LANGUAGE="JavaScript">var txt=" Universidad Marista de Queretaro ";var espera=140;var refresco=null;function rotulo_title() {document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);refresco=setTimeout("rotulo_title()",espera);}rotulo_title();</script>

Haz que una Imagen se agrande al pasar el Cursor. Solo cambia la URL

<img src="AQUI VA LA URL DE LA IMAGEN" onmouseover="this.width=500;this.height=400;" onmouseout="this.width=200;this.height=150;" width="200" height="100" />

Sonido de Fondo a Página Web

<BGSOUND SRC="sonido.mid" LOOP=none> <WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">

Cambiar el puntero del Mouse

<style type="text/css">
<!--
body { cursor: progress}
-->
</style>

Tiposs de Cursores

cursor:context-menu;

cursor:help;

cursor:pointer;

cursor:progress;

cursor:wait;

cursor:cell;

cursor:crosshair;

cursor:text;

cursor:vertical-text;

cursor:alias;

cursor:copy;

cursor:move;

cursor:no-drop;

cursor:not-allowed;

cursor:all-scroll;

cursor:col-resize;

cursor:e-resize;

cursor:ew-resize;

cursor:n-resize;

cursor:ne-resize;

cursor:nesw-resize;

cursor:ns-resize;

cursor:nw-resize;

cursor:nwse-resize;

cursor:row-resize;

cursor:s-resize;

cursor:se-resize;

cursor:sw-resize;

cursor:w-resize;

cursor:none;

25,26,27 de julio 2018    Proyecto SITE LOCAL 50% Si esta completa con todos los elementos mencionados (Investigar en Manuales lo que no hemos visto). No Completo y Sencillo 20%.
Diseñar un site Local de tu artista favorito, deberá contener 5 páginas web que son las siguientes :
Página Inicio (Frontal del Sitio)
  • Titulo en pestaña
  • Imagen de Fondo en la página
  • 3 Títulos con diferente tipos de letra y color, centrados.
  • Marquesina en movimiento
  • imágenes que serán los hiperviculos a las siguientes 4 páginas. 
Página de Biografia
  • Titulo en pestaña
  • Sonido de Fondo al abrir la página
  • 3 Títulos con diferente tipos de letra y color, centrados.
  • Texto de la biografía
  • Imagen centrada
  • Hipervínculo de texto para regresar a página de portada
Página Discografia (El Alumno agrega los contenidos que considere y muestren la calidad)
  • Link a un video en Youtube
Página Conciertos (El Alumno agrega los contenidos que considere y muestren la calidad)
  • Calendario de 10 conciertos y Link a Ticketmaster
Página Fans y Redes sociales (El Alumno agrega los contenidos que considere y muestren la calidad)
  • Links a Instagram, Youtube Canal Oficial, Twitter y Facebook.
UTILIZAR 7 GADGETS VISTOS EN CLASE
AGREGAR MAS COSAS DE LAS NO MENCIONADAS (50% CALIF.) PAGINA MUY SENCILLA (20% CALIF.)
Notas:
  • Alumno que no llegue puntual durante alguno de los 3 días, o no entra por uniforme u otro motivo, pierde 50% promedio.
  • Nadie puede hablar durante el proyecto ni asesorar a un compañero, de lo contrario se le pedirá abandonar la sala y pierde 50% promedio.
  • Para calificar deberás llamar al maestro, deberá cumplir con la secuencia didáctica mencionada arriba, no debe haber errores, si no funciona, automáticamente el  pierdes 50%.
  • A partir de las 8:15 pm del Viernes 27, ya no se revisa, aquel alumn@ que no terminó o no entregó pierde su 50%. Sin prorroga de tiempo, es en automático.

Códigos de Prueba.....

 WebSite 

Situación didáctica

1,2 y 3 de Agosto 2018   
Proyecto WEBSITE  30% de Promedio Final.
Solo se recibe completa para calificarla  y no en partes.
Diseñar un Website de una empresa tuya propia, que se relacionará con la carrera universitaria que estudiarás (Ej. Odontólogo - Consultorio Dental) deberá contener 5 páginas web (La núm.1 Portada de Presentación,2,3,4 que dan a tu criterio, pero bien presentadas y creativas, la 5 será de Contacto.
Lista de Elementos que debe tener tu proyecto:
  • Encabezado con Imágenes y CoolText (WidgetWix)
  • Imagen de Fondo en la página 
  • Imagen de Color en la página
  • Vídeo de Fondo en la página
  • Títulos de texto con diferentes tipos de letra, color y sombreado.
  • Marquesina en movimiento.
  • Texto animado glitter http://textanim.com/?lg=sp
  • Imágenes con hipervículo.
  • Vídeo Incrustado en Página  (Wix)
  • Contador de Visitas (WidgetWix)
  • Mapa de Ubicación (Wix)
  • Reloj de Tiempo https://www.zeitverschiebung.net/es/clock-widget
  • Pronóstico de Clima https://www.clima.com/widget
  • Contacto para Email  (Wix)
  • Botón (Wix)
  • Franja (Wix)
  • Redes Sociales (Wix)
  • Slider de Imágenes
Notas a considerar:
  • Alumno que no llegue puntual durante alguno de los 3 días, o no entra por uniforme u otro motivo, pierde 30% promedio.
  • Nadie puede hablar durante el proyecto ni asesorar a un compañero, de lo contrario se le pedirá abandonar la sala y pierde 30% promedio.
  • Para calificar deberás llamar al maestro, deberá cumplir con la secuencia didáctica y todos los elementos mencionados arriba, no debe haber errores, si no funciona el Website, automáticamente el  pierdes 30%.
  • A partir de las 8:15 pm del Viernes 3, ya no se reciben los links de tu website, aquel alumn@ que no terminó o no entregó pierde su 30%. No hay prorroga de tiempo, es en automático.
  • Ojo con las faltas y llegadas, 7:11 ya no entra.
Enviar el Link de la parte superior, que aparece cuando le das Publicar y ver sitio (No otro, porque no visualizaré tu proyecto) a prepavespertinamarista@gmail.com
bottom of page