DIA CIENTO SETENTA Y UNO 27/02/2015

Ya se acaba febrero, parece mentira cuando ayer casi era navidad. Hoy seguimos con teoría tanto en diseño gráfico como en programación ,a parte, en diseño presentamos los distintos fotomontajes.

DOM

¿Qué es?

El DOM es una interfaz de programación de aplicaciones para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos con lenguajes como ECMAScript (JavaScript).

Desarrollo del DOM

La primera vez que el DOM se utilizó, fue con el navegador Netscape Navigator en su versión 2.0. Este DOM se conoce también como «modelo básico», o «DOM nivel 0». Internet Explorer 3.0 fue el primer navegador de Microsoft que utilizó este nivel. Netscape 3.0 empezó a utilizar rollovers. Microsoft empezó a usar rolloversen Internet Explorer 4.0. Netscape 4.0 agregó la capacidad de detectar eventos ocurridos en el ratón y el teclado. Una característica de este navegador fue el uso de capas. Sin embargo, esta capacidad se ha eliminado en los navegadores creados posteriormente.

En Internet Explorer 4.0 todos los elementos de una página web se empezaron a considerar objetos computacionales con la capacidad de ser modificados. Debido a las diferencias en estos navegadores, el World Wide Web Consortium emitió una especificación denominada «DOM nivel 1» en el mes de octubre de 1998 en la cual se consideraron las características y manipulación de todos los elementos existentes en los archivos HTML y XML. En noviembre del año 2000 se emitió la especificación del «DOM nivel 2». En esta especificación se incluyó la manipulación de eventos en el navegador, la capacidad de interacción con CSS, y la manipulación de partes del texto en las páginas de la web. «DOM nivel 3» se emitió en abril de 2004; utiliza la definición de tipo de documento (DTD) y la validación de documentos.

¿En qué consiste?

Antes de poder utilizar sus funciones, DOM transforma internamente el archivo XML original en una estructura más fácil de manejar formada por una jerarquía de nodos. De esta forma, DOM transforma el código XML en una serie de nodos interconectados en forma de árbol.

El árbol generado no sólo representa los contenidos del archivo original (mediante los nodos del árbol) sino que también representa sus relaciones (mediante las ramas del árbol que conectan los nodos).

Aunque en ocasiones DOM se asocia con la programación web y con JavaScript, la API de DOM es independiente de cualquier lenguaje de programación. De hecho, DOM está disponible en la mayoría de lenguajes de programación comúnmente empleados.

Jerarquía

En el DOM, los documentos tienen una estructura lógica que es muy parecida a un árbol. Para ser más precisos, es más bien como un "bosque" o una "arboleda", que puede contener más de un árbol. 

El DOM identifica:

• las interfaces y objetos usados para representar y manipular un documento

• la semántica de estas interfaces y objetos, incluyendo comportamiento y atributos

• las relaciones y colaboraciones entre estas interfaces y objetos

DIA CIENTO SETENTA 26/02/2015

Hoy proseguimos con teoría tanto en programación como en diseño, mañana además tendremos que presentar en diseño el fotomontaje. A parte de esto, hicimos una pequeña excursión en el descanso a la exposición de La Residencia

MI REVISION DE CSS

Procederé ahora a explicar qué factores tengo en cuenta para validar un CSS:

• Enlace correcto en el head

El enlace debe estar correctamente colocado y redactado para poder funcionar el CSS, a parte, el archivo deberá estar en la ruta indicada o, como mínimo, en la misma carpeta y con el nombre exacto.

• Llaves abiertas y cerradas

Para que cada elemento sea funcional, deberán estar sus llaves colocadas de manera adecuada y abiertas y cerradas donde sea preciso, de olvidar alguna no funcionará

• Punto y coma tras cada declaración

Cada elemento (class id etc) contiene entre sus llaves distintas declaraciones, cada una de ellas deberá terminarse con punto y coma, o no tendrán efecto y las sucesivas tampoco

• La class va con punto, el id con almohadilla

Al introducir las distintas class e ids para establecer sus características, éstas deberán estar precedidas cada una de su signo correspondiente o no funcionarán.
En el caso de la class, siempre va precedida por un punto y el id será precedido por una almohadilla

• Nombres exactos

Los nombres que asignemos a los ids y a las class, deberán ser exactamente iguales que aquellos que hayamos colocado en las etiquetas, si no, sus características no se aplicarán.

• Los id no se pueden repetir, las class si

Las etiquetas pueden tener varias la misma class o incluso una misma etiqueta podrá tener más de una class, pero nunca los id en ninguno de los dos casos

• Que los elementos no se superpongan ni tengan valores negativos

Hay que asegurarse que lso divs imágenes etc no tengan un top, left, etc con valores negativos, ni que ningún elemento se superponga

• Ante cualquier duda, pasar el archivo por un validador de CSS

Siempre que se escape a nuestra vista algún fallo, siempre podemos recurrir a un validador para que nos identifique cuál es y su localización

HERRAMIENTA UTIL PARA PROGRAMADORES (FIREBUG)

Al margen de soluciones manuales y técnicas más o menos ingeniosas, los diseñadores web profesionales de hoy en día utilizan herramientas avanzadas para averiguar con precisión la causa de los errores de diseño. De todas las herramientas disponibles, la mejor con mucha diferencia es Firebug, una extensión del navegador Firefox.

Firebug dispone de todas las utilidades que necesitan los diseñadores y programadores web en su trabajo. Es una herramienta gratuita, completa, fácil de utilizar y para la que se publican nuevas versiones de forma continua.

Después de instalarlo, en la esquina inferior derecha del navegador Firefox aparece un nuevo icono. Para acceder a Firebug, se puede pinchar con el ratón sobre ese icono o se puede pulsar directamente la tecla F12 después de cargar la página que se quiere depurar.

Firebug muestra su información dividida en los siguientes paneles: * Consola: muestra mensajes de error, notificaciones y otros tipos de mensajes. No es muy útil para los diseñadores web. * HTML: muestra el código HTML de la página y permite seleccionar los elementos, modificar sus contenidos y ver las reglas CSS que se le están aplicando. * CSS: muestra todas las hojas de estilos incluidas en la página y permite modificar sus valores. * Guión y DOM: paneles relacionados con la programación JavaScript. No son muy útiles para los diseñadores web. * Red: muestra toda la información de todos los elementos descargados por la página (HTML, JavaScript, CSS, imágenes).

Para ejemplificar alguno de sus posibles usos, incorporaré a continuación distintas imágenes y explicaré lo ocurrido en ellas.

Aquí tenemos la página original, sin modificaciones, entonces, pulsamos F12 y modificamos el elemento que deseemos en el código HTML

Y éste es el resultado

Por supuesto ésto no cambiará para nada ninguno de los elementos que se encuentran en el servidor, por lo tanto, estos cambios sólo los veremos nosotros hasta que actualicemos o recarguemos la página, momento en el cuál veremos de nuevo la página original, sin modificaciones.

DIA CIENTO SESENTA Y NUEVE 25/02/2015

Hoy seguimos con teoría en diseño gráfico, en este caso el neoplasticismo, tras esto, tuvimos tiempo de seguir con el fotomontaje.
En programación continuamos con los ejercicios, la teoría y subiendo todo al blog.
Por otra parte, Northink ya tiene el trabajo fechado y estructurado, quedando pendiente para completar un organigrama para que esté todo más claro antes de proseguir con nuestra labor.

ESPECIFICACION DOCTYPE EN HTML5 Y ANTERIORES Y ETIQUETA BASE

¿Qué es el Doctype?

Cuando escribimos nuestro documento HTML, lo primero que tenemos que escribir es el doctype. El doctype es la declaración de tipo de documento. En otras palabras, el doctype nos sirve para indicar que nuestro documento está escrito siguiendo la estructura determinada por un DTD concreto.

Sintaxis

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>...</head>
<body>...</body>
</html>

• DOCTYPE:

      Indicamos que estamos ante la declaración del DOCTYPE

• Elemento de primer nivel: 

      Tenemos que escribir el elemento de nivel superior declarado en el DTD. En nuestro           caso es html

• Disponibilidad: 

     Indicamos la disponibilidad del identificador. En nuestro caso tenemos PUBLIC porque        se utilizará un identificador público, aunque también existe SYSTEM (cuando se utiliza        un identificador de sistema) o URL (cuando el identificador es local o URL).

• +/- 

     Según la organización se utilizará + o -, en el caso de la W3C se utiliza -

• Organización:

     La organización que ha creado el DTD que vamos a utilizar. En nuestro caso es la W3C

• Tipo:

     El tipo de documento que estamos incluyendo, o sea, DTD.

• Nombre: 

     El nombre del DTD. En nuestro ejemplo HTML 4.01

• Idioma: 

      El idioma en el que está escrito el DTD, normalmente es EN (inglés)

• URL: 

     La URL del DTD. Si accedemos a http://www.w3.org/TR/html4/strict.dtd nos      descargaremos el fichero strict.dtd que podremos abrir con cualquier editor de texto. En él se define la estructura de marcado del documento

La W3C tiene definidos un gran número de DTD, que son resumidos en su listado de declaraciones de doctype

¿Qué es el dtd?

El DTD es dónde se define la estructura que debe tener el documento y utilizamos el doctype para informar qué DTD usamos.

Declaraciones existentes de Doctype

Esta es la página oficial en la que podemos encontrar las distintas declaraciones existentes del Doctype

http://www.w3.org/QA/2002/04/valid-dtd-list.html

En versiones anteriores del HTML se basaba el lenguaje en SGML, por lo que había que especificar el DTD, pero en HTML5 no se basan en SGML, por lo que no hay necesidad de especificar el DTD y por tanto con un único DOCTYPE es suficiente.

¿Qué es la etiqueta <base>?

La etiqueta <base> especifica la base URL  para todas las direcciones URL relativas en un documento. Es decir, especifica una dirección URL para los archivos que aparecerán en la página.

No puede haber más de un elemento <base> en un documento, y debe estar dentro del elemento <head>.

Ejemplo

<head>

<base href="http://www.w3schools.com/images/" target="_blank"></head>
<body><img src="stickman.gif" width="24" height="39" alt="Stickman"><a href="http://www.w3schools.com">W3Schools</a></body>

DIA CIENTO SESENTA Y OCHO 24/02/2015

Hoy seguimos con la teoría y ejercicios en programación, a parte de ésto, tenemos que subir al blog nuestro método de verificación de código.
Subí además al blog los ejercicios sobre efectos de JS con sus capturas de pantalla.
En diseño seguimos con teoría, esta vez el dadaísmo, mostramos nuestros caligramas futuristas y tenemos el nuevo trabajo de hacer un fotomontaje dadaísta con obligado un tema transgresor (religión, política, sexo) incluyendo texto en la composición.

EFECTOS JS

Realizamos unos cuantos ejercicios sobre varios efectos de JavaScript, trabajando directamente en una plantilla que escogimos cada uno libremente. Éste fue mi trabajo:

Visualización

Index

Lettering con letras animadas cuando pasas el cursor 

Botón para subir arriba con mediaquery

Botón que abre una ventana con un vídeo de youtube modificado

Página responsive, el lettering desaparece al llegar a cierta medida de ventana

Contacts

Mapa de imagen a modo de mapa de contacto, al pasar el cursor por la rotonda (establecida como área circular) se hace visible el gif colocado sobre el mapa con js y con display none. Al sacar el cursor del mapa, vuelve a desaparecer.

Galería de fotografías que pasan automáticamente cada cierto tiempo

MIS TECNICAS DE VERIFICACION

• Tener claro cómo se quiere la página y qué tiene que hacer cada elemento

Lo principal antes de poder averiguar a qué problemas nos enfrentamos es conocer al completo la página, cómo tiene que ser, qué elementos tienen que hacer cada cosa etc.

• Comprobar metas del HTML

Vamos por partes, esta parte debe estar correcta si queremos un óptimo funcionamiento y además buscamos una buena indexación de las páginas. Por ejemplo, para que no aparezcan símbolos raros habrá que especificar correctamente el idioma y así con todo.

• Comprobar enlaces de CSS y JS

Da igual lo que modifiquemos estos archivos si el enlace que los vincula no es correcto, así que esta comprobación temprana ahorra mucha búsqueda de errores.

Personalmente, además, prefiero que sean archivos externos en vez de colocar el CSS y JS integrado en el HTML, pues es más incómodo para trabajar en un código largo.

• Comprobar si están correctamente colocadas y cerradas las etiquetas de HTML básicas

Para evitar problemas, lo ideal es comprobar que el head, body y html estén abiertas en el lugar correcto y cerradas en el orden correspondiente y ningún elemento perteneciente a uno u otro fuera de lugar.

• Comentarios para detectar errores

Una manera muy eficaz de detectar los errores es comentando, tanto en el CSS, como JS como HTML, siendo muchísimo más necesario y útil en el JS debido a que cualquier elemento mal colocado da pie a error. El procedimiento sería muy simple, si no sabemos exactamente dónde puede estar localizado el error, comentamos todo el código que sea posible, dejando una pequeña parte funcional, si ésta funciona, iremos descomentando poco a poco el resto del código hasta dar con la parte que crea el problema; una vez ahí, buscamos el origen y lo intentamos solucionar hasta que funcione.

• Validadores para un análisis rápido

Los validadores nos permiten ahorrar tiempo a la hora de localizar los errores, incluso en la línea exacta , además de proporcionarnos en ocasiones una explicación del mismo.

• Para finalizar, tener en cuenta

No puede haber variables en JS con Ñ por ejemplo, dado que no funcionará, hay que tener especial cuidado con los signos de puntuación como tildes o la letra Ñ.

DIA CIENTO SESENTA Y SIETE 23/02/2015

Hoy comenzamos una nueva parte de la unidad formativa, ya con teoría desde por la mañana para empezar con alegría el lunes. En diseño seguimos con la teoría, esta vez del expresionismo que, como he podido comprobar, es lo más parecido a lo que hago. Tuvimos, además, las distintas exposiciones de trabajos de recuperación de los compañeros que habían suspendido.
El equipo Northink por nuestra parte ya tenemos hoja tipo del manual y nos dividimos la tarea para poder confeccionarlo cuanto antes, a parte de esto, llamamos a una posible clienta para quedar con ella en una primera reunión.

DIA CIENTO SESENTA Y SEIS 20/02/2015

Hoy seguimos con teoría en diseño gráfico,concretamente el estilo futurista. En programación tuvimos tiempo antes de la clase de diseño para acabar todo lo que teníamos que presentar después del descanso para, posteriormente, realizar una exposición de nuestros trabajos en la cual vimos las distintas tendencias que hay en el diseño web actualmente y echamos un vistazo a la competencia más cercana.

CALIGRAFIA JAPONESA

Caligrafía japonesa

La escritura del japonés proviene de la escritura china, que fue llevada a Japón por medio de Corea, en el siglo IV. El lenguaje japonés como tal no posee alfabeto, sino silabario. La escritura japonesa comprende tres sistemas de escritura clásicos y uno de transcripción:

• Kana, silabarios
  
  • Hiragana (平仮名), silabario para palabras de origen japonés
    
  • Katakana (片仮名), silabario usado principalmente para palabras de origen extranjero
    
• Kanji (漢字), caracteres de origen chino
  
• Rōmaji (ローマ字), representación del japonés con el alfabeto latino
  

El katakana fue creado por monjes budistas, mientras que el hiragana fue desarrollado por mujeres de la aristocracia. Por ello, incluso hoy en día, el hiragana está considerado como un sistema de escritura con cierto toque femenino o incluso infantil. En la actualidad, el katakana es usado para escribir fonéticamente palabras de origen extranjero (外来語), particularmente nombres de lugares y de personas. También se usa para escribir onomatopeyas y, en forma figurativa, para enfatizar palabras, de forma similar al uso exclusivo de mayúsculas, cuando se quiere llamar la atención. El hiragana, por su parte, se combina con loskanji como parte de la gramática japonesa. Desde hace unas décadas, el japonés ha adoptado muchas palabras extranjeras, siendo la mayoría de origen inglés y unas pocas del alemán. También hay palabras que provienen del español, y que se adoptaron hace algunos siglos, cuando los misioneros españoles y portugueses llegaron a Japón por primera vez.
El japonés hace uso del alfabeto romano bajo el nombre de rōmaji. Es utilizado para escribir nombres de marcas o compañías y también para escribir siglas internacionalmente reconocidas como CD. Existen distintos sistemas de romanización, de los cuales el más conocido es el sistema Hepburn (que es el de mayor aceptación y que se utiliza en la Wikipedia), aunque el Kunrei-shiki es el oficial (gubernamental) en Japón.

Originalmente existía un escaso número de sílabas posibles, pero en los últimos años, debido a la creciente influencia de los idiomas extranjeros (sobre todo del inglés), han sido anexados algunos sonidos que sólo pueden ser escritos en katakana (ti, tu, di, du, tse, che, etc.)

Los japoneses utilizan para escribir los mismos instrumentos que los occidentales, es decir, lápices y bolígrafos. Sin embargo, el pincel es por tradición la base para la enseñanza de la caligrafía japonesa (Shodō). La buena escritura a mano se considera en el Japón como referente de la personalidad y la buena caligrafía a pincel como una forma elevada de expresión artística.



El Shodō se considera un arte y una disciplina muy difícil de perfeccionar y se enseña como una materia más a los niños japoneses durante su educación primaria.

Proviene de la caligrafía China, y se practica a la usanza milenaria, con un pincel, un tintero donde se prepara la tinta china, pisapapeles y un pliego de papel de arroz. Actualmente también es posible usar un fudepen, pincel portátil con depósito de tinta.

El shodō practica la escritura de caracteres japoneses hiragana y katakana, así como caracteres kanji derivados de la escritura china. Actualmente existen calígrafos maestros en este arte que son contratados para la redacción de documentos importantes.

Además de requerir una gran precisión y gracia por parte del calígrafo, cada carácter kanji debe ser escrito según un orden de trazo específico, lo que aumenta la disciplina requerida a quienes practican este arte.