lunes, 27 de julio de 2015

Realización de Páginas con Frames o Marcos.


Los marcos HTML -o frames- son regiones o áreas definidas espacialmente en una página HTML, que muestran contenidos de forma independiente.
Cada marco de una página equivale a un único documento HTML. 		@
Una estructura clásica de página con marcos es un documento que mantiene:
  • una parte fija -conteniendo, por ejemplo, un menú de opciones- y
  • una, o más, partes variable: donde se van mostrando distintos contenidos (según lo seleccionado, por ejemplo- en el menú de opciones)
@ Una estrutura de marcos consta de dos componentes principales:
  • la definición del conjunto de marcos y
  • los marcos individuales.
 @
Lo que el usuario percibe como una sola página web con tres marcos, en realidad está formado por cuatro archivos independientes:
  • tres archivos que albergan el contenido que aparece dentro de los marcos.
  • el archivo de conjunto de marcos -que define la estructura de la serie de tres marcos del documento- y (como el de estos apuntes: el de arriba con el título del tutorial, el de la izquierda con el nombre del autor y éste que estamos leyendo que es basicamente el que va cambiando)
El conjunto de marcos se conoce como marco padre, mientras que un solo marco se conoce como marco hijo.
Esto determina la existencia de varios documentos HTML por cada página que contenga "frames" o marcos.
UNA ESTRUCTURA DE MARCOS
Para diseñar una página web dividida en frames, conviene :
  • Tener preparadas las páginas de contenido que se van a mostrar en cada uno de ellos, antes de comenzar a crearlos.
  • Tener a mano:
    • la Paleta de Objetos/marcos,
    • el Inspector de Propiedades y
    • el Inspector de Marcos.
  • tener activado mostrar los bordes de los marcos en la opción Menú Ver > Bordes de Marco
    Dreamweaver     añade un espacio alrededor del documento y muestra todos los bordes; eso facilita las operaciones de arrastar y seleccionar marcos.
@
Existen varias formas de crear un conjunto de marcos dentro de un documento:
 @
CREAR MARCOS MEDIANTE LA PALETA OBJETOS: INSERTAR UN CONJUNTO DE MARCOS PREDEFINIDO
@ Los iconos de conjuntos de marcos predefinidos del panel Marcos de la paleta de Objetos proporcionan una representación visual de cada conjunto de marcos al aplicarse a un documento seleccionado. @

  • El área azul clara de un icono de conjunto de marcos predefinido representa la página o el marco seleccionado actualmente en un documento,
  • El área blanca de un icono de conjunto de marcos predefinido representa el nuevo marco (o los nuevos marcos).
Para insertar un conjunto de marcos predefinido
    1. Situar el punto de inserción en el documento al que rodeará el conjunto de marcos.
    2. Luego, llevar a cabo una de estas operaciones:

      • En el panel Marcos de la paleta de Objetos, seleccionar un conjunto de marcos predefinido. Para insertar el conjunto de marcos, se puede:
        • Hacer clic en un icono -del tipo -, ó
        • Arrastrar un icono -del tipo - directamente al documento.

    • Eligir Menú Insertar > Marcos > (Izquierda, Derecha, Arriba, Abajo, Izquierda y arriba, Superior izquierda, Izquierda superior o Dividir). No es una operación tan limpia, y cómoda pero Dreamweaver lo admite igualmente

Atención que al querer guardar la nueva estructura (menú archivo>...) ya no podremos guardar sólo la página, sino que nos ofrecerá guardar conjunto de marcos, y habrá que darle un nombre especifico para ese conjunto de marcos. ¡También es muy importante nombrar adecuadamente cada página del conjunto de marcos!.
Atención : para evitar confusiones más adelante, es conveniente nombrar cada marco antes de guardarlos en el Inspector de propiedades de Marco
CREAR MARCOS DE FORMA DIRECTA: INSERTAR UN CONJUNTO DE MARCOS DISEÑADOS PERSONALMENTE
Para crear uno mismo -sin predefinir- un conjunto de marcos:
Hacer ver los bordes de los marcos: Menú Ver > Bordes de marco
En un documento en blanco, podemos crear divisiones de marcos sólo con arrastrar los bordes horizontales o verticales de la página.
Para crear una división nueva, nos situamos sobre uno de los bordes y, manteniendo pulsada la tecla Alt , pinchamos y arrastramos con el ratón.
La nueva estructura se reflejará al momento en los Inspectores de Propiedades de Marcos
Atención que al querer guardar la nueva estructura (menú archivo>...) ya no podremos guardar sólo la página, sino que nos ofrecerá guardar conjunto de marcos, y habrá que darle un nombre especifico para ese conjunto de marcos.

Para eliminar un determinado marco:
Arrastrar el borde del marco hasta sacarlo fuera de la página o hasta el borde del marco padre.
CREAR MARCOS DESDE MENÚ MODIFICAR
Hacer ver los bordes de los marcos: Menú Ver > Bordes de marco
Eligir Menú Modificar > Conjunto de marcos > Dividir marco a la izquierda, ó a la derecha, ó hacia arriba, ó hacia abajo.
Mantener pulsada la tecla Alt mientras se arrastra uno de los bordes del marco hasta dentro de la ventana de documento para dividir el documento en vertical o en horizontal. Al arrastrar un borde del marco de este manera se va dividiendo el documento en marcos nuevos.








BIBLIOGRAFIA
http://bit.ly/1Jq3mnW

 


















Publicado por en No hay comentarios:

martes, 23 de junio de 2015

ANALISIS DE LA PELICULA "ENTRE MAESTROS"

Este vídeo nos habla del sueño de  Carlos González, un profesor de Secundaria que quería enseñar a sus alumnos de una manera diferente, para sacar lo que llevaban dentro y prepararles de verdad para la vida. De su labor diaria durante 24 años surgió el libro Veintitrés maestros, de corazón: un salto cuántico en la enseñanza y, ahora, una película que pone en práctica su teoría dando seguridad al alumno para que él mismo descubra el mundo que lo rodea
El afán de este maestro es que su experiencia sirva para ayudar a otros maestros a inventar otros métodos de enseñanza.comenta el docente, que ahora imparte formación a profesores para implicarles en su método..
Como él mismo explica, que este vídeo da a conocer lo que el había querido enceñar pero no había podido entregar al cien por ciento en sus clases. Este maestro elegio a 11 chicos que eran rebeldes y estaban un poco mal en sus estudios,para que  experimenten doce días en un aula donde se los provocaba. El ejercicio es interesante para estudiantes y profesores, pero también para espectadores ajenos al ámbito educativo.
Este maestro les enseña a ver al mundo de otra forma , donde un estudiante relata lo que le ocurrió en su pasado lo que le viene afectando en su diario vivir , otro estudiante anteriormente se altera y se retira del aula , al regresar viene con un carácter muy  fuerte hacia el maestro, en otras palabras este maestro les indica o les enseña a estos estudiantes que para aprender no es necesario utilizar las mismas tecnicas , que hay muchas mas interesantes y divertidas que nos ayudan a comprender mejor.
Publicado por en No hay comentarios:

lunes, 25 de mayo de 2015

Adobe Dreamweaver

           

  1. Adobe Dreamweaver 
  2. es una aplicación en programa de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno de los programas más utilizados en el sector del diseño y la programación web por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
    Sus principales competidores son Microsoft Expression Web y BlueGriffon(que es de código abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido paraInternet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
    Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
    La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización, puesto que en este programa sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas deJavascript que hace que sea un programa muy fluido y todo ello permite que programadores y editores web hagan extensiones para su programa y lo pongan a su gusto.
    Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
    Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
    Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
    Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).
    No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
    Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
    Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL yMicrosoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP, ASP.NET,ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
    Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
    También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.

    Resaltado de sintaxis[editar]

    A partir de la versión 5, Dreamweaver admite el resaltado de sintaxis para los siguientes lenguajes por defecto:
    1. Elemento de lista numerada
    2. Elemento de lista numerada

    Historial de versiones[editar]

    ProveedorVersión mayorVersión menor/nombre alternativoFecha de publicaciónNotas
    Macromedia1.01.0Diciembre de 1997Primer lanzamiento, sólo para Mac OS.
    1.2Marzo de 1998Primera versión para Windows.
    2.02.0Diciembre dRRe 1998
    3.04.2Diciembre de 1999
    UltraDev 1.0Junio de 2000
    4.04.0Diciembre de 2000
    UltraDev 4.0Diciembre de 2000
    6.0MX29 de mayo de 2002
    7.0MX 200410 de septiembre de 2003
    8.08.013 de septiembre de 2005
    Adobe9.0CS316 de abril de 2007Sustituye a Adobe GoLive en la serieCreative Suite
    10.0CS423 de septiembre de 2008
    11.0CS512 de abril de 2010
    11.5CS5.512 de abril de 2011
    12.0CS621 de abril de 2012
    13.0CCAbril de 2013
    ColorSignificado
    RojoVersión antigua
    AmarilloVersión antigua; soportada aún
    VerdeVersión actual


  3.          






Publicado por en No hay comentarios:

Adobe Muse

  1. Adobe Muse
  2. Adobe Muse es la nueva herramienta de diseño que cumple una de tus ilusiones: maquetar webs igual que compones imágenes con Photoshop, sin programar ni una línea de código. No exageramos al decir que Adobe Muse es uno de los editores web más sencillos que hemos visto.

Publicado por en No hay comentarios:

martes, 5 de mayo de 2015

COLORES HECXADECIMALES , SU USO Y SUS FORMAS DE CONVERCION EN RGB Y CMYK

Nombres de colores hexadecimales

Del más claro al más oscuro


Los colores en HTML se representan mediante un número hexadecimal.
Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF.
Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal.
A continuación se muestran los 216 colores seguros para web, para que puedas consultarlos cuando lo necesites.

Nombre del color Código hex Color "seguro para web" más cercano
BLANCO #FFFFFF #FFFFFF
AZUR #F0FFFF #FFFFFF
CREMA #F5FFFA #FFFFFF
NIEVE #FFFAFA #FFFFFF
MARFIL #FFFFF0 #FFFFFF
BLANCO FANTASMA #F8F8FF #FFFFFF
BLANCO FLORAL #FFFAF0 #FFFFFF
AZUL ALICIA #F0F8FF #FFFFFF
CIAN CLARO #E0FFFF #CCFFFF
MELÓN VERDE #F0FFF0 #FFFFFF
AMARILLO CLARO #FFFFE0 #FFFFFF
CONCHA #FFF5EE #FFFFFF
SONROJO LAVANDA #FFF0F5 #FFFFFF
HUMO BLANCO #F5F5F5 #FFFFFF
ENCAJE ANTIGUO #FDF5E6 #FFFFFF
SEDA DE MAÍZ #FFF8DC #FFFFCC
LINO #FAF0E6 #FFFFFF
AMARILLO ALAMBRE DORADO CLARO #FAFAD2 #FFFFCC
GASA LIMÓN #FFFACD #FFFFCC
BEIGE #F5F5DC #FFFFCC
LAVANDA #E6E6FA #CCCCFF
BATIDO DE PAPAYA #FFEFD5 #FFFFCC
ROSA BRUMOSA #FFE4E1 #FFCCCC
BLANCO ANTIGUO #FAEBD7 #FFFFCC
BLANCO ALMENDRA #FFEBCD #FFFFCC
SOPA #FFE4C4 #FFFFCC
TURQUESA PÁLIDO #AFEEEE #99FFFF
MOCASÍN #FFE4B5 #FFCCCC
GAINSBORO #DCDCDC #CCCCCC
SOPLIDO MELOCOTÓN #FFDAB9 #FFCCCC
BLANCO NAVAJO #FFDEAD #FFCC99
DORADO ALAMBRE PÁLIDO #EEE8AA #FFFF99
TRIGO #F5DEB3 #FFCCCC
POLVO AZUL #B0E0E6 #CCCCFF
AGUAMARINA #7FFFD4 #66FFCC
GRIS CLARO #D3D3D3 #CCCCCC
ROSA #FFC0CB #FFCCCC
AZUL CLARO #ADD8E6 #99CCFF
CARDO #D8BFD8 #CCCCCC
ROSA CLARO #FFB6C1 #FFCCCC
AZUL CIELO CLARO #87CEFA #99CCFF
VERDE PÁLIDO #98FB98 #99FF99
AZUL ACERO CLARO #B0C4DE #99CCCC
CAQUI #F0D58C #FFCC99
AZUL CIELO #87CEEB #99CCFF
AGUA #00FFFF #00FFFF
CIAN #00FFFF #00FFFF
PLATA #C0C0C0 #CCCCCC
CIRUELA #DDA0DD #CC99CC
GRIS #BEBEBE #CCCCCC
VERDE CLARO #90EE90 #99FF99
VIOLETA #EE82EE #FF99FF
AMARILLO #FFFF00 #FFFF00
TURQUESA #40E0D0 #33CCCC
MADERA FORNIDA #DEB887 #CCCC99
AMARILLO VERDE #ADFF2F #99FF33
BRONCEADO #D2B48C #CCCC99
TURQUESA MEDIO #48D1CC #33CCCC
SALMÓN CLARO #FFA07A #FF9966
AGUAMARINA MEDIO #66CDAA #66CC99
GRIS OSCURO #A9A9A9 #999999
ORQUÍDEA #DA70D6 #CC66CC
VERDE MAR INTENSO #8FBC8F #99CC99
AZUL CIELO INTENSO #00BFFF #00CCFF
MARRÓN ARENA #F4A460 #FF9966
DORADO #FFD700 #FFCC00
VERDE PRIMAVERA MEDIO #00FA9A #00FF99
CAQUI OSCURO #BDB76B #CCCC66
ACIANO AZUL #6495ED #6699FF
ROSA CALIENTE #FF69B4 #FF66CC
SALMÓN OSCURO #E9967A #FF9966
TURQUESA OSCURO #00CED1 #00CCCC
VERDE PRIMAVERA #00FF7F #00FF66
CORAL CLARO #F08080 #FF9999
MARRÓN ROSADO #BC8F8F #CC9999
SALMÓN #FA8072 #FF9966
CHARTREUSE #7FFF00 #66FF00
PÚRPURA MEDIO #9370DB #9966CC
VERDE CÉSPED #7CFC00 #66FF00
AZUL DODGER #1E90FF #3399FF
VERDE AMARILLO #9ACD32 #99CC33
VIOLETA ROJO PÁLIDO #DB7093 #CC6699
AZUL PIZARRA MEDIO #7B68EE #6666FF
ORQUÍDEA MEDIO #BA55D3 #CC66CC
CORAL #FF7F50 #FF6666
AZUL CADETE #5F9EA0 #669999
VERDE MAR CLARO #20B2AA #339999
DORADO ALAMBRE #DAA520 #CC9933
NARANJA #FFA500 #FF9900
GRIS PIZARRA CLARO #778899 #669999
FUCSIA #FF00FF #FF00FF
MAGENTA #FF00FF #FF00FF
VERDE MAR MEDIO #3CB371 #33CC66
PERÚ #CD853F #CC9933
AZUL ACERO #4682B4 #3399CC
AZUL REAL #4169E1 #3366CC
GRIS PIZARRA #708090 #669999
TOMATE #FF6347 #FF6633
NARANJA OSCURO #FF8C00 #FF9900
AZUL PIZARRA #6A5ACD #6666CC
VERDE LIMA #32CD32 #33CC33
LIMA #00FF00 #00FF00
ROJO INDIO #CD5C5C #CC6666
ORQUÍDEA OSCURO #9932CC #9933CC
AZUL VIOLETA #8A2BE2 #9933FF
ROSA INTENSO #FF1493 #FF0099
DORADO ALAMBRE OSCURO #B8860B #CC9900
CHOCOLATE #D2691E #CC6633
CIAN OSCURO #008B8B #009999
GRIS DIFUSO #696969 #666666
GRIS ACEITUNA #6B8E23 #669933
VERDE MAR #2E8B57 #339966
VERDE CERCETA #008080 #009999
VIOLETA OSCURO #9400D3 #9900CC
VIOLETA ROJO MEDIO #C71585 #CC0066
NARANJA ROJO #FF4500 #FF3300
ACEITUNA #808000 #999900
SIENA #A0522D #996633
AZUL PIZARRA OSCURO #483D8B #333399
VERDE ACEITUNA OSCURO #556B2F #666633
VERDE BOSQUE #228B22 #339933
CARMESÍ #DC143C #CC0033
AZUL #0000FF #0000FF
MAGENTA OSCURO #8B008B #990099
GRIS PIZARRA OSCURO #2F4F4F #336666
MARRÓN MONTURA #8B4513 #993300
MARRÓN #A52A2A #993333
LADRILLO REFRACTARIO #B22222 #993333
PÚRPURA #800080 #990099
VERDE #008000 #009900
ROJO #FF0000 #FF0000
AZUL MEDIO #0000CD #0000CC
ÍNDIGO #4B0082 #330099
AZUL MEDIANOCHE #191970 #000066
VERDE OSCURO #006400 #006600
AZUL OSCURO #00008B #000099
AZUL MARINO #000080 #000099
ROJO OSCURO #8B0000 #990000
GRANATE #800000 #990000
NEGRO #000000 #000000

Conversiones RGB y CMYK

No existen fórmulas sencillas para la conversión entre valores RGB o CMYK y L*a*b*, ya que los modelos de color RGB y CMYK dependen del dispositivo. Los valores RGB o CMYK deben ser transformados a un espacio de color absoluto específico, tal como sRGB o RGB de Adobe. Estos espacios serán dependientes del dispositivo, a diferencia de los datos resultantes de la transformación, permitiendo que estos datos sean transformados al espacio de color CIE 1931 y luego en L*a*b*.

Conversiones XYZ a CIE L*a*b* (CIELAB) y viceversa

Transformación directa

\begin{align} L^\star &= 116 f(Y/Y_n) - 16\\ a^\star &= 500 \left[f(X/X_n) - f(Y/Y_n)\right]\\ b^\star &= 200 \left[f(Y/Y_n) - f(Z/Z_n)\right] \end{align}
donde
f(t) = \begin{cases} t^{1/3} & \mbox{para } t > (\frac{6}{29})^3 \\ \frac13 \left( \frac{29}{6} \right)^2 t + \frac{4}{29} & \mbox{para otro valor} \end{cases}
Donde X_n, Y_n y Z_n son los valores triestímulo CIE XYZ del punto de blanco de referencia.
La división de la función f(t) en dos dominios se hace para prevenir una pendiente infinita en t=0. Se asume que la función f(t) sea lineal para un tiempo t=t0 y que coincide con la raíz cúbica de t para t=t0, tanto en valor como en pendiente. En otras palabras, esto se puede expresar como:
\begin{align} t_0^{1/3} &= a t_0 + b & \text{ (coincidencia en valor)}\\ \tfrac13 t_0^{-2/3} &= a & \text{ (coincidencia en pendiente)} \end{align}
El valor de b fue ajustado a 16/116. Las anteriores ecuaciones pueden ser resueltas para a y t0:
\begin{align} a &= \tfrac13\delta^{-2} &= 7.787037\ldots\\ t_0 &= \delta^3 &= 0.008856\ldots \end{align}
donde δ = 6/29. Nótese que 16/116=2\delta/3

Transformación inversa

La transformación inversa es como sigue, con \delta=6/29 como se mencionó antes:
\begin{align} Y &= Y_n f^{-1}\left(\textstyle{\frac{1}{116}}\left(L^*+16\right)\right)\\ X &= X_n f^{-1}\left(\textstyle{\frac{1}{116}}\left(L^*+16\right) + \textstyle{\frac{1}{500}}a^*\right)\\ Z &= Z_n f^{-1}\left(\textstyle{\frac{1}{116}}\left(L^*+16\right) - \textstyle{\frac{1}{200}}b^*\right)\\ \end{align}



























Publicado por en No hay comentarios:
Suscribirse a: Comentarios (Atom)