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.