viernes, 12 de junio de 2015

Despedida a mis queridos educandos

Antes que nada, por éste mismo medio quiero desearles lo mejor en éste nuevo proyecto en las vidas de cada uno de ustedes.

Recordarles que los sueños si se pueden llegar a realizar y las oportunidades hay que tomarlas por que tal vez se presenten una sola vez en la vida.

Gracias por permitirme ser parte de su vida académica ya no nos veremos más en la grandiosa institución de la que formamos parte, pero tengan por seguro que ustedes, han marcado mi vida como docente y he aprendido de ustedes también.

Lo que decidan ser, es decisión suya, pero por favor.....sean los mejores.

Les deseo Éxito.

Continúen adelante, sean persistentes y que dios me los bendiga.

Atte

L.I. Miguel Badillo Velázquez
Docente

Junio del 2015

miércoles, 27 de mayo de 2015

Semana del 25 de Mayo al 5 de Junio

A partir de ésta semana tendrás el tiempo de las clases en laboratorio de informática, para avanzar en el proyecto final de Páginas Web, que consiste en lo siguiente:

Elaborar un sitio web con almenos 7 páginas como sigue:


1.- Un documento html, llamado index, el cuál contendrá la "portada" general de nuestro sitio web, utilizando el modelo de flexbox (cajas flexibles) con las siguientes características:

a) Contenedor.- El cuál contendrá las demás cajas (etiquetas DIV).

b) Encabezado.- Donde podrás colocar una imágen con el logo de tú sitio o una imágen general que represente la temática de tu sitio web (tipo biografía de Facebook). la cuál podrás realizar en alguno de los programas de diseño que ya conoces (Corel Draw o Photo Shop).

c) Menú principal.- Aquí deberás armar el menú principal, insertando botones animados en flash que nos enlacen a las otras 6 páginas que conforman nuestro sitio web, deberás investigar como insertar archivos de flash (.swf) desde Dream Weaver, para poder "armar" tú menú.

d) Destacado.-Espacio para presentar una bienvenida y un resumen de lo que trata el sitio, incluir almenos una imagen.

e) Pie de página.- Espacio en donde colocarás el nombre del autor del sitio, entiendase que colocarás tú nombre completo seguido por el texto Derechos Reservados y el símbolo de ®, alineado a la derecha.

Para el menú, las 5 opciones que deberás incluir son:


  1. Inicio.- Deberá enlazarnos al documento .html principal (index).
  2. Acerca de.- Deberá enlazarnos a otro documento .html en donde colocarás un resumen acerca de la temática que se trata en tú sitio web y a quién va dirigido, ilustrar con imágenes.
  3. Galería.- Deberá enlazarnos a otro documento .html en donde nos mostrará una serie de imágenes relacionadas con la temática general de nuestro sitio, podrás utilizar tablas o cajas. 
  4. Sitios de interés.- Deberá enlazarnos a otro documento .html en donde nos mostrará enlaces a otros sitios web que contengan información de interés relacionados con la temática de nuestro sitio.
  5. Redes.- Deberá enlazarnos a otro documento .html en donde nos mostrará los enlaces a las redes sociales más conocidas: facebook, twitter, google +, instagram, etc.
  6. Contacto.- Deberá enlazarnos a otro documento .html, en donde colocarás la información general de contacto ficticia, es decir: un número de teléfono, una ubicación física, correo electrónico, cuenta de facebook, twitter, instagram, google +,etc.
NOTA: Para todos los documentos .html, deberá respetarse la misma estructura de cajas, obviamente cambiando el contenido de la caja destacado, según se requiera.

La única fecha de entrega es el día Jueves 4 de Junio del 2015.



domingo, 17 de mayo de 2015

Práctica 2 Bloque III

Saludos y aquí estoy de nueva cuenta para hacerles entrega por segunda ocasión y ahora por éste medio la guía para realizar la prática No. 2 del bloque III, que consiste en realizar un nuevo sitio web basado en el modelo de FlexBox (cajas flexibles) que ya anteriormente hemos manejado utilizando el gestor de sitios web dreamweaver cs6.

Sin más preámbulos les dejo la guía recordándoles que será revisada para la primera clase de ésta semana del 18 al 22 de Mayo del 2015.


Valor: 10%

Nota: no se desesperen si no le agarran la onda......les sugiero que revisen su código y recuerden que se vale modificar todo: colores, tamaño y tipos de letra, bordes en las cajas (Div), alineaciones, niveles de encabezado(H1.....H7).

Tarea: Les anticipo que la tarea para ésta misma semana (Jueves) será investigar que es lo que se necesita para poder "subir" un sitio web local a la nube.

Los pasos para realizarlo desde Dreamweaver o de manera externa (desde el servidor que ofrece el servicio de alojamiento).

E investigar sitios que encontraron en la red (gratuitos y de paga) para alojar nuestros proyectos.

Abur.....

Manual para elaboración de plantilla de sitio web con Dream Weaver

Saludos, les traigo directamente hasta sus hogares y por éste medio el manual para la creación de un sitio web básico en Dream Weaver CS6.


Ésta plantilla deberás modificarla a tú total gusto con el tema que más te agrade, respetando la estructura de directorios de la siguiente manera:


  1. Una carpeta con tú nombre y apellido paterno, dentro de la cual deberás tener:
  2. Una carpeta con el nombre de css, en la cual contendrá tú archivo de hojas de estilo, llamado estilos.css.
  3. Una carpeta con el nombre de img, la cual contendrá todas las imágenes que utilices en el sitio web.
  4. El documento HTML, llamado index.html.
El valor de ésta plantilla es de 40%, así que deberás entregarla en tiempo y forma para la fecha programada, de lo contrario solo tendrá un valor de 15%.

Deberás conservar tus hojas impresas del manual para anexarlas en el portafolio de evidencias.

miércoles, 18 de marzo de 2015

Lectura Bloque II

Aquí les encargo la siguiente lectura y su correspondiente ejercicio de la receta, la cual deberán entregarla en ésta misma semana, a má tardar el día Sábado (todo el día) en una carpeta comprimida con su nombre a mi correo.



Recuerda que puedes comprimir una carpeta con archivos, utilizando un compresor como el winrar.

Saludos y nos vemos pronto.

lunes, 9 de marzo de 2015

Lectura Bloque I

Aquí un resumen de lo visto en el Bloque I:


Saludos

Direcciones Absolutas y Relativas


En una página web es casi imprescindible referenciar a otros archivos, ya sea al utilizar una imagen, al enlazar con otra web.

Nota: Es importante diferenciar entre mayúsculas y minúsculas, y respetar los nombres de los archivos. Por ejemplo, si intentamos mostrar la imagen.gif y escribimos imagen.GIF, se mostrará correctamente en nuestro equipo, si trabajamos en Windows. 

Pero si subimos la página a un servidor y éste utiliza Linux, no se mostrará la imagen. 

Por eso, para evitar errores, aconsejamos escribir los nombres de archivo siempre en minúsculas.


Una dirección absoluta es aquella que incluye toda la ruta hasta el archivo, incluido el protocolo http. Por ejemplo http://www.animate53blogspot.mx/illustratorcs3/graficos/ej_homer_final.gif, o http://www.animate53blogspot.mx/index.htm.

Esta dirección es válida siempre que no cambie la ubicación del archivo que referenciemos.

Utilizaremos direcciones absolutas siempre que queramos referenciar archivos que no estén en nuestro sitio.



Una dirección relativa es aquella que se expresa a partir de una ubicación conocida, dentro de un mismo sitio.

 Direcciones relativas a un archivo:

Por ejemplo, imaginemos que tenemos una página, en www.misitio.es/webs/pagina1.htm. Para referenciar a la página www.misitio.es/webs/pagina2.htm basta con escribir sólo pagina2.htm, ya que si no ponemos otra cosa, quiere decir que buscamos en la misma carpeta.

Si de la misma página, queremos referenciar al archivo www.misitio.es/webs/imagenes/imagen1.gif, escribimos la dirección a partir de la carpeta en la que nos encontramos, es decir, solo escribiríamos imagenes/imagen1.gif.

Si lo que queremos referenciar está en una carpeta de nivel superior, por ejemplo el archivo www.misitio.es/fondo.gif, utilizamos .. para subir de nivel. Por lo tanto escribiríamos ../fondo.gif.

Podemos combinar las dos formas para referenciar por ejemplo al archivo www.misitio.es/graficos/imagen1.gif, escribiendo ../graficos/imagen1.gif.

Direcciones relativas al sitio:

Otra opción es establecer una referencia relativa al sitio. Para hacerlo, comenzamos la referencia al archivo con el signo /, que indica que se empieza a buscar en la carpeta raíz del sitio.

Así, para referenciar al archivo www.misitio.es/webs/pagina1.htm, podemos emplear /webs/pagina1.htm. Y esto sería válido tanto si referenciamos el archivo desde la página www.misitio.es/webs/pagina2.htm como si lo hacemos desde www.misitio.es/paginas/personal/ventas/inicio.htm o de cualquier otra página dentro del sitio.

Un inconveniente de este tipo de direcciones relativas es que sólo funcionan si vemos la página utilizando un servidor, ya que si abrimos un archivo local, tomará como raíz del sitio la raíz de la unidad.

Las ventajas de las direcciones o referencias relativas son dos, la primera es que son más cortas y la segunda es que si cambiamos las páginas a otro dominio no hará falta modificarlas. Por ejemplo, si actualmente tienes un dominio compartido gratuito y te han asignado el subdomnio http://www.webgratis.com/badillo547, tus páginas tendrán la dirección http://www.webgratis.com/badillo547/aguilas_america.html, pero puedes usar referencias relativas y escribir sólo aguilas_america.html, si más adelante compras un dominio propio, por ejemplo, www.fieras.es, sólo tendrías que colocar tu página en el nuevo dominio (servidor) y tus enlaces funcionarían correctamente apuntando a http://www.fieras.es/aguilar_america.html.


miércoles, 4 de marzo de 2015

Ejercicio de Links entre documentos .html


index.html

En éste documento publicas un menú que te enlace a dos temas

pagina1.html

Contiene la opción del enlace #1


pagina2.html

Contiene la opción del enlace #2

Guardar los 3 documentos en una carpeta llamada menu.


Ejemplo:

                                     Matematicas


 Calculo diferencial                             Calculo integral


Cuando ingrese al documento que contendrá mi Menú (index.html), puedo seleccionar una de las dos opciones, en éste caso selecciono Calculo diferencial y se abrirá el documento que desarrolla ese tema (pagina1.html) y me mostrará al final un link que me devuelva al menú (index.html), al seleccionar la segunda opción que es Calculo integral, se abrirá el documento que muestre el tema de calculo integral (pagina2.html) y también me mostrará al final un link que me devuelva al menú (index.html).

Los tres documentos html, deberán ser guardados en una misma carpeta llamada menu.

Nota: Mañana reviso el portafolio de evidencias digital.

Saludos.


Links


link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).

alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados)


<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

      <a href="http://web53vasco.blogspot.mx/">Visita El blog oficial</a>


Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero ¿Y si queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido en la etiqueta <body>?

Para hacer esto utilizaremos el atributo style dentro del enlace:
<a href="mienlace.html" style="color:red">

Así saldrá el enlace en color rojo, independientemente de lo definido para todo el documento.

Realizar un documento html nuevo que nos enlace a 3 diferentes páginas web.

jueves, 26 de febrero de 2015

Tipos de Imágenes para WEB


Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, png, svg, tiff, raw, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF, PNG y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. 

 Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Cuantos menos colores tenga la imagen, menos ocupará. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animación.

 Formato PNG:
El formato GIF es un formato propietario de Compuserve, aunque su uso está permitido a todo el mundo. Por eso se creó el formato PNG, que es libre y está un poco mejorado con respecto al GIF, aunque su funcionalidad es muy parecida. A pesar de que se recomienda el uso del PNG, el formato GIF sigue estando mucho más extendido.

Los formatos PNG-24 y PNG-32 son especialmente indicados cuando la imagen tiene degradados y semitransparencias, ya que son los únicos formatos que las soportan correctamente.

 Formato JPG o JPEG:
Si pensamos en una fotografía, los formatos anteriores se quedan cortos. Cualquier foto contiene millones de colores, y al mostrarla con 256 se perdería mucha calidad. Además, en las fotografías no hay áreas grandes de un sólo color, por lo que el archivo resultante sería grande. En estos casos, el mejor formato es el JPG, que está optimizado para fotografías con muchos colores, que se mostrarán con una gran calidad.


Cuando queremos introducir una imagen, lo hacemos con la etiqueta <img />. Los atributos que como mínimo ha de tener esta etiqueta son los siguientes:


<img src="ubicacion/imagen.gif" alt="texto alternativo" />

Cuando el navegador no encuentre la imagen ubicada en scr no podrá mostrar la imagen. En su lugar puede mostrar una imagen de error, además se mostrará el texto contenido en el atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se puede mostrar la imagen. 

Existen diferentes objetos gráficos que podemos usar en nuestros diseños, entre los que podemos citar logotipos, banners, iconos, bullets, fotografías, ilustraciones, entre otros.

Cada uno de ellos posee unas características de diseño y capacidades de comunicación propias, jugando un papel diferente en la composición.


Consulta las siguientes referencias web:


miércoles, 25 de febrero de 2015

Etiquetas

Apuntes sobre otras etiquetas y ejercicios en clase de hoy Miércoles





Saludos y echenle muchas ganas para sus exámenes de admisión a la Universidad.


martes, 17 de febrero de 2015

Editores de codigo HTML y más

Saludos, se pueden apoyar instalando alguno de estos editores de código, que son gratuitos y ayudan bastante en la creación por código HTML de sitios web.







(Existe versión Portable)

Excelente aplicación muy completa y gratuita.



Caso aparte y en linea............

Jsfiddle.net

Es un entorno de pruebas que te permite probar rápidamente pequeños códigos HTML, CSS y JavaScript. Aunque puedes usarlo simplemente como un editor en línea para crear fragmentos de código pues cuenta con paneles para la escritura de la CSS, HTML, lo más interesante de esta herramienta es:
  • Te permite probar código en diferentes frameworks y en las diferentes versiones del mismo framework (jQuery, AngularJS,...)
  • Puedes guardar el código y éste siempre estará disponible en un repositorio al cual tendrás acceso a través de internet.
  • El código que hayas guardado lo podrás compartir con otros usuarios. Muy útil para pruebsa de concepto, ejemplos, etc...


Nos vemos.......

Bienvenida

Saludos a todos mis queridos educandos:


He aquí el temario y forma de evaluar presentado en clase.



Nos vemos en clase....