-->

Menú principal

Mostrando entradas con la etiqueta Diseño web. Mostrar todas las entradas
Mostrando entradas con la etiqueta Diseño web. Mostrar todas las entradas

viernes, 19 de mayo de 2017

TIC-4º ESO Cuestionario Tema 7.- Publicación de páginas web

Cuestionario Tema 7.- Publicación de páginas web


1.-¿Que es una página web?

Las páginas webs son documentos escritos empleando un lenguaje denominado HTML ( Hyper Text Markup Languaje), que significa lenguaje de marcas de hipertextto. HTML es un lenguaje que nos permite dar formato a documentos mediante el uso de etiquetas llamadas tags.

2.-¿Que es un sitio web?

Un sitio web es un conjunto de páginas web enlazadas entre sí, a las que se accede a través de la misma URL.

3.-¿Cuales son los conceptos básicos de la web?

La World Wide Web , Servidor web , Cliente , Navegador web ,  URL ,  TCP/IP , DNS , HTTP, HTML , Etiquetas o tags, Blog .

4.-¿Que es un servidor web?

Es un ordenador remoto que tiene instalados unos programas especiales y que envía documentos que le son requeridos por otro ordenador cliente. Un ejemplo de programa para servidor web es APACHE.

5.-¿Que es una URL?

Se trata de la secuencia de caracteres que sigue un estándar y que permite denominar recursos dentro del entorno de Internet para que puedan ser localizados. Es la dirección de texto que hace que un servidor web envíe un archivo html correspondiente a una página web.


6.-¿Cómo se clasifican las páginas web?

Se clasifican en en dos grupos: estáticas y dinámicas

7.-¿Que es una página web estática?

Son aquellas que no cambian y muestran siempre los mismos contenidos cada vez que se cargan. Se realizan en lenguaje HTML.

8.-¿Que es una página web dinámica?

Son aquellas cuyos contenidos van cambiando en función de las acciones de los usuarios. Se realizan combinado el HTML con lenguajes dinámicos como PHP, Javascript, etc. y el uso de bases de datos donde se guardan diferentes contenidos.

9.-¿Que son los editores de texto sin formato?

En este grupo se incluirían los editores más básicos, que permiten escribir las líneas de código, pero no ofrecen grandes prestaciones adicionales para el diseño web de tu página. Destaca el tradicional bloc de notas.

10.-¿Que son los editores de texto con ventanas?

Este tipo de editores permite, además de desarrollar el código en un área de trabajo determinada, visualizar el resultado en tiempo real.

11.-¿Que son los editores WYSIWYG?

Comprenderían los editores más complejos, en los que el usuario va colocando distintos elementos en una página y el propio software se encarga de generar el documento HTML.

12.-¿Que  son las etiquetas HTML?

Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML.

13.-¿Cuales son las estructuras de una web?

Los sitios web se componen y estructuran de la siguiente manera:
Contenedor , logotipo , navegación , contenido y pie de páginas o footer .

14.-¿Que son los editores de una páginas web?

Los editores de páginas web son aquellas aplicaciones diseñadas especialmente para la creación de documentos electrónicos desarrollados en lenguaje HTML o XHTML.

15.-¿Que tipos de editores de páginas web conoces?

Es posible distinguir entre 3 tipos de editores de páginas web: Editores de texto sin formato , Editores de texto con ventanas , Editores WYSIWYG.

16.-¿Algunos editores de paginas son?

Sublime Test , Notepad , Dreamweaver , NVU y Kompozer

17.-¿Que es Kompozer?

WYSIWYG (What You See Is What You Get = Lo que ves es lo que tienes) de páginas web. Resulta una herramienta de uso fácil, de libre distribución y de uso gratuito basado en el motor de Mozilla.

18.-¿Que es Dreamweaver?

Es uno de los productos estrella de Adobe, Dreamweaver permite trabajar no solo con código en HTML y CSS, sino también entre otros, en lenguajes, como PHP, XML o JavaScript. Como editor WYSIWYG, Dreamweaver permite trabajar en una vista preliminar y que el propio editor genere el código HTML, lo que resulta especialmente atractivo para aquellos que se inician en el diseño web.

19.-¿Que es un Hipervínculo?

Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links.

20.-¿Que tipos de hipervínculos conoces?

Hipervínculo de texto , Hipervínculo de imagen , Hipervínculo local o interno , Hipervínculo externo , Hipervínculo a una dirección de correo electrónico , Referencia absoluta , Referencia relativa (al sitio o al documento) , Referencia a una parte de un documento .


Hecho por : Luis Ureta Marin
curso : 4C

Cuestionario 

Tema 7.- Publicación de páginas web



1.-¿Qué es un sitio web? Explícalo.
-Un sitio web es un conjunto de páginas web enlazadas entre sí, a las que se accede a través de la
misma URL.

2.-Explica 4 conceptos básicos de la web.
-La World Wide Web (WWW): Es un sistema de documentos relacionados entre sí mediante
hipervínculos que permiten su visualización en un ordenador conectado a la red.

-HTTP: El http son las siglas de “Hypertext Transfer Protocol” es un protocolo de transferencia donde se utiliza un sistema mediante el cual se permite la transferencia de información entre diferentes servicios y los clientes que utilizan páginas web.

-Blog: Un blog es un sitio web que se actualiza periódicamente y que ofrece la lectura de información de uno o varios autores sobre temas de interés. La unidad fundamental de información de un blog es el artículo, también llamado “post” o “entrada”.

-URL: es una sigla del idioma inglés correspondiente a Uniform Resource Locator.
Se trata de la secuencia de caracteres que sigue un estándar y que permite denominar recursos dentro del entorno de internet para que puedan ser localizados.

3.-¿Cómo localizamos diferentes sitios en internet?
-Las páginas web pueden estar localizadas en diferentes sitios de Internet, estos sitios son llamados servidores Web. De manera que un documento WWW puede contener enlaces a otros documentos que se encuentran en el mismo servidor Web o en otros servidores Web, logrando así formar una telaraña mundial de información.

4.-¿En qué se clasifican las webs?
-Estáticas: son aquellas que no cambian y muestran siempre los mismos contenidos cada vez que se cargan. Se realizan en lenguaje HTML.
-Dinámicas: Son aquellas cuyos contenidos van cambiando en función de las acciones de los usuarios. Se realizan combinado el HTML con lenguajes dinámicos como PHP, Javascript, etc. y el uso de bases de datos donde se guardan diferentes contenidos.



5.-¿En qué podemos clasificar las webs?
-Personales: como su nombre lo dice, son sitios web donde se expresan las temáticas de una persona o en su defecto la temática de un grupo.

-
Blog: Se le conoce normalmente como bitácoras, donde se publican artículos referentes a un segmento de mercado.

-
Foros: Son sitio web de debate o dialogo, donde se hacen preguntas y entre los miembros se responden.

-
E-commerce: Son los sitios dedicados a la venta de productos y/o servicios, normalmente conocidos como tiendas online.

-
Directorios: Se podría decir que son como catálogos virtuales, que muestran hipervínculos hacia otras páginas web.

-
Institucionales o corporativas: Son los sitios construidos para dar una proyección de marca en particular.


6.-¿Cuál es el lenguaje de HTML?
-Es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje.


7.-Utilización de las etiquetas
-Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual.

El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.


8.-Explica los tipos de estructuras estándares de páginas web
-Contenedor: Elemento que abarca al resto de las parte de la web. Dentro de este contenedor estarán todos los elementos del sitio; módulos, contenidos, imágenes, etc.

-
Logotipo: es la imagen o símbolo identificativo de la empresa, entidad, organización, equipo, etc., que identificará la marca en todo el sitio. Puede ser el logotipo o el nombre. Al estar arriba acompañara la navegación por todo el sitio ayudando al reconocimiento de la marca.

-
Navegación: la forma más aceptada y fácil, es el menú horizontal, que tiene los enlaces a cada una de las partes del sitio web. Los menús verticales pueden usarse como complementos o sub menús, de los horizontales.



-Contenido: lo más importante y fundamental de una buena página. Lo que mantiene al visitante cautivo e interesado. Si el contenido es bueno e interesante, llamará la atención del visitante y hará que permanezca más tiempo en el sitio. El mejor lugar debe ser para los contenidos. Para Google, el contenido es el rey.

-
Pie de página o footer: localizado al final del sitio, abajo, generalmente dejamos ahí información de Copyright y legales o menús secundarios. Aunque en los últimos años, se usa mucho para incluir información de redes sociales, direcciones, noticias.

9.-¿Que son los editores de paginas web?
-Los editores de páginas web son aquellas aplicaciones diseñadas especialmente para la creación de documentos electrónicos desarrollados en lenguaje HTML o XHTML.

10.-Di que tres tipos de editores de páginas web hay:
Editores de texto sin formato: En este grupo se incluirían los editores más básicos, que permiten escribir las líneas de código, pero no ofrecen grandes prestaciones adicionales para el diseño web de tu página. Destaca el tradicional bloc de notas.
Editores de texto con ventanas: Este tipo de editores permite, además de desarrollar el código en un área de trabajo determinada, visualizar el resultado en tiempo real.
Editores WYSIWYG:Comprenderían los editores más complejos, en los que el usuario va colocando distintos elementos en una página y el propio software se encarga de generar el documento HTML.


11.-Algunos editores de páginas web son:
Sublime, Test, Notepad, Dreamweaver, NVU, Kompozer

12.- Nombra los tipos de editores de páginas web.
Sublime Test, Notepad, Dreamweaver, NVU, Kompozer.

13.-¿Qué es un hipervínculo?
Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer clic sobre él. También se conocen como hiperenlaces, enlaces o links.

14.- Nombra los ocho tipos de hipervínculos.
Hipervínculo de texto, hipervínculo de imagen, hipervínculo local o interno, hipervínculo externo, hipervínculo a una dirección de correo electrónico, referencia absoluta, referencia relativa (al sitio o al documento), referencia a una parte de un documento

15.-¿Que debe contener una página web?
Un sitio web debe ser una combinación de múltiples elementos, entre ellos texto, imágenes, vídeos, animaciones, applets, esquemas, gráficos, etc. Todos ellos han de estar organizados de forma eficiente, de tal manera que den gran vistosidad al sitio web y permitan una navegación fácil y rápida.


16.-Explica como es el contenido de una página web.
Una página web debe ser atractiva… Pero no solo a la vista, sino también en el contenido. Eso significa que debe tener contenido interesante que atraiga (y atrape) al público objetivo. De hecho, ninguna página puede considerarse exitosa si no cuenta con un contenido atractivo y actualizado con cierta frecuencia. Eso servirá no solo para aumentar el número de nuevas visitas, sino para que los antiguos visitantes consulten la página a menudo y la usen como referencia.

17.-¿Cómo es la tipografía de una página web?
Es importante usar fuentes llamativas pero sencillas de leer. También es importante variar el tamaño de una misma fuente para resaltar secciones interesantes del contenido y del texto. Blogger permite seleccionar el tipo de letra seleccionando entre los diferentes estilos: Encabezado, subencabezado, encabezado secundario y normal. Cada estilo destaca el texto en función de su importancia en el blog.

18.-Habla de la imágenes y animaciones de una página web.
Para generar una sensación de dinamismo es bueno utilizar elementos animados.
Pero atención: no abuses de ellos, ya que pueden sobrecargar la página.
Lo ideal es que no sobrepasen el 20% del total de la página ya que de otra forma pueden causar saturación, distraer la atención de cosas importantes que se quieren decir y por último sacar al usuario del sitio. Podemos usar imágenes animadas procedentes de Internet o realizar nuestras propias animaciones con programas que realizan ésta función, entre ellos Gimp, Photoshop, Gifcam, MakeGif, etc.

19.-¿Para que sirven los botones e iconos en una página web?
Utilizar botones prácticos y representativos, así como iconos grandes y vistosos aumenta la facilidad de navegación en la página. Pero no es necesario colocar accesorios que no brinden un valor real, por ejemplo un reloj para clientes que se encuentran en el mismo uso horario.

20.-¿Por qué son mejores los fondos claros y sencillos?
Porque los fondos claros o totalmente blancos facilitan la visualización, pero también dan un aspecto despejado a la página resaltando las imágenes. Existe la tendencia a utilizar fondos negros para lecturas largas, para no cansar al lector con la luz del monitor.

Realizado por: Marina y Lorena (4º ESO)
 

martes, 18 de abril de 2017

Creación y diseño de un blog en Blogger de Google

1.- CREACIÓN DEL BLOG EN LA WEB DE BLOGGER

Para crear un blog entramos en la web de blogger y creamos un blog nuevo introducciendo nuestra dirección de gmail y contraseña.


Al introducir nuestro usuario y clave accedemos a la página principal de edición de nuestro blog


2.- CREACIÓN Y CARGA DEL LOGO DE NUESTRO BLOG

Lo primero que tenemos que hacer es crear el logotipo de nuestro blog. Para ello usamos un programa de diseño gráfico como GIMP, Paint, Inkscape, KolourPaint, IrfanView, etc.


Una vez que tenemos creado nuestro logotipo tenemos que cargarlo en nuestro blog. Para ello entramos en Diseño y editamos la cabecera, pulsando en el botón editar de la cabecera:


Al pulsar en editar cabecera, nos aparece una nueva ventana donde debemos seleccionar una imagen de nuestro equipo, pulsando en el botón "Seleccionar archivo".


Una vez seleccionada la imagen podemos, ponerla en lugar del título y descripción o poner la descripción después de la imagen.

3.- CREACIÓN DE UN MENÚ DESPLEGABLE DEBAJO DE LA CABECERA DEL BLOG

Para crear  un menú desplegable debemos seguir varios pasos. Lo primero es tener definidos cada uno de los items del menú y sus respectivos items al desplegar.

La creación del menú se realiza en varios pasos, por lo que no es un proceso fácil, sino que debemos hacerlo con atención y siguiendo cada uno de los pasos. Vamos a utilizar el siguiente enlace para seguir las instrucciones:

https://www.euroresidentes.com/tecnologia/trucos-diseno-web/tutorial-menu-desplegable-para-blogger


Paso 1: Copia el código que te indica en el enlace, es un código de ejemplo. Después modificas las entradas del menú y los submenus con los textos que deseas que te aparezcan en cada uno de los menús desplegables, tal como he hecho con el menú de este blog, que se puede obsevar en la imagen:


Entra en el menú diseño y elige Multicolumnas, pulsa editar y elige HTML/javascript. Pega el código y guarda los cambios.




Paso 2: 
Una  vez pegado el texto tienes que modificarlo para configurar tu menú en la forma que tu quieras, para ello hay 3 elementos que tienes que tener en cuenta:
La estructura del menú:

  • Botón sencillo (sin submenús): el botón sencillo corresponde con este trozo de código:
  • Menu normal
  • Botón con submenú: el botón con submenú corresponde con este trozo de código:

    Los elementos del menú:

     




    viernes, 18 de noviembre de 2016

    TIC 4º ESO Cuestionario Tema 3.- Tratamiento de la imagen digital

    CUESTIONARIO TEMA 3.- TRATAMIENTO DE IMÁGENES.

    Realiza el examen tipo test del tema y comprueba tus respuestas y tu puntuación. Para realizar este test debes indicar tu nombre y apellidos, el centro, el curso, tu email y la fecha en la que realizas el test. Ten en cuenta que solo podrás realizar el examen una vez. Suerte.



    1.- ¿ Qué es la imagen digital ?

    Es un tipo de imagen que puede ser  manipulada mediante un equipo informático.


    2.- ¿ Qué características tiene la imagen digital ?

      -Se obtienen a través de una fuente digital como una cámara fotográfica, un escáner, un móvil, Internet...
    -Se pueden mostrar en una pantalla.
    -Se pueden procesar con ayuda de un software específico.
    -Se pueden guardar en cualquier dispositivo de almacenamiento como memorias USB, tarjetas de memoria, discos duros, CD, DVD...
    -Se pueden imprimir con impresoras o en estudios fotográficos especializados.

    3.-¿Qué es el píxel?

    El píxel es la unidad mínima de visualización de una imagen digital. También son las unidades de color que componen la imagen.

    4.- ¿ Cómo capturan la imagen los píxeles ?

    Las cámaras digitales y los escáneres capturan las imágenes en forma de cuadrícula de píxeles.

    5.-¿Cómo se obtienen imágenes digitales?

    Mediante dispositivos periféricos de captura de imágenes, entre ellas mediante un escáner, una cámara de vídeo o fotográfica digital, un móvil, tarjetas de vídeo y tv, internet, etc.

    6.-¿Cuáles son  las características de las imágenes digitales?

    Color Real
    Modos de Color
    Resolución de la imagen
    Resolución de pantalla

    7.-¿Qué es el color real?

    Cada  Píxel  solamente  puede  ser  de  un  color,  cuando decimos  que  una  imagen  es  de  256 colores, queremos decir que cada píxel puede tomar uno de esos 256 colores.

    8.-¿A qué llamamos modo de color?

    Al sistema de coordenadas que nos sirve para describir los colores de forma numérica.

    Modo de color. Es el contenedor donde colocamos la información sobre cada píxel de una imagen. Así, podemos guardar una cantidad pequeña de datos de color en un contenedor muy grande, pero no podremos almacenar una gran cantidad de datos de color en un contenedor muy pequeño. Mas...

    9.-¿Cuáles son los principales modos de color?

    CMYK, HLS, RGB.



    10.-¿Qué es la resolución de la imagen ?

    Es el grado de detalle o calidad de una imagen digital ya sea escaneada, fotografiada o impresa.

    11.-¿En qué valor se expresa?

    Este valor se expresa en ppp (píxeles por pulgada).

    12.-¿A qué se refiere la resolución de un monitor?

    Se refiere al número de píxeles por pulgada que es capaz de mostrar.

    13.-¿En qué aparatos electrónicos se puede utilizar la resolución de la imagen?

    Impresoras
    Escáneres
    Las cámaras digitales prestan una calidad que se expresa en MegaPíxels.

    14.¿Qué es la resolución de pantalla?

    Es el número de píxeles que puede ser mostrado en la pantalla

    15.¿Qué conceptos tiene la resolución de la pantalla?

    Tamaño de la imagen.
    Resolución de la imagen.
    Tamaño del archivo de la imagen.


    16.-¿Cuáles son los formatos de la imagen digital?

    BMP, GIF, JPG, TIF y PNG.

    17.-¿Qué es el GIF ?

    Ha sido diseñado específicamente para comprimir imágenes digitales.

    18.-¿Qué es el BMP?

    La imagen se forma mediante una parrilla de píxeles.

    19.-¿Qué programas de tratamiento de imágenes hay en Linux?

    -GIMP
    -Kolourpaint
    -Shotwell
    -MyPaint

    20.-¿Qué es el GIMP?

    Es un programa de manipulación de imágenes que permite retoques fotográficos, y la composición y creación de imágenes propias.


    Realizado por : Rubén Espinosa y Alejandra Guerrero
    Curso : 4ºB

    CUESTIONARIO 


    Tema 3. Tratamiento de la imagen digital


    1. ¿Qué es la imagen digital?

    Una imagen digital es, básicamente, un tipo de imagen que puede ser manipulada mediante un equipo informático.

    2. ¿Qué características tienen la imagen digital?

    - Se obtienen a través de una fuente digital como una cámara fotográfica, un escáner, un móvil, Internet…
    - Se pueden mostrar en una pantalla.
    - Se pueden procesar con ayuda de un software específico.
    - Se pueden guardar en cualquier dispositivo de almacenamiento como memorias
    USB, tarjetas de memoria, discos duros, CD, DVD…
    - Se pueden imprimir con impresoras o en estudios fotográficos especializados.

    3. ¿Qué es un pixel?

    Las imágenes digitales se crean formando una retícula rectangular formada por celdillas, cada una de las celdillas recibe el nombre de píxel.

    4. ¿Cómo obtener la imagen digital mediante una cámara digital?

    Las cámaras digitales tienen una forma de funcionamiento muy parecida a las cámaras
    analógicas, la diferencia radica en el almacenamiento de la luz que entra por la lente.

    5. ¿Qué tipos de cámaras digitales hay?

    - Compactas
    - Reflex
    - Bridge
    - Evil o Microless

    6. ¿Cuales son las características de las cámaras digitales?

    - Resolución (Mpx)
    - Zoom analógico (nx)
    - Tamaño de la pantalla
    - Alimentación
    - Sensibilidad (ISO)

    7. ¿En qué consisten los modos de color?

    Llamamos modo de color al sistema de coordenadas que nos sirve para describir los colores de forma numérica.

    8. ¿En qué consiste la resolución de la imagen?

    En una impresión, la resolución viene dada por el nº de puntos impresos por unidad de superficie. Mientras que en una imagen digital, la resolución depende del nº de píxeles por unidad de longitud.

    9. ¿Cuánto mide una pulgada?

    Mide: 2,45cm.

    10. ¿Cómo se mide la resolución de pantalla?

    Es habitual medir la resolución de una pantalla por el nº total de píxeles que abarca, pudiendo encontrar diferentes resoluciones de pantalla atendiendo al nº de columnas y finas de píxeles: 640x480, 800x600, 1.024x768; siendo las más habituales las dos últimas.

    11. ¿Qué conceptos hay en la resolución de la pantalla?

    - Tamaño de la imagen.
    - Resolución de la imagen.
    - Tamaño del archivo de la imagen.

    12. ¿Qué dos tipos de imágenes se tratan en el ordenador?

    Se pueden tratar las imágenes vectoriales y bitmap.


    13. ¿Qué formatos hay de bitmap?

    - BMP - GIF
    - TIFF o TIF - PNG
    - XCF - JPG
    - PICT
    14. ¿Qué formatos hay de vectoriales?

    - SVG - CDR
    - WMF - DWG
    - SWF - ODG, SXD
    - DXF

    15. ¿Qué programas se utilizan para aplicaciones de dibujo artístico?

    - Corel DRAW
    - FreeHand
    - Inkscape
    - Illustrator

    16. ¿Y para aplicaciones de dibujo técnico 2D y 3D?

    - Autocad
    - AutoSketch
    - CAD
    - CATIA

    17. ¿Tipos de imágenes que se hacen con el programa GIMP?

    Son las imágenes mapa de bits.

    18. ¿Con qué programas se puede hacer las imágenes vectoriales?

    - Corel DRAW
    - FreeHand
    - Inkscape
    - Illustrator
    - Autocad
    - AutoSketch
    - CAD
    - CATIA

    19. ¿Qué programa utilizamos en esta unidad?

    En esta unidad utilizaremos GIMP como programa de retoque fotográfico, que es el acrónimo de GNU Image Manipulation Program “Programa de manipulación de imágenes GNU”.

    20. ¿Para qué plataforma fue desarrollada GIMP? ¿Y ahora cual puede utilizar el programa?

    Aunque las primeras versione de GIMP fueron desarrolladas parlas plataformas de
    LINUX, en estos momentos se puede utilizar este programa en sistemas operativos
    como Windows y Mac OSX.



    Hecho por: Vanesa López Aparicio y Carla Sánchez Ruiz 4ºA


    Ejercicios:

    1.- Si una imagen tiene una anchura de 20 pulgadas y una altura de 50 pulgadas, calcula el nº de pixeles de la imagen sabiendo que ha sido escaneada a 300 ppp. (puntos por pulgada).

    20 x 300 = 6000 pixeles
    50 x 300 = 15000 pixeles   6000 x 15000 = 90.000.000 pixeles

    Si queremos pasar a cm el tamaño de la imagen debemos saber que 1 pulgada = 2,54 cm, por tanto

    20 pulgadas x 2,45 cm/pulgada = 50,8 cm
    50 pulgadas x 2,54 cm/pulgada = 127 cm

    2.- Calcular el tamaño en cm para impresión de una imagen escaneada a 100 ppp que tiene 450 pixeles de ancho por 600 pixeles de alto.

     Podemos hacer el cálculo aplicando la siguiente formula:

    * Tamaño de impresión= Número de píxeles/ Resolución (PPI píxeles por pulgada)

    450/100 = 4,5 pulgadas x 2,54 cm/pulgada = 11,43 cm
    600/100 =    6 pulgadas x 2,54 cm/pulgada = 15,24 cm 

     3.- Calcular el ancho en cm de una imagen que tiene 972.000 pixeles y una altura de 10 pulgadas, sabiendo que tiene una resolución de 180 ppp.

    Conocemos la altura de la imagen en pulgadas y tenemos que calcular la anchura de la imagen, procedemos

    10 pulgadas x 180 ppp = 1800 pixeles de altura, ahora calculamos el número de pixeles para el ancho:

    972.000 / 1800 = 540 pixeles de anchura, ahora lo pasamos a pulgadas  540/180 = 3 pulgadas

    Ahora pasamos las pulgadas a cm multiplicando por 2,54 y obtenemos:

    10 x 2,54 = 25,4 cm de alto

    3 x 2,54 = 7,62 cm de ancho

     

    viernes, 22 de abril de 2016

    Como crear un menú desplegable en tu Blog

    Para ello tenemos que añadir un nuevo gadget HTML/Javascript en la cabecera estando en Diseño del Blog.


    Entramos en el modo de edición pulsando el botón editar de gadget:


    Aquí insertamos el código para el nuevo menú de nuestro blog que tendrá este aspecto:

    <div id='NavMenu'>
    <div id='NavMenuleft'>
    <ul id='nav'>
    <li><a href='search/label/Presentación'>Inicio</a></li>
    <li><a href='search/label/ESO'>ESO</a>
    <ul>
     <li><a href='search/label/Tecnología_1ºESO'>1º ESO</a></li>
     <li><a href='search/label/Tecnología_2ºESO'>2º ESO</a>
     <ul>
      <li><a href='search/label/Contenidos_Tecnología_2ºESO'>Contenidos 2ºESO</a></li>
      <li><a href='search/label/Tema01_2ºESO'>Tema01-El proyecto técnico</a></li>
      <li><a href='search/label/Tema02_2ºESO'>Tema02-Dibujo</a></li>
      <li><a href='search/label/Tema03_2ºESO'>Tema03-Materiales y madera</a></li>
      <li><a href='search/label/Tema04_2ºESO'>Tema04-Los metales</a></li>
      <li><a href='search/label/TEC-2ºESO_Tema5'>Tema05-Estructuras</a></li>
      <li><a href='search/label/TEC-2ºESO_Tema6'>Tema06-Electricidad</a></li>
     </ul>
     <li><a href='search/label/Tecnología_3ºESO'>3º ESO</a></li>
     <li><a href='search/label/Tecnología_4ºESO'>4º ESO</a>
     <ul>
      <li><a href='search/label/Contenidos_Tecnología_4ºESO'>Contenidos 4ºESO</a></li>
      <li><a href='search/label/Tema01_4ºESO'>Tema01-Electrónica</a></li>
      <li><a href='search/label/Tema02_4ºESO'>Tema02-Electrónica digital</a></li>
      <li><a href='search/label/Tema03_4ºESO'>Tema03-Tecnología de la comunicación</a></li>
      <li><a href='search/label/Tema04_4ºESO'>Tema04-Control y robótica</a></li>
      <li><a href='search/label/Tema05_4ºESO'>Tema05-Control por ordenador</a></li>
      <li><a href='search/label/TEC-4ºESO_Tema06'>Tema06-Neumática e hidráulica</a></li>
     </ul>
    </li></li></ul>
    </li>
    <li><a href='search/label/Bachillerato'>Bachillerato</a>
    <ul>
    <li><a href='1ºBachillerato'>1º Bachillerato</a></li>
    <li><a href='2ºBachillerato'>2º Bachillerato</a></li>
    <li><a href='Proyectointegrado'>Proyecto Integrado</a></li>
    <li><a href='Selectividad'>Selectividad</a></li>
    </ul>
    </li>
    <li><a href='search/label/Tecnología'>Tecnología</a>
    <ul>
    <li><a href='search/label/Mecánica'>Mecánica</a></li>
    <li><a href='search/label/Estructuras'>Estructuras</a></li>
    <li><a href='search/label/Electricidad'>Electricidad</a></li>
    <li><a href='search/label/Electrónica'>Electrónica</a></li>
    <li><a href='search/label/Neumática'>Neumática</a></li>
    <li><a href='search/label/Hidráulica'>Hidráulica</a></li>
    <li><a href='search/label/Informática'>Informática</a></li>
    <li><a href='search/label/Proyectos'>Proyectos</a></li>
    </ul>
    </li>
    <li><a href='search/label/Física y Química'>Física y Química</a>
    <ul>
    <li><a href='search/label/Física y Química 4º ESO'>Física y Química 4ºESO</a>
    <ul>
    <li><a href='search/label/Contenidos_FyQ_4ºESO'>Contenidos FyQ 4ºESO</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema01'>Tema01-Estudio del movimiento</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema02'>Tema02-Interacciones entre los cuerpos</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema03'>Tema03-Movimiento circular uniforme y gravitación</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema04'>Tema04-Fuerzas en los fluidos</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema05'>Tema05-Trabajo y energía mecánica</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema06'>Tema06-CALOR Y ENERGÍA TÉRMICA</a></li>
    <li><a href='search/label/FyQ-4ºESO_Tema07'>Tema07-EL ENLACE QUÍMICO</a></li>
    </ul>
    <li><a href='search/label/Estática'>Estática</a></li>
    <li><a href='search/label/Dinámica'>Dinámica</a></li>
    <li><a href='search/label/Gravedad'>Gravedad</a></li>
    <li><a href='search/label/Hidráulica'>Hidráulica</a></li>
    <li><a href='search/label/Cinemática'>Cinemática</a></li>
    </li></ul>
    </li>
    <li><a href='search/label/Varios'>Varios</a>
    <ul>
    <li><a href='search/label/CAD'>CAD</a></li>
    <li><a href='search/label/Dibujo'>Dibujo</a></li>
    <li><a href='search/label/Simuladores'>Simuladores</a></li>
    <li><a href='search/label/Robótica'>Robótica</a></li>
    <li><a href='search/label/Informática'>Informática</a></li>
    <li><a href='search/label/Examenes'>Examenes</a></li>
    <li><a href='search/label/Mapas mentales'>Mapas mentales</a></li>
    </ul>
    </li>
    <li><a href='search/label/Galería'>Galeria</a>
    <ul>
    <li><a href='search/label/Imágenes'>Imágenes</a></li>
    <li><a href='search/label/Vídeos'>Vídeos</a></li>
    <li><a href='search/label/Libros'>Libros</a></li>
    <li><a href='search/label/Mapas'>Mapas</a></li>
    <li><a href='search/label/Planos'>Planos</a></li>
    <li><a href='search/label/Esquemas'>Esquemas</a></li>
    <li><a href='search/label/Fotos'>Fotos</a></li>

    </ul></li>
    <li><a href='search/label/Sobre mi'>Sobre mi</a>
     <ul>
      <li><a href='search/label/Trabajos'>Trabajos</a>
      <li><a href='search/label/Publicaciones'>Publicaciones</a>
       <ul>
        <li><a href='search/label/Máster Secundaria'>Trabajo Fin de Máster</a></li>
        <li><a href='search/label/Proyecto Fin de Carrera'>Proyecto Fin de Carrera</a></li>
        <li><a href='http://fdiazuceda.blogspot.com.es/2016/04/de-ciencia-tecnologia-la-interfase.html'>De Ciencia a Tecnología</a></li>

       </ul>
      <li><a href='search/label/Vídeos'>Vídeos</a></li>
      <li><a href='search/label/Libros'>Libros</a></li>
      <li><a href='search/label/Conferencias'>Conferencias</a></li>
      <li><a href='search/label/Presentaciones'>Presentaciones</a></li>
      <li><a href='search/label/Esquemas'>Esquemas</a></li>
      <li><a href='search/label/Fotos'>Fotos</a></li>
     </li></li></ul>

    <li><a href='search/label/Contacto'>Contacto</a>
    </li>
    </li></ul></div>
    </div>

    Una vez introducido el código HTML de nuestro menú, guardamos y ahora tenemos que hacer otra cosa importante para que funciones correctamente este código.

    Entramos en el modo de plantilla y pulsamos el botón personalizar:




    Una vez que nos aparece el menú seleccionamos la opción "Avanzadas" y luego "Anadir CCS"


    y en el cuadro de texto tenemos que introducir el siguiente código:

    /* Menu desplegable
    ----------------------------------------------- */
    .tabs-inner .section:first-child ul { margin-top: 0px;}
    .tabs-inner .widget ul { background: #ffffff; text-align: center !important;}

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/
    background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/
    text-decoration: none;
    }
    .tabs .widget li, .tabs .widget li{ display: inline; float: none;}

    #NavMenu {
    position: relative;
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid #333333; /*Borde superior del menú, si no queremos borramos la línea*/
    border-bottom: 1px solid #333333; /*Borde inferior del menú, si no queremos borramos la línea*/
    background: #333333; /*Color de fondo del menú, si no queremos borramos la línea*/
    }
    #NavMenuleft {
    width: 930px; /*Ancho del menú*/
    float: none;
    margin: 0 auto;
    padding: 0;
    }
    #nav {margin: 0 auto; padding: 0; background:transparent;}

    #nav ul {
    float: none;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    font: normal normal 14px Arial; /*Tamaño y tipografías de las pestañas */
    color: #FFFF00; /*Color del texto de las pestañas*/
    display: block;
    margin: 0;
    padding: 10px 15px 10px;
    }
    #nav li a:hover, #nav li a:active {
    color: #0033FF ; /*Color del texto de las pestañas al pasar el ratón por encima*/
    margin: 0;
    padding: 10px 15px 10px;
    text-decoration: none;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
    background: #000000; /*Color del fondo de las subpestañas*/
    width: 150px; /*Tamaño de éstas*/
    color: #FFFF00; /*Color del texto de las subpestañas*/
    float: none;
    margin: 0;
    padding: 7px 10px;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #FF9900; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
    color: #222222; /*Color del texto de las subpestañas al pasar el ratón por encima*/
    padding: 7px 10px;
    }
    #nav li {
    float: none;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
    #nav li ul a { width: 140px; }
    #nav li ul ul { margin: -32px 0 0 171px; }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
    #nav li:hover, #nav li.sfhover {position: static;}
    .tabs-outer{overflow: visible;}
    .tabs-inner { padding: 0px; } .section { margin: 0px; }

    --------------------------------------------------------------------------------------------------------------------------

    Este código lo podemos personalizar para cambiar el aspecto de los menús desplegables.

    Espero que os haya servido.